Although ‘messaging’ has become increasingly popular among web applications, there have been issues with connectivity, a poor feature set, and compatibility with one platform. These are most likely due to the complexity of building a scalable backend that connects in real-time to multiple clients. I set out to fix this with PubNub Messenger.

My task for this project was to create a well-featured and scalable chat application that runs on Android, iOS, and Desktop in a few weeks work. No big deal, right?

The tools I chose for this task were jQuery Mobile and the PubNub API. jQuery Mobile is an amazing frontend framework that allowed me to deliver my app to multiple devices without worrying about interface size or enabling touch. The PubNub API allowed me to cast my backend aside and build everything with just HTML and JavaScript. It handled real-time messaging between my users, scaling out to multiple regions, and load balancing across multiple servers. Here’s the final result and source code.

The Approach

The entire application consists of three files, one HTML file, one JavaScript file and one CSS file. Most of the frontend is built with jQuery Mobile components. In the end I had to add some CSS to get the user list working responsively and add some overall flair to the app. The app also uses jQuery Mobile’s page navigation. This allowed me to define all my pages in one file and then show and hide them using JavaScript. This might not scale if I kept adding more functionality, but it worked for the purposes of building this demo.

The rest of the app is built on top of the PubNub JavaScript API. Each user is identified by a username that they enter at the beginning of the application. From there the user can enter any chat room designated by a chat room name and use the app to talk to everyone else in that room. The PubNub API also allowed me to get chat history for a given room so you can see what people have been talking about as well as PubNub Presence to tell the user who is currently in the room chatting.

The final piece of the puzzle to get it working on iOS and Android was using PhoneGap. With PhoneGap, I could easily generate an Android and iOS app that runs a full screen web view to load the application in. As soon as the page loads, the frameworks take care of the rest. The best part of this that is the only mobile support I had to include was hiding the user list on smaller screens. Everything else was simply plug and play.

Overall, it was pretty straightforward to build. Instead of spending my time writing platform specific code or setup a single server, I was able to focus on adding great features to my application. This is how web development should be.

If you would like to build your own application like this, check out the source code on GitHub.

Also stay tuned for upcoming in-depth tutorials on how to build PubNub Messenger.

View all posts

In my quest to change the world, I’ve been experimenting with an HTML5 game engine to push the limits of the browser as a platform for serious gaming. melonJS has been my tool of choice because it’s lightweight, runs well on mobile, and is very easy to use. Starting last year, I became co-developer on the project. One question that always comes up on the melonJS forum is the best way to use Node.js/socket.io to build multiplayer games. In this article, I’ll be using PubNub, but many of the techniques can be applied to socket.io as well.

For this experiment, I’ll start with the platformer demo that ships with the melonJS 0.9.7 source code, and transform it into a multiplayer game with just a few extra lines of code. And all without any servers! This is only possible with the power provided by PubNub.

Want to see the end result? Check it out here. I’ll walk you through how to add multiplayer support to your own game below:

Download melonJS

First step, clone the git repository and checkout the 0.9.7 tag:

$ git clone https://github.com/melonjs/melonJS.git
$ cd melonJS
$ git checkout 0.9.7

Next, you’ll want to follow the build instructions to build the library. And you can test the vanilla platformer demo by launching an HTTP server with Python:

$ python -m SimpleHTTPServer

Now visit the URL in your favorite web browser:

http://localhost:8000/examples/platformer/

It’s a very simple game demo, with a handful of enemies and two maps. However, we want multiplayer support as well. What I started with is a simple module to handle the multiplayer communications:

mp.js

