Embed Size (px)
DESCRIPTION
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
Citation preview
PubNub Messenger:
A Simple Chat Room
by Dan Ristic
This is the first of a three-part series explaining how to build a multi-user messaging application using jQuery 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 part we 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 page
2. Creating a basic chat room layout
3. Getting communication to and from a single chat room
This post will assume that you have a basic knowledge of JavaScript and HTML.
Installing the Libraries
The first thing you have to do is set up a single HTML page with jQuery Mobile and PubNub installed. I highly recommend using the CDN versions for both libraries. This will make download times faster and also scale to millions of users without having to deal with any servers (no need to use any back-end). I also created two files, screen.css and messenger.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="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="css/screen.css" type="text/stylesheet" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script src="http://cdn.pubnub.com/pubnub-3.4.4.js"></script> <script src="js/messenger.js"></script></head>
Creating the Page
Now we just need something pretty for the user to look at. Luckily with jQuery Mobile, this is fairly easy to do. The package already comes with several themes built in and allows you to create a page using basic components which is great for building a mobile user interface quickly. Our chat room page will have a list of messages, a send button, and a text 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 -->
This page, although with some small styling issues, should suffice for the purposes of this part of the tutorial. In another part of this series, I will talk more about how to get the layout to play nicely and be a little more responsive. Also ignored in this part is a “chat rooms” button that will take the user back to the list of saved chat rooms.
One of the best parts of this user interface is that it is completely cross platform. It works on major desktop browsers and most mobile phones. At PubNub, we look for this kind of out-of-the-box cross platform functionality not only in our personal framework, but also the third party ones we utilize.
Making Magic Happen
Time for the final step: Making the magic happen. This is done by hooking up our PubNub API to our chat interface using JavaScript. Our users will then be able to send messages to a channel and listen for messages from other users.
See the next slide for the code to set this up:
$(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 button. sendMessageButton.click(function (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; sendMessageButton.click(); return false; });
// Subscribe to messages coming in from the channel. pubnub.subscribe({ channel: 'chat', message: handleMessage });});
If you have used the PubNub API before, some of this should look pretty familiar. If this is your first PubNub project you can do a quick review of our JavaScript Beginners Tutorial. To communicate with PubNub servers, you need to give the user access using a publish and/or a subscribe key. Be sure to replace the `demo` keys with your own when testing this out so you can track the data back in our PubNub 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 pedagogical reasons this was easier.
The handle message function is what gets called when PubNub gets a real-time message from another user in the channel. It creates a list item element, inserts the message and username, and refreshes the list view which adds all of jQuery Mobile’s fancy list interface and touch capabilities. We can even throw in a scrolling animation for flavor.
Now we get to the message sending. All we do here is read the message the user wrote and make sure they actually typed something, then call publish with PubNub. This is all you have to do and our message is shooting across the internet at light speed (depending your ISP).
Finally we wrap it up by telling PubNub to call handleMessage when we get a message from the chat channel . I also threw in a handler so the user can hit enter instead of clicking on send message. As an application developer, I cannot stress how important it is to throw in shortcuts for your users. Every user has their own way of working (think ‘terminal guru’ vs. ‘grandma’) and it is important to be usable for your entire audience.
That is pretty much it for part one. We setup a simple chat program using PubNub and jQuery Mobile which allows all our users to chat together in one room. If you believe that one room isn’t enough, then be sure to check out the upcoming Part 2 of this series where we will expand on the messenger for multiple chat rooms and more.
