In our first part of this tutorial series, we built the broadcaster (publisher) for our broadcast pub/sub app using Ember.js. In this tutorial, we’re building the subscriber side, the end-user(s) application that receives the data and publishes it in real time.
Applications of this sort can transfer custom settings for SVGs. Imagine being able to build game where properties for the graphics are transferred in real time. Skills you learn from this entry could be used for websites viewed on mobile devices, like live blogging platforms. We built a sportscast statistics app, where updates are broadcast to multiple users simultaneously. The options are endless!
Project Overview and Working Demo
The example here is simple. The listener subscribes to the channel. When the properties of the SVG are changed by the broadcaster, the listener hears the message. Once the message is heard, the listener’s SVG properties change. Let’s get a preview of the great things to come!
Part 2: Building the Spectator
If this is your first time working with Ember.js, we recommend you take a look at the PubNub Ember SDK page. This guides you through the dependencies and how to set up Ember. It then instructs you how to integrate PubNub into the app. We will breeze by some of the same topics in this blog entry.
Include JQuery, the PubNub library, Handlebars, Ember.js, the PubNub Ember library, and Bootstrap.
Keep it simple for the SVG. Specify the rectangle in the background as well as the circle in the foreground. Specify the height and width for the rectangle, as well as the radius and position for the circle. We bind the color data to the shapes so we can display them with the SVG.
This is more interesting than applying the colors to a font and background. And it proves that the the broadcaster can specify colors for very different use cases!
Making it all work: The Ember Controller
Now, tie it all together. Create a new Ember application and assign a random user name to each new user in the channel, and initialize PubNub with your own credentials.
To get your unique pub/sub keys, 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 Dashboard. Our free Sandbox tier should give you all the bandwidth you need to build and test your messaging app with the web messaging API.
Specify a channel to subscribe, a data object (to receive colors from the channel), and a user.
Specify an instance of the PubNub service, the channel, and
this to make things easy.
Set some default colors for the SVG.
Subscribe to the channel, it should be the same channel to which the broadcaster is publishing.
Register for message events so when the broadcaster sends new colors, the SVG updates immediately.
We’ve now successfully built a broadcasting app with Ember.js!
We also recently released another broadcast demo, where we built a sportcast app that streams sports statistics, so if AngularJS is more your style, check it out!