var Multiplayer = Object.extend({
    init : function (new_player) {
        this.pubnub = PUBNUB.init({
            publish_key   : "demo",
            subscribe_key : "demo"
        });

        this.new_player = new_player;

        // Record my UUID, so I don't process my own messages
        this.UUID = this.pubnub.uuid();

        // Listen for incoming messages
        this.pubnub.subscribe({
            channel : "PubNub-melonJS-demo",
            message : this.handleMessage.bind(this)
        });
    },

    handleMessage : function (msg) {
        // Did I send this message?
        if (msg.UUID === this.UUID)
            return;

        // Get a reference to the object for the player that sent 
        // this message
        var obj = me.game.getEntityByName(msg.UUID);
        if (obj.length) {
            obj = obj[0];
        }
        else {
            var x = obj.pos && obj.pos.x || 50;
            var y = obj.pos && obj.pos.y || 50;
            obj = this.new_player(x, y);
            obj.name = msg.UUID;
        }

        // Route message
        switch (msg.action) {
        case "update":
            // Position update
            obj.pos.setV(msg.pos);
            obj.vel.setV(msg.vel);
            break;

        // TODO: Define more actions here
        }
    },

    sendMessage : function (msg) {
        msg.UUID = this.UUID;

        this.pubnub.publish({
            channel : "PubNub-melonJS-demo",
            message : msg
        });
    }
});

This class has a constructor and two methods; the constructor takes one callback, and the sendMessage() method is the one we’ll be using to send game state updates. This module also does some useful things like creating new player objects, and handling player position updates. I placed this file (mp.js) into the platformer directory, and included it within index.html (along with pubnub-3.4.5-min.js)

Creating a new Multiplayer object

To initialize the Multiplayer object, I added a few lines after the level has been loaded, around line 104:

    // Instantiate the Multiplayer object
    game.mp = new Multiplayer(function (x, y) {
        // Create a new player object
        var obj = me.entityPool.newInstanceOf("mainplayer", x, y, {
            spritewidth : 72,
            spriteheight : 98,
            isMP : true
        });

        me.game.add(obj, 4);
        me.game.sort();

        return obj;
    });

This creates the object, placing a reference into the game namespace as game.mp, and passes a callback function that will create new player objects when we receive messages from other players we haven’t seen before.

That isMP : true line is important! It will be used later to determine whether the player object is Keyboard-controlled, or controlled by messages from the network.

Side note: to make testing easier, you can disable the “automatic pause” feature when navigating away from the browser window. I added the following line just before the call to me.video.init() in main.js:

        me.sys.pauseOnBlur = false;

Turning the PlayerEntity object into a Multi-PlayerEntity Object

Now we’re ready to hack the PlayerEntity object to work in a multiplayer environment, sending position updates, and ignoring the keyboard input for the isMP entities. Starting in entities.js at line 25, I added two new properties:

        this.isMP = settings.isMP;
        this.step = 0;

Then I changed the following lines to be conditional on the value of the isMP property. The viewport follow and key bindings should be skipped if the entity is a multiplayer object:

        if (!this.isMP) {
            // set the display around our position
            /* ... snip */

            // enable keyboard
            /* ... snip */
        }

The original code has been snipped from the example above, but it should be pretty obvious what needs to be changed here.

In the PlayerEntity.update() method, there are a few things that also need to be made conditional on the value of isMP. This first checks the key status:

        if (!this.isMP) {
            if (me.input.isKeyPressed('left')) {
                /* ... snip */
            }

            if (me.input.isKeyPressed('jump')) {
                /* ... snip */
            }
        }

There’s also a call to me.game.viewport.fadeIn() that reloads the level when the player falls into a hole. We could make that conditional too, if we don’t want to reload the level when other players fall in.

And finally, there’s a comment at the end of the method about checking if the player has moved. This is the perfect hook for sending out player position updates to other players! I added the following code just before the call to this.parent():

            if (this.vel.x !== 0)
                this.flipX(this.vel.x < 0);

            if (!this.isMP) {
                // Check if it's time to send a message
                if (this.step == 0) {
                    game.mp.sendMessage({
                        action : "update",
                        pos : {
                            x : this.pos.x,
                            y : this.pos.y
                        },
                        vel : {
                            x : this.vel.x,
                            y : this.vel.y
                        }
                    });
                }

                if (this.step++ > 3)
                    this.step = 0;
            }

The first two lines will fix the “direction” of the player object when it is updated by a message from the network.

The rest contains a basic counter to prevent sending messages too fast, and the final message publish that other players will receive.

Play It Online!

