PubNub Messenger: !Room Management,History andPresence!by Dan Ristic
This is the second of a three-part series explaining how to build a multi-user messaging applicationusing jQuery Mobile an...
Joining Multiple RoomsOur app would be complete if every person wanted to talk to everyone else using the app at the same ...
Now we use some simple JavaScript to display a list of subscriptions when the user navigates to this page. The list isstor...
The other HTML5 goodness I am using is the data- attributes on each link to keep the channel name. This allows meto pass d...
HistoryAnother great feature we can add is seeing a history ofrecent messages when the user enters a chat room.PubNub has ...
PresenceThe final feature we want to add is a user list for seeing who iscurrently chatting in the room we are in. Our stra...
<div data-role="page" id="chatPage" data-theme="c" class="type-interior">		<div data-role="content">	<div class="content-p...
Surprisingly the hardest part was actually getting the user interface to be responsive. Actually wiring this up withJavaSc...
Now we add a presence listening function in the subscribe call. This will get fired every time a user in the samechannel do...
Upcoming SlideShare
Loading in …5
×

PubNub Messenger: Room Management, History, and Presence (Part 2 of 3)

2,842 views

Published on

Now that we have built a basic chat room it is time to give our users some more functionality. In part two of this series we will expand on part one by managing multiple rooms, showing users a history of previous messages, and showing what users are in the room.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,842
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

