Real Time Messaging
Your presenters today are @ArinSime, David Alfaro (@AgileNature), and Mariana Lopez (@nanalq) of AgilityFeat. In addition, we want to thank a few of our awesome team members who helped build the demo application and sample code for this presentation: Allan Naranjo, Andrea Phillips, Daniel Phillips, and Oscar Phillips. Gracias amigos!

Thanks for joining us!

Here are 6 ways to get more out of our session on real time messaging.

#1 Participate in the Presentation!

By visiting in your mobile Chrome browser, you will be able to rate slides in real time and see your votes cast on the screen, as well as make comments and send them to the presentation screen in real time. You will also see the current slide displayed on your mobile device, and kept in synch with our main screen. Again, this all works best in Chrome for the moment.

#2 Try some coding!

Want to see how the comment code works? Visit, and you'll see another comment box that will allow you to post comments to our screen. There's also a complete html/javascript sample that you can paste into a local html file on your computer and play with the code to post to the main screen. Go ahead, give it a shot!

#3 Get the slides!

You can follow along with the slides on your mobile device using step #1 above, but if you want a copy of them for later, just visit Slideshare.

#4 Sign up for Real Time Weekly news!

How will you keep up with all the latest information on these real time frameworks? Check out our publication Free weekly newsletter on everything related to real time messaging and WebRTC. Sign up now!

#5 Check out our book!

Would you like to learn how to write the code we've demonstrated? Check out our book Building Real Time Web Applications. It will walk you through all of this step by step.

#6 See more code!

Want to dig into the code more? We're keeping a public repository on github that you are welcome to check out: During our presentation, we probably explained the following code samples for how we setup the WebRTC calls demonstrated in the session.

This method is used to determine if the person commenting has WebRTC capabilities. We determine that based on whether or not we can access the getUserMedia method for them. Only if we think they can do a WebRTC connection do we display the video icon next to their name.
In the next example, we are accessing the WebRTC stream in order to call someone. We pass in an options object which contains { video : true, audio : true } in order to request access to both their camera and audio.
If we want to stream our video/audio to another user, then the first thing we must do is publish our stream to that other party. The following code publishes a stream to the user (which we already identified during signaling as identified by uuid), and then can subscribe to their stream as well.
Finally, it's important to note that in our demonstration we are sending several types of messages through PubNub in order to allow users to vote, comment, changes slides, etc, in our application. You generally need to define a custom JSON object to be passed around in all cases with a value similar to our "message.type" below. This tells your code what type of message or command is being sent, so that you know what to do with it.

Don't forget - learn more in Real Time Weekly!

This is pretty cool stuff that we demonstrated today, right? There's a lot going on in the tech world right now with real time messaging and WebRTC, which is why we started WebRTC and real time messaging are happening in both mobile and browser, so don't get left behind! is a free weekly newsletter that curates the best content out there on real time messaging and WebRTC. Sign up now!

The Book!
Learn more about real-time messaging and WebRTC in our book! All the details are available at