The final demo can be played online now! And you can also have a peek at the full patch here. A much better approach would be separating control logic entirely from the entity. But in this case, the demo serves its purpose. Maybe next time, we can work on synchronizing more of the game state, like enemy positions and individual score counters!

View all posts

1. What are you going to be doing for PubNub over the next couple months?

I am going to be developing and showing off some really cool demos built on top of the PubNub Real-Time Network! I want to really show off what our API is capable of. Overall, I also will be working on the front end presence of PubNub to make our website and dashboard sleek, shiny, and extremely usable for our customers.

2. So you make things pretty. What’s your favorite part of that?

My favorite thing about making things pretty is seeing a great user experience come together. I love creating experiences that don’t just ‘wow’ people visually, but make their day-to day easier in some way as well. Elegant but usable is my motto when it comes to my work.

3. Why’d you pick PubNub?

I picked PubNub because we are making huge strides on what you can build in a web page. I am passionate about pushing the web forward and I feel like I can accomplish that with the PubNub team. There are also free frisbees.

4. When you’re not at work, what are you doing?

When I am not work I am usually playing video games or hiking. The Bay Area has some amazing sights to see. I also grew up on video games and love to play all types. I play everything from the most complicated games on Steam to the most simple games on the phone and love them all.

5. What is the musical soundtrack to your life?

I would have to say anything by Radiohead. It definitely fits my outlook on life. It is also a great coding soundtrack.

View all posts

Learning a new programming language has always been fun for me. That’s why my job as Manager of Client Solutions at PubNub is literally a geek’s dream — it involves working closely with our customers to provide client SDKs to them in over 50 different languages!

Since I started working here, I’ve been stocking up on O’Reilly books and honing my skills in many of these languages, such as Android, Flash, Java, J2ME, JavaScript, Ruby, PHP, … the list goes on and on. But the one language I’ve had the hardest time getting my brain around has been Objective-C for iOS development.

Objective-C is very ugly, and not at all easy on the eyes. It has many sharp edges due to its use of square brackets, and by design it’s very verbose and syntactically-bloated. Its friends don’t invite it to the beach or the mall anymore, and at parties, it hangs out in the corner of the room, sober and alone.

In order to really embrace it, one must get past its physical appearance. I tried. And tried. And eventually, I did. And once I did, and learned to appreciate it for what it is, like probably everyone else who has done iOS development, I began hacking around with XCode.

For those who are unaware (as I was until recently), XCode is the all-in-one, Super-IDE, provided by Apple via the iTunes store.  Nearly all tutorials, HOWTOs, etc. reference this IDE in their documentation. If you try to develop on Linux or Windows for iOS, good luck — you will have a hard time setting up the open source dependencies and libraries required to achieve this. It’s totally possible, but takes a lot of time, and if you have any issues during coding or compiling, a select few will be able to assist you with your issue, as many people would normally say “Ok, in XCode, did you try clicking this then that?” You can probably see where this is going.

“SO!” you may say, XCode is only available on Mac, and it’s basically the only supported way of doing iOS development. Apple makes things that are shiny and expensive that everyone MUST LOVE! iPods were awesome, Newton was awesome, so XCode must be awesome! Actually, nope. It kinda sucks. I can honestly say that MS Quick C 5.0 had an easier-to-use QBasic-based IDE than XCode provides.

Although there are ways to extend it via plugins, the base, Apple-supported IDE is pretty weak in features. For example, you can only open two tabs at a time, there is no quick and easy way to reformat code, and the code-commenting logic gets confused by indentation. I can go on and on, but I won’t because there are articles dedicated to how much XCode sucks already out there.

I asked some iOS developers what they were using, and Jetbrains AppCode came up a lot. So I gave it a shot. And I must say, it’s AWESOME!  I may be biased, as I am no stranger to Jetbrains IDEs…

I was first introduced to RubyMine a few years ago, and was dazzled by how awesome and easy to use it was.  As I now need an IDE that can support nearly every language on the planet here at PubNub, I began using Jetbrains IDEA to fill that niche. Aside from the awesome features that you come to expect in an IDE (code reformatting, multiple tabs, debugging tools, built-in diff tools, etc) one of the best things I have become accustomed to with IDEA is the consistency of keyboard commands for a given task, regardless of the language I’m working with.