PubNub Messenger: Room Management, History, and Presence (Part 2 of 3)

  1. 1. PubNub Messenger: !Room Management,History andPresence!by Dan Ristic
  2. 2. This is the second of a three-part series explaining how to build a multi-user messaging applicationusing jQuery Mobile and PubNub. You can read the series overview here.Now that we have built a basic chat room it is time to give our users some more functionality. In parttwo of this series we will expand on part one by managing multiple rooms, showing users a history ofprevious messages, and showing what users are in the room.As a quick note, from here on out I will be showing fragments of the final source code that will notwork by copy and pasting. This is in order to focus on the learning points and keep the codeexamples shorter. If you would like the fully working version please check out the final version of thisdemo at https://github.com/dristic/pub-messenger.
  3. 3. Joining Multiple RoomsOur app would be complete if every person wanted to talk to everyone else using the app at the same time in onegiant chat room. Unfortunately for us people always want more features. The first feature we will add is the ability tojoin different chat rooms and keep a list of the ones that the user has joined.We will now have two pages to our app and use jQuery Mobile’s page navigation feature to switch between them. Thiswill keep everything running in a single page meaning we can build on top of all the previous part’s code. The UI forthis page is pretty simple. It includes a list view, an input box, and a button which are all native jQuery Mobilecomponents.<!-- Chat List Page --> <div data-role="page" id="chatListPage" data-theme="c" class="type-chat-list"> <div data-role="header"> <h1>Current Chats</h1> </div> <div data-role="content"> <input type="text" name="name" id="chatRoomName" placeholder="Chat Room Name" /> <a href="#" id="newChatButton" data-role="button">Join New Chat</a> <br /> <ul data-role="listview" data-split-icon="delete" data-split-theme="c" id="chatList"> <!-- <li><span class="username">User123:</span>This is my message.</li> --> </ul> </div> </div>
  4. 4. Now we use some simple JavaScript to display a list of subscriptions when the user navigates to this page. The list isstored as an array of strings globally throughout the application. In the final version I decided to use localStorage tokeep the state of this array between application uses. This even works on mobile devices for some quick and easydevice side storage and still keeps our app cross platform.var chatChannel = , chatRoomName = $(#chatRoomName), charListEl = $(#chatList), subscriptions = [], pages = { chatList: $("#chatListPage"), chat: $("#chatPage") }; function onChatListOpen () { chatListEl.empty(); for(var i = 0; i < subscriptions.length; i++) { var chatName = subscriptions[i], chatEl = $("<li><a href=#chatPage data-channel-name=" + chatName + ">" + chatName + "</a><a href=#delete data-rel=dialog data-channel-name=" + chatName + "></a></li>"); chatListEl.append(chatEl); chatListEl.listview(refresh); } newChatButton.off(click); newChatButton.click(function (event) { if(chatRoomName.val() !== ) { chatChannel = chatRoomName.val(); $.mobile.changePage(pages.chat); } }); };
  5. 5. The other HTML5 goodness I am using is the data- attributes on each link to keep the channel name. This allows meto pass data between my views without doing too much work. I can simply navigate to the chat room view andcheck for any data- attributes coming from the link source.The final few things here is creating a new chat button that accepts a room name from the input box and navigatesto the chat room view. Also do not forget to create a back button on the chat room view as well as handle comingfrom the link versus the new room button. I also make sure to unsubscribe from the channel when going back to thechat room list view.
  6. 6. HistoryAnother great feature we can add is seeing a history ofrecent messages when the user enters a chat room.PubNub has an additional feature for history that allowsyou to get a number of previous messages sent in anychannel. The call easily integrates with our current appby looping through the list of previous messages andthen sending them through our message handler as if wejust got a message from subscribe.pubnub.history({ channel: chatChannel, limit: 100 }, function (messages) { messages = messages[0]; messages = messages || []; for(var i = 0; i < messages.length; i++) { handleMessage(messages[i], false); } $(document).scrollTop($(document).height()); });
  7. 7. PresenceThe final feature we want to add is a user list for seeing who iscurrently chatting in the room we are in. Our strategy for this is goingto be using a combination of unique ids and presence from ourPubNub API to handle all the back end work for us.The idea for the user interface would be a two column layout that hidesthe user list on mobile phones. This came from the jQuery Mobiledocumentation site which has a left column navigation on largerscreens and a collapsed version on smaller ones. This will also stay inline with the idea of being cross platform and being able to build tomultiple devices at once. I used parts of the extra bit of css foundhere.http://jquerymobile.com/demos/1.2.0/docs/_assets/css/jqm-docs.csson the jQuery mobile documentation that allows for a content-primaryand content-secondary areas which handle most of this for us. Fromthere it was a lot of tweaking to get the final version that exists in theGithub repository. Here is the updated html for the chat page:
  8. 8. <div data-role="page" id="chatPage" data-theme="c" class="type-interior"> <div data-role="content"> <div class="content-primary"> <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> <div class="content-secondary"> <ul data-role="listview" id="userList" data-theme="c"> </ul> </div> </div><!-- /content --> </div><!-- /page --> Presence (cont.)
  9. 9. Surprisingly the hardest part was actually getting the user interface to be responsive. Actually wiring this up withJavaScript was delightfully simple. First off I created a home page with an input box which allows the user to input achat room name. I then capture this and add send this as the UUID with the PubNub connection like so:PUBNUB.init({ publish_key: demo, subscribe_key: demo, uuid: username // This is where the entered username goes. });
  10. 10. Now we add a presence listening function in the subscribe call. This will get fired every time a user in the samechannel does an action such as joining the channel or leaving. Since all we care about for now is joining or leaving wecheck and see what the message action is and either remove or add the username from our user list UI. PubNubtakes care of the rest!After all those juicy features we now come to the end of part two. We gave our demanding users some more featuresincluding joining different chat rooms, seeing chat history, and seeing what other users are currently chatting. I willwrap this up in Part 3 where I will explain how to package everything up with PhoneGap, tying up the responsive UI,and future thinking on scalability and performance.var users = [], userList = $("#userList"); pubnub.subscribe({ channel: chatChannel, message: handleMessage, // Our global handle message function presence: function(message, env, channel) { // This gets called on user leave / enter if (message.action == "join") { users.push(message.uuid); userList.append("<li data-username=" + message.uuid + ">" + message.uuid + "</li>"); } else if (message.action == "leave") { users.splice(users.indexOf(message.uuid), 1); userList.find([data-username=" + message.uuid + "]).remove(); } userList.listview(refresh); } });

×