Combining Chat Data Streams with Ember.js Multiplexing

In our series on building a fully-featured chat application with Ember.js, we’ve already walked through how to build and implement:

• chat app structure
• user detection message history
• encryption and three way data binding
• access management

In this blog post, you’ll walk through using multiplexing with your Ember.js app, enabling you to leverage multiple Publish/Subscribe channels in the same application.

The benefit of multiplexing is that it allows your app to use a single socket for all channel communications, which is much more efficient than maintaining a connection per channel (especially on mobile devices). Thanks to the magic of Ember.js, it’s super easy to make this happen with minimal code tweaks!

Here is a full-fledged example:

This example is just scratching the surface of what you can do with the power of the PubNub service and Ember.js Have an idea? Join our rapidly growing PubNub Community.

What is Multiplexing?

Multiplexing originates from telecommunications and computer networks. You take several streams and combine them into one. This action is with the intention of condensing the information to fit through a bottleneck. After the information is transferred you de-multiplex the information back into separate streams.

Let’s take a look at the situations where you might use Multiplexing:

• You’re using one channel per stock in a realtime stock price app.
• You have a “livecast” or “second screen” app, and would like to break out group chat into a different channel (for example, to reduce noise or restrict publish access permissions).
• You’d like to have separate channels for “in-app” notifications versus user-to-user communications.
• In a game or collaboration app, you’d like to have a channel per “space”, and allow users to participate in multiple areas.

For this blog entry, we’ll presume you are somewhat familiar with the ideas from the PubNub Ember.js SDK, at least enough to get started.

Here are a few more resources:

• Code Pen for the PubNub Ember.js Chat Application
• Zero to Ember.js in 60 Seconds: Ember Made Easy
• Ember.js 101: From Zero to Ember in PubNub Seconds

Quick Recap: Intial Set Up

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Admin Dashboard. To test a live version of this app, clone the Code Pen code, and enter your unique PubNub keys on the PubNub initialization.

Here are the script includes you’ll need to get started:

The HTML View

This is the HTML we’ll need to display the functionality we’ll be creating with JavaScript. For a simple chat application, we’ll want to see all the current users, an input box to send new messages, as well as a count and list of messages sent.

First, define the Ember.js Application:

Display a list of all available channels. In this multiplexing example, we’re letting users choose what channels to subscribe to. In your case, you might have an automatic or application-driven logic that decides channel subscriptions.

Provide an input box for new messages:

Now that we have the channel selection UI, let’s hook up the publishing UI. We use separate buttons – in your application, you will probably have alternate logic for deciding the target channel for your messages.

We pass in the channel name so our publish() function knows where to route the new message. What’s left? Not a lot! We’ll close out this section with an easy one.

Display the chat history:

That was easy, right?

Initializing the Ember.js Application with PubNub

Creating a new Ember.js application is easy.

We’ll need to assign each user and id when they enter the channel. For the sake of simplicity, we’ll assign a random number for each id.

First we initialize the PubNub realtime service.

You should replace demo with your own subscribe and publish keys from your PubNub account. Remember, those keys are available in your Admin Dashboard, and unique to you, so don’t share them!

The main:pubnub object is fully initialized and available for injection into the controller.

Now we can access the PubNub service anywhere from our controller with this.get('pubnub'). There are certain cases, like nested closures, where you might need to use var self = this outside of the closure.

Setting Up Channels

We set up a dynamic collection for users, messages, and subscriptions to channels. Instead of a single channel, we keep track of the two channel subscription status values using a JavaScript Hash.

OK, now we’re getting somewhere! Let’s set up a function to handle the channel subscription logic.

The important things about this code are:

• We use emSubscribe to register for event callbacks (note: only call it once per channel or you’ll get duplicate message events!)
• We register for message events using the Ember native on function.
• The channel message events are named using a PubNub-Ember-specific string that we obtain using emMsgEv(which is shorthand for “Ember channel message event name”) Pretty sweet! Now, how do we unsubscribe?
• We call the emUnsubscribe function, which even takes care of de-registering the event handler for us.
• Multiplexing Publish Action: This one is really simple – it’s just a tiny bit different from the single-channel example.
• All we had to do was add a ‘channel’ argument to our publish function. Since ‘publish’ doesn’t require a ‘subscribe’, it’s really easy to fire off messages with PubNub!

The last part of our JavaScript code is writing a function that knows whether to subscribe or unsubscribe, plus a bit of code for setting up the initial channel subscriptions.

… And we’re done! Hopefully this helps you get started with PubNub channel multiplexing and Ember.js without much trouble.

Wrapping Up Ember.js

In this blog post, we had fun showing you a how to integrate multiplexing in your Ember.js app with the PubNub Ember.js library. We hope you find this information to be useful — it is really cool to see the number of PubNub and Ember.js applications growing!

The PubNub API has many more features we didn’t cover in this blog post, but which are explained in detail in the GitHub API Guide and Reference. The documentation walks you through additional topics which really enhance your real-time-enabled web application.

In future blog posts, we’ll cover other features of the PubNub Ember.js API. In the meantime, please give the Ember.js integration a try, have fun, and reach out if you have ideas visit GitHub pubnub/pubnub-ember. If you need a hand don’t hesitate with help@pubnub.com!

RESOURCES

• Zero to Ember.js in 60 Seconds: Ember Made Easy
• Ember.js 101: From Zero to Ember in PubNub Seconds
• PubNub Ember.js SDK
• CodePen for the PubNub Ember.js Chat Application
• PubNub Community
• PubNub Library
• PubNub Ember.js Library