AppCode has a very similar look and feel to that of IDEA. So for me, the learning curve was dramatically reduced (I already knew how to debug, compile, diff, etc. using IDEA, so figuring it out with AppCode took me seconds. The only real obstacle I ran into is the key bindings, as I’m coming from IDEA on Linux via a PC keyboard. But you can’t have it all, can you?

I would say if you are a fan of IDEA or any of the other Jetbrains IDEs, and you either want to learn iOS development, or are looking for an alternative to XCode, AppCode is awesome. You should still get acquainted with XCode, as you will need it every once in a while, but AppCode has made learning iOS not only tolerable, but actually FUN!

Happy coding!

View all posts

Quick Start Guide

For those of you who need a quick mini-guide to getting your MongoDB installed and running with data sync streaming directly to your mobile app, you can follow this guide: MongoDB Pipe GitHub Repository. It will show you how to download/install MongoDB and the MongoPipe GEM.

Real-time Data Stream of Geo Coordinates

Lat/Long from MongoDB replicated to your iPhone App

The commission at the online workplace was posted as a $3,025 bounty. Rather than taking the commission for ourselves, which involves building and delivering the solution in a private exchange, we instead reviewed the specifications and requirements and we developed an open source implementation that you can download and run for your live app today! MIT License, so you can use this however you desire. We even created a GEM for you and made it easy to get started:

gem install monogopipe 

Downloading the GEM is the first step in the process and next we’ll walk you through more details. Actually now may be the time for you to watch the short video, so feel free to jump into that now if you want a very brief demonstration and usage covering these points:

1. Installing the Ruby gem and
2. Executing the commands to setup MongoDB and
3. Running the Pipe Daemon.
4. Launching the Map Viewer.
5. Finally inserting lat/long coords into MongoDB.
6. Result is live-animated points on a map displayed on the iPhone.

The video will show usage of the MongoPubNubPipe gem. Source code is available via GitHub if you want to see everything -MongoDB Pipe GitHub Repository

This becomes the new interface that is available with mongopipe gem:

MongoPubNubPipe::Connect.new(...)

Usage of MongoPubNubPipe is available lower in this document.

Play Video – MongoDB Geo Coordinates

The video demonstrates an implementation of the connection between MongoDB and a mobile device (an iPhone in this case). This application code and gem library will provide you a way to easily add a live always-on map connection which allows you to send lat/long signals directly to the device displaying the map with the specific Lat/Long DB written into MongoDB. This will cause the device to draw an animated dot onto the screen of the device in real-time.

The dot that animates is triggered by simply writing to your MongoDB collection directly either through the mongo console or through your RoR/Ruby Server Code. For example here is a MongoDB Console Command that will cause a DB write, creating a Document, which then triggers the sync with the consumer iPhone device that is rendering the map in real-time.

db.collection_name.insert({ latlon : [ 1.5, 2.0 ] })

Once you’ve written a Lat/Long coordinate into MongoDB collection, the process begins instantly synchronizing with any connected iPhone. We where able to include several feature requests and here follows the requirements:

• When a new Lat/Lon document is inserted into MongoDB, stream the Lat/Lon data to a mobile device is push data.
• Use a Ruby or Node.JS Service to stream the data out of MongoDB as it is written in real-time.

Simple enough, yes, though it requires moving pieces. We simplified the process and built two modules: one in Ruby and one in HTML5. We’ll walk through the methods for getting you started and how to hook into the stream on your iPhone App. You can fast-track the tutorial and go strait to the GitHub Repository or gem install mongopipe package for ruby.

GitHub Repository

MongoDB Pipe GitHub Repository

gem install monogopipe

How it Works

MongoPipe is a new tool powered by PubNub that streams your MongoDB Documents from your MongoDB Collection directly to your iPhone App in less than 0.25 seconds (real-time) using the PubNub Real-time Network. Your iPhone app opens an always-on TCP Socket Connection to PubNub while a dispatch process runs on your MongoDB server via Tailable Cursors to catch inserted documents. The data is streamed and brokered via PubNub Network directly to your iPhone App in real-time.

MongoDB Tailable Cursors

The ruby GEM mongopipe utilizes the tailable cursor interface provided by MongoDB Core. Document Data is then piped directly through the PubNub Network which uses a direct broadcast synchronization socket with the mobile app.

Next we’ll show you what the process is to get the mongopipe running on your Ruby Server.

Make sure MongoDB is running

mongod 

Next open a text editor and copy/paste the following mongopipe example.

require 'rubygems'
require 'mongopipe'

## ------------------------------------------------------------------------
## Pipe MongoDB for Inserts
## ------------------------------------------------------------------------
MongoPubNubPipe::Connect.new(
    :puts_usage    => true,
    :publish_key   => 'demo',
    :subscribe_key => 'demo',
    :db            => 'test',
    :collection    => 'cap_collection',
    :callback      => lambda{ |doc|
        ## Optional Callback Called on Doc Insert
        ## Remove :callback if you don't need it.
        puts(doc)
    }
).pipe()

Save this to a file pipe.rb for example then execute it.

ruby pipe.rb 

This will connect directly to MongoDB and print usage guide on next steps. The video covers only a demonstration of this process. Here is a sample output of what may be provided via the puts(doc) output:

Step 1: Open Your Browser to Show PubNub Pipe Console

> open http://www.pubnub.com/console?channel=test.cap_collection 

Step 2: Open Demo Map on Your Phone 

> open http://goo.gl/HAqAv#test.cap_collection 

Step 3: Insert Test Data 

> ./mongo

> use test

> db.cap_collection.insert({ latlon : [ 1.5, 2.0 ] }) 

Remaining Details

This blog entry was intended to give you a quick skim over the details on how the mongopipe ruby gem works and what is involved in coordinating the embeddable mobile HTML5 animated map.

If you have any more questions please tweet @PubNub directly.

You may be curious about the connectivity mechanism between your iPhone App and your MongoDB Sever. Checkout the PubNub WebSocket Reference below to see the transport mechanism utilized.

Thank you for reading!

PubNub WebSocket Reference

The MongoDB Pipe uses the PubNub Network WebSocket interface which provides an always-on socket connection to your iPhone app. The PubNub Network WebSocket acts as a broadcast receiver and syncs directly to your mobile device in real-time from your MongoDB server via MongoPipe.

Following is an example of how the Map app implements the socket:

// Create Socket Connection
var socket = new WebSocket(
    'wss://pubsub.pubnub.com/PUBLISH_KEY/SUBSCRIBE_KEY/CHANNEL'
);

// Set Message Receiver Function
socket.onmessage = receiver;

// Receiver Function Prints Data Result
function receiver(evt) { console.log(evt.data); }

View all posts

Challenge

The appeal of Stageit’s service is the ability for artists to interact in real-time with a large number of fans. In launching its service, Stageit had two key concerns. First, they wanted to power an unlimited number of users to chat live during a real-time show. Secondly, it was critical that users experienced zero downtime. At the time Stageit was using SocketIO and XMPP as a technology solution. However, these technologies didn’t scale effectively resulting in a limited number of chat participants and frequent downtime.

After looking at other real-time messaging systems, Stageit ultimately decided to go with The PubNub Real-Time Network. The reasons were simple. PubNub could empower an unlimited amount of fans to interact with artists seamlessly—with no cap on scalability. PubNub also offered unparalleled reliability and wide ranging device support.

PubNub Solution 

1. Stageit’s existing XMPP chat servers and secondary servers worked well until the company hit over 400 people then quickly became unreliable.
2. Pubnub was used to replace the backend SocketIO and NodeJS servers and worked very well but the XMPP servers were still crashing.
3. Therefore, Stageit replaced XMPP with PubNub and wrote a Chat Wrapper that talks to PubNub using Goliath to support Business and Security logic.
4. The system has been successfully tested to support five times their normal capacity, delivering the real-time user experience Stageit set out to create.

 PubNub Value

1. Wider browser and device support.
2. Redundancy and high-availability.
3. Reliable and scalable.
4. APIs are easy to learn.
5. Stellar service and support.

“When we started to experience explosive traffic we turned to The PubNub Real-Time Network to take care of our real-time infrastructure challenges. With the help of their top-notch support and product, we are now able to put all our focus into growing our business,
instead of baby sitting our servers.” -Evan Lowenstein, Founder and CEO

View all posts

1. Full Stack Software Engineer? What’s that mean?

I sling the codez from anything interacting with the core to what our clients see. Ergo, Day to day I write low level python stuff that interacts directly with the core C process all the way up to writing JS/CSS/HTML for our customers to interact with the core.

2. What’s the coolest part of working at PubNub?

Working on stuff that is connecting millions and millions and millions (The Rock WWE reference) of people, using the software everyday and the camaraderie in the office.

3. You recently moved from North Carolina to San Francisco, that’s a long way. What do you like most about being here?

It’s nice being close to a lot of new things to explore, Golden Gate Bridge, Tahoe, Yosemite…etc. The tech community is obviously larger so chances are I’ll walk into a bar and start talking about python or ruby with someone.

4. What’s one reason every app should be real-time?

The most successful and engaging apps these days are content driven and contextual with what’s going on right now, in the moment. So if your app is able to engage customers in a timely and relevant way it will be less likely to go stale. No one likes stale apps!

5. When you’re not at work, what are you doing?

Usually running, riding my bike, watching the Netflix or Hulu Plus, or there is usually some birthday party in the city I’ll go crash with my roommate.

6. Wait, what? You and your roommate crash random B-Day bashes?

Well, not exactly. I usually have some connection like a friend’s work friend’s sister. I show up, eat cake and sing Happy Birthday without really knowing anyone. It’s fun.

6. What’s the most challenging part of your day?

The morning. West coast is 3 hours behind everyone else (give or take 2 hours) so there’s usually a lot of fires to deal with straight out of the gate.

7. If you had a soundtrack to your life, what would it be?

Tarzan (Phil Collins’s version of course).

View all posts

The increased elbow room is one perk of the new space, but the fastest Real-Time Network on earth needs some cool racing stripes too!  Check out the time lapse of a small part of the new paint job below:

In addition, the new office space overlooks the heavily congested 17th and Mississippi intersection. When we’re not working on the PubNub Real-Time Network, were watching 18 wheelers try to maneuver around tight corners while avoiding fork lifts and pedestrians. Sometimes they’re even successful!

To say the least, everyone’s happier with the new space. Not to mention we have plenty of room to continue to add new desks (and new people). No stacking required.

View all posts

Want use PubNub to create your own WebRTC app? Sign-up for a free API Key and start building apps in just minutes.

View all posts

Here is a quick reference of what was covered in the show.

1. What is PubNub 2:10
2. What are real time applications 2:40
3. How are you selling this very broad service offering 4:30
4. What are the implications of real time applications 6:10
5. Why has it been easy to sell PubNub services 11:20
6. Who are you selling to? Who is your customer? 13:20
7. Are your customers mostly new products or existing products 14:30
8. How are social television apps using PubNub? 16:25
9. What happened with Loyalize 18:40
10. Why sell Loyalize to Viggle? 20:30
11. Why you shouldn’t say no to an acquisition conversation 23:35
12. How did you balance between the two companies? 25:45
13. Was the version of PubNub you re-joined different than the one your started 4 years back? 28:40
14. What is your vision for PubNub – will you become a consumer brand? 30:35
15. Where did the name come from? 32:40
16. How did you manage raising money for PubNub at the same time selling Loyalize? 33:50
17. How much activity flows through PubNub 34:45
18. How do you not get into other businesses and remain true to your vision? 38:30
19. Why should companies look at PubNub to bring real-time computing into their applications 39:40
20. What should app developers focus on? Stagent case study 44:20
21. Does this limit innovation or support it 46:25
22. How did you land your first customers 50:10
23. Is there anything you would have done differently with PubNub? 51:30

View all posts