Build

Build a Subscriber to Receive and Publish Data w/ Ember.js

3 min read PubNub Staff on Mar 19, 2015
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

In Part Two, we're building the subscriber app that receives and publishes data to its UI using Ember.js, receiving data from a broadcaster app.

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.

broadcast subscriber publish/subscribe messaging real-time ember

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!

We have a working demo of the broadcaster (previous tutorial) here, and the subscriber (this tutorial) here. Open up the two links, and send data from the broadcaster to the subscriber in real time.

Part 2: Building the Spectator

Spectator preview:

broadcast subscriber publish/subscribe messaging real-time ember 1

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 Libraries

broadcast subscriber publish/subscribe messaging real-time ember 2

Include JQuery, the PubNub library, Handlebars, Ember.js, the PubNub Ember library, and Bootstrap.

The Structure

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.

broadcast subscriber publish/subscribe messaging real-time ember 3

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.

Wrapping up

We’ve now successfully built a broadcasting app with Ember.js!

Want to see the finished product in action? Check out the broadcaster and subscriber demos, open both up (or even a couple of subscribers), and send data from the broadcaster to the subscriber.

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!

Additional Ember.js Resources

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff