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

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:

<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>
<div data-role="content">
<ul data-role="listview" id="messageList">

</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>
</div>

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.

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

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

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