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.
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:
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:
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:
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?
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 real-time 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!
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.
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:
emSubscribeto register for event callbacks (note: only call it once per channel or you’ll get duplicate message events!)
emMsgEv(which is shorthand for “Ember channel message event name”) Pretty sweet! Now, how do we unsubscribe?
emUnsubscribefunction, which even takes care of de-registering the event handler for us.
… And we’re done! Hopefully this helps you get started with PubNub channel multiplexing and Ember.js without much trouble.
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 email@example.com!