AngularJS and PubNub
This is an example of using AngularJS with the PubNub library. You can find more about how to build a realtime Angular app using PubNub by visiting the Getting started with PubNub’s new AngularJS SDK blog post or by visiting the updated AngularJS chat app tutorials page.
PubNub is a realtime network that helps developers build realtime apps easily and scale them globally. Angular.js provides developers with a powerful and easy-to-use framework for web application development. Combine the two, and you get a powerful combination for communication, entertainment, enterprise collaboration, replication and synchronization - Angular.js takes care of the event handling and DOM updates, and leverages PubNub's global network to provide scalable message delivery.
In the latest version, the Angular.js PubNub library provides access to a 'PubNub' object within Angular controllers, avoiding access via a global variable for access to the PubNub core JavaScript API. In addition, this extension provides developers with special Angular-specific capabilities such as root scope integration, presence and channel lists, plus native message broadcast events and tie-ins with PubNub history and presence APIs.
For more information about the PubNub API visit the developer resources and docs page.
Please share your ideas and use cases for future releases of the library - we welcome contributions, pull requests and issue reports.
Questions, Feedback and Support are always available through the forums at www.pubnub.com/support/ or email to support@pubnub.com.
What's in the AngularJS Sample Application
This sample application demonstrates a multi-channel chat room application that takes advantage of PubNub's easy to use API and globally scaled network. Multi-channel operation is extremely efficient thanks to multiplexing support in the PubNub client library. This means that the client library doesn't have to open 7 TCP connections so it can participate in 7 broadcast channels - the server and client library takes care of combining and separating messages on a single channel. This is especially useful for power-conservation on mobile devices.
You can check out the sample application online at http://pubnub.github.io/angular-js/
Running the Sample App
- git clone the app
- cd angular-js
- npm install
- bower install
- grunt server
- navigate browser to http://localhost:9000/
Using the Sample App
- Send messages to a channel using the chat box
- Add new chat room channels using "create new" channels button
- Select a different channel by clicking the channel button
Under the Hood of the Sample App
The HTML page includes 3 key libraries:
- The core PubNub JS Library (generally from the CDN)
- AngularJS (usually as a Bower component)
- PubNub Angular (copy & paste for now - bower component coming soon)
The HTML code looks like this:
The app is Angular-enabled with an ng-app attribute:
Where 'PubNubAngularApp' is the name of the Angular module containing our app.
The code for the app lives in:
Notice the dependency on the PubNub Angular library (pubnub.angular.service):
The code for the controllers lives in:
The PubNub service is injected into the controller:
Using the Special AngularJS PubNub API
Publishing to channels is trivial:
Here, we call the PubNub publish method passing in the selected channel and the message to transmit. It is also possible to transmit structured data as JSON objects which will be automatically serialized & deserialized by the PubNub library.
Subscribing to channels is accomplished by calling the PubNub ngSubscribe method. After the channel is subscribed, the app can register root scope message events by calling $rootScope.$on with the event string returned by PubNub.ngMsgEv(channel).
This is the core of the PubNub API - allowing clients to subscribe and publish to channels, and have those events propagate in realtime to other applications connected to the same channels.
Integrating Presence Events
It's also easy to integrate presence events using the Angular API. In the example above, we just add an additional couple lines of code to call the PubNub.ngHereNow() method (retrieve current users), and register for presence events by calling $rootScope.$on with the event string returned by PubNub.ngPrsEv(channel).
Using the presence event as a trigger, we retrieve the Presence list for a channel using the PubNub.ngListPresence() function.
Retrieving History
It can be super-handy to gather the previous several hundred messages from the PubNub channel history. The PubNub Angular API makes this easy by bridging the event model of the PubNub JS history API and the AngularJS event broadcast model so that historical messages come through the same event interface.
Listing & Unsubscribing from Channels
The PubNub Angular API takes care of keeping track of currently subscribed channels. Call the PubNub.ngListChannels() method to return a list of presently subscribed channels.
Unsubscribing is as easy as calling the PubNub.ngUnsubscribe() method. The library even takes care of removing the Angular event handlers for you to prevent memory leaks!
Next Steps
The PubNub API offers a variety of functionality beyond just multi-channel publish and subscribe, including: