PubNub Messenger: A Simple Chat Room (Part 1 of 3)


Published on

This is the first of a three-part series explaining how to build a multi-user messaging application using jQuery Mobile and PubNub. In this post, we’re going to cover:

Setting up jQuery Mobile and PubNub with a web page
Creating a basic chat room layout
Getting communication to and from a single chat room

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

PubNub Messenger: A Simple Chat Room (Part 1 of 3)

  1. 1. PubNubMessenger:A Simple ChatRoomby Dan Ristic
  2. 2. This is the first of a three-part series explaining how to build a multi-user messaging application usingjQuery Mobile and PubNub. You can read the series overview here.Trying to plan out and begin building a multi user application can be a pretty tall order but in this partwe are going to throw caution to the wind and jump right in. In this post, we‟re going to cover:1. Setting up jQuery Mobile and PubNub with a web page2. Creating a basic chat room layout3. Getting communication to and from a single chat roomThis post will assume that you have a basic knowledge of JavaScript and HTML.
  3. 3. Installing the LibrariesThe first thing you have to do is set up a single HTML page with jQuery Mobile and PubNub installed. I highlyrecommend using the CDN versions for both libraries. This will make download times faster and also scale to millions ofusers without having to deal with any servers (no need to use any back-end). I also created two files, screen.css andmessenger.js, and included them in my page. You can see the <head> section here:<head><title>PubNub Messenger</title><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon href=icon.png"><link rel="apple-touch-startup-image href=startup.png"><link rel="icon" type="image/png" href="favicon.png"><link href=",400,700,400italic" rel="stylesheet" type="text/css"><link rel="stylesheet" href="" /><link rel="stylesheet" href="css/screen.css" type="text/stylesheet" /><script src=""></script><script src=""></script><script src=""></script><script src="js/messenger.js"></script></head>
  4. 4. Creating the PageNow we just need something pretty for the user to look at. Luckily with jQuery Mobile, this is fairly easy to do. Thepackage already comes with several themes built in and allows you to create a page using basic components which isgreat for building a mobile user interface quickly. Our chat room page will have a list of messages, a send button, and atext box to type in. The code to set this up looks like this:<!-- Chat Page --><div data-role="page" id="chatPage" data-theme="c" class="type-interior"><div data-role="content"><div data-role="header" data-position="fixed" data-tap-toggle="false"><h1>Pub Messenger</h1></div><!-- /header --><div data-role="content"><ul data-role="listview" id="messageList"><!-- <li><span class="username">User123:</span>This is my message.</li> --></ul></div><div data-role="footer" data-theme="c"><textarea id="messageContent"></textarea><div class="ui-grid-a"><div class="ui-block-a"><a href="#" id="sendMessageButton" data-role="button">Send Message</a></div><div class="ui-block-b"><a href="#" id="backButton" data-rel="back" data-role="button">Chat Rooms</a></div></div></div></div><!-- /content --></div><!-- /page -->
  5. 5. This page, although with some small styling issues, should suffice for the purposes of this part of thetutorial. In another part of this series, I will talk more about how to get the layout to play nicely and be alittle more responsive. Also ignored in this part is a “chat rooms” button that will take the user back tothe list of saved chat rooms.One of the best parts of this user interface is that it is completely cross platform. It works on majordesktop browsers and most mobile phones. At PubNub, we look for this kind of out-of-the-box crossplatform functionality not only in our personal framework, but also the third party ones we utilize.Making Magic HappenTime for the final step: Making the magic happen. This is done by hooking up our PubNub API to ourchat interface using JavaScript. Our users will then be able to send messages to a channel and listenfor messages from other users.See the next slide for the code to set this up:
  6. 6. $(document).ready(function () {// Initialize the PubNub API connection.var pubnub = PUBNUB.init({publish_key: demo,subscribe_key: demo});// Grab references for all of our elements.var messageContent = $(#messageContent),sendMessageButton = $(#sendMessageButton),messageList = $(#messageList);// Handles all the messages coming in from pubnub.subscribe.function handleMessage(message) {var messageEl = $("<li class=message>"+ "<span class=username>" + message.username + ": </span>"+ message.text+ "</li>");messageList.append(messageEl);messageList.listview(refresh);// Scroll to bottom of page$("html, body").animate({ scrollTop: $(document).height() - $(window).height() },slow);};// Compose and send a message when the user clicks our send message (event) {var message = messageContent.val();if (message != ) {pubnub.publish({channel: chat,message: {username: test,text: message}});messageContent.val("");}});// Also send a message when the user hits the enter button in the text area.messageContent.bind(keydown, function (event) {if((event.keyCode || event.charCode) !== 13) return true;;return false;});// Subscribe to messages coming in from the channel.pubnub.subscribe({channel: chat,message: handleMessage});});
  7. 7. If you have used the PubNub API before, some of this should look pretty familiar. If this is your firstPubNub project you can do a quick review of our JavaScript Beginners Tutorial. To communicate withPubNub servers, you need to give the user access using a publish and/or a subscribe key. Be sure toreplace the `demo` keys with your own when testing this out so you can track the data back in ourPubNub administration panel.After that, we use jQuery to grab references to some of our interface elements on the screen.Personally I don‟t believe this is a scalable approach to JavaScript development, but for pedagogicalreasons this was easier.The handle message function is what gets called when PubNub gets a real-time message fromanother user in the channel. It creates a list item element, inserts the message and username, andrefreshes the list view which adds all of jQuery Mobile‟s fancy list interface and touch capabilities. Wecan even throw in a scrolling animation for flavor.
  8. 8. Now we get to the message sending. All we do here is read themessage the user wrote and make sure they actually typedsomething, then call publish with PubNub. This is all you have to doand our message is shooting across the internet at light speed(depending your ISP).Finally we wrap it up by telling PubNub to call handleMessage whenwe get a message from the chat channel . I also threw in a handler sothe user can hit enter instead of clicking on send message. As anapplication developer, I cannot stress how important it is to throw inshortcuts for your users. Every user has their own way of working(think „terminal guru‟ vs. „grandma‟) and it is important to be usable foryour entire audience.That is pretty much it for part one. We setup a simple chat programusing PubNub and jQuery Mobile which allows all our users to chattogether in one room. If you believe that one room isn‟t enough, thenbe sure to check out the upcoming Part 2 of this series where we willexpand on the messenger for multiple chat rooms and more.