Welcome back to our blog series about how to get started quickly with AngularJS using the PubNub AngularJS library. In a recent episode, we covered a tiny but powerful example of how to get started with a real-time Angular Chat application in less than 100 lines of code. Additionally, we’ve compiled all our AngularJS blog posts here. Now, onto multiplexing!
All the code you need for building PubNub multiplexing into your AngularJS app is available here:
In this blog post, I’ll walk you through using PubNub Multiplexing with your Angular 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 AngularJS, it’s super easy to make this happen with minimal code tweaks!
First off, let’s take a look at the situations where you might use Multiplexing:
So, now that you know you want to try out multiplexing, how do you do it? It’s pretty easy with the PubNub AngularJS application.
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 Portal. We’ll be using our unique publish/subscribe keys later in the tutorial.
Setup of the PubNub Angular library is exactly the same as with the original Zero-to-Angular example:
What does all this stuff do?
Once these are all set, you’re good to start coding!
Setup of the content DIV is the same as with the original Zero-to-Angular example:
Multiplexing Subscription UI: In this 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.
The key things to note about this code are:
ng-model="subscriptions.channel1" attribute, we’re telling Angular to keep the $scope.subscriptions.channel1 variable updated with the checkbox checked status (and likewise for channel2)ng-click="updateSubscription('channel1')" attribute, we’re telling Angular to call the $scope.updateSubscription() function with argument ‘channel1’ when the checkbox is clicked (and likewise for channel2)So putting this all together, we keep track of the desired channel subscription status with the ng-model, and we trigger the update action using ng-click.
The experienced reader may ask: Why don’t we use $scope.$watch instead of ng-click? The reason is that with watches, Angular doesn’t pass the variable name of the thing that changed. With ng-click, we can sneak that channel argument in there so we know exactly what channel status changed.
Multiplexing Publishing UI: 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.
The h4 tag is just a header. The real power lies in the button ng-click handlers. We pass in the channel name so our publish() function knows where to route the new message. We’ll get to that soon when we look at the controller.
What’s left? Not a lot! We’ll close out this section with an easy one.
Just like in the original example, the HTML above just displays our messages in a UL (unordered list) element.
Just like the previous blog entry, let’s wrap up by taking a stroll through the JavaScript to see what’s happening. You’ll recognize a bunch from last time:
Just like last time, we:
The one difference is:
That’s pretty cool. Let’s see what we have next.
The code is exactly the same as our first installment. We just initialize PubNub if it hasn’t been already. You’ll want to put in your own publish and subscribe keys of course!
Multiplexing Subscribe/Unsubscribe Actions: 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:
Pretty sweet! Now, how do we unsubscribe?
We call the PubNub.ngUnsubscribe function, which even takes care of de-registering the event handler for us. Not too hard at all!
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.
So what we’re doing in the first part is:
And to bring things full circle, the last part just does a 1-time set of the subscriptions when the controller loads! (Since we don’t have an update event because there was no user interaction yet.)
… And we’re done! Hopefully this helps you get started with PubNub channel multiplexing and AngularJS without much trouble. Please keep in touch, and give us a yell if you run into any issues!