Good News! We've launched an all new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
In this tutorial, we're going to build on the simple chat app we built in our previous blog post by adding more functionality with chatroom features. We'll add in managing multiple chat rooms, showing users a history of previous messages, and show what users are in the room.
This is Part Two of our three part tutorial series on how to build a fully-featured JavaScript group chat application with jQuery Mobile and PubNub. Here are the other posts:
- In Action: JavaScript Chat App Demo
- Group Chat App Series Overview
- Part One: Building a simple JavaScript chat app
- Part Three: Appifying our project through PhoneGap, tweaking the responsive UI, and future improvements.
As a quick note, from here on out I will be showing fragments of the final source code that will not work by copy and pasting. This is in order to focus on the learning points and keep the code examples shorter. If you would like the fully working version please check out the final version of this demo at https://github.com/dristic/pub-messenger.
Joining Multiple Rooms
Our app would be complete if every person wanted to talk to everyone else using the app at the same time in one giant chat room. Unfortunately for us people always want more features. The first feature we will add is the ability to join 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. This will keep everything running in a single page meaning we can build on top of all the previous part’s code. The UI for this page is pretty simple. It includes a list view, an input box, and a button which are all native jQuery Mobile components.
Now we use some simple JavaScript to display a list of subscriptions when the user navigates to this page. The list is stored as an array of strings globally throughout the application. In the final version I decided to use localStorage to keep the state of this array between application uses. This even works on mobile devices for some quick and easy device side storage and still keeps our app cross platform.
The other HTML5 goodness I am using is the data- attributes on each link to keep the channel name. This allows me to pass data between my views without doing too much work. I can simply navigate to the chat room view and check 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 navigates to the chat room view. Also do not forget to create a back button on the chat room view as well as handle coming from the link versus the new room button. I also make sure to unsubscribe from the channel when going back to the chat room list view.
Message Persistence
Another great feature we can add is seeing a history of recent messages when the user enters a chat room. PubNub has an additional feature for history called Storage & Playback that allows you to get a number of previous messages sent in any channel. The call easily integrates with our current app by looping through the list of previous messages and then sending them through our message handler as if we just got a message from subscribe.
Presence for User Detection
The final feature we want to add is a user list for seeing who is currently chatting in the room we are in. Our strategy for this is going to be using a combination of unique ids and presence from our PubNub API to handle all the back end work for us using PubNub Presence.
The idea for the user interface would be a two column layout that hides the user list on mobile phones. This came from the jQuery Mobile documentation site which has a left column navigation on larger screens and a collapsed version on smaller ones. This will also stay in line with the idea of being cross platform and being able to build to multiple devices at once. I used parts of the extra bit of css found here.
https://demos.jquerymobile.com/1.2.0/docs/_assets/css/jqm-docs.css on the jQuery mobile documentation that allows for a content-primary and content-secondary areas which handle most of this for us. From there it was a lot of tweaking to get the final version that exists in the Github repository. Here is the updated html for the chat page:
Surprisingly the hardest part was actually getting the user interface to be responsive. Actually wiring this up with JavaScript was delightfully simple. First off I created a home page with an input box which allows the user to input a chat room name. I then capture this and add send this as the UUID with the PubNub connection like so:
Now we add a presence listening function in the subscribe call. This will get fired every time a user in the same channel does an action such as joining the channel or leaving. Since all we care about for now is joining or leaving we check and see what the message action is and either remove or add the username from our user list UI. PubNub takes 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 features including joining different chat rooms, seeing chat history, and seeing what other users are currently chatting. I will wrap 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.
Get Started
Sign up for free and use PubNub to power real-time chat features
