wasgibt

Add Realtime Communication to your Mobile App with Trigger.io and PubNub

PubNub provides a cloud-hosted publish/subscribe messaging service with a wide range of powerful features and friendly API's, including a very cheerful JavaScript API - so it's a natural to combine it with Trigger.io's quick, powerful hybrid mobile dev.

We've put together a simple chatroom app to demonstrate, as follows:

1. Register for free at www.pubnub.com and get yourself a Publish key and a Subscribe key for your app.
2. Download the chat app at [github repo]
3. Take note of chat.html - simply an <ul> to display messages, <form> to capture messages and <script src="https://cdn.pubnub.com/pubnub-dev.js"></script> to access the PubNub Javascript libraries.
4. Open chat.js in your text editor of choice. Note the three simple steps indicated by the comments:
   • Instantiate PubNub:

   var wasgibt_demo = PUBNUB.init({
       publish_key: 'your-publish-key-here',
       subscribe_key: 'your-subscribe-key-here'
   });
   

   • Subscribe to your own custom demo channel. This allows your app to receive any messages on that channel, and here's where you can put your callback to display the messages appropriately. Note that there's a bit of faffing here to set the <li> element background colour according to whose message is being displayed:

   wasgibt_demo.subscribe({
     channel: 'demo_chat',
     callback: function(msg){
       var liElement = '<li>';
       if (msg.search(userName)) {
         liElement = '<li style="background:#eee">';
       }
       $('#messages').append($(liElement).text(msg));
     }
   });
   

   • In the code triggered by the form.submit, publish the input's content as a message to the demo channel:

   wasgibt_demo.publish({
       channel: 'demo_chat',
       message: msgString
     });
   

5. Profit!

https://trigger.io/

https://www.pubnub.com/