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.
Although ‘messaging’ has become increasingly popular among web applications, there have been issues with connectivity, a poor feature set, and compatibility with one platform. These are most likely due to the complexity of building a scalable backend that connects in real time to multiple clients. I set out to fix this with PubNub Messenger, a fully-featured JavaScript group chat app.
My task for this project was to create a well-featured and scalable group chat app that runs on Android, iOS, and Desktop in a few weeks work. No big deal, right?
In our three part series on building a multi-user messaging application, we’ll cover:
Part One: Building a simple chat room.
Part Two: Managing multiple rooms, showing users a history of previous messages, and showing what users are in the room.
Part Three: Appifying our project through PhoneGap, tweaking the responsive UI, and future improvements.
The tools I chose for this task were jQuery Mobile and the PubNub API. jQuery Mobile is an amazing frontend framework that allowed me to deliver my app to multiple devices without worrying about interface size or enabling touch. The PubNub API allowed me to cast my backend aside and build everything with just HTML and JavaScript. It handled real-time messaging between my users, scaling out to multiple regions, and load balancing across multiple servers. Here’s the final result and source code.
The Approach
The entire application consists of three files, one HTML file, one JavaScript file and one CSS file. Most of the frontend is built with jQuery Mobile components. In the end I had to add some CSS to get the user list working responsively and add some overall flair to the app. The app also uses jQuery Mobile’s page navigation. This allowed me to define all my pages in one file and then show and hide them using JavaScript. This might not scale if I kept adding more functionality, but it worked for the purposes of building this demo.
Building a Group Chat App with the JavaScript API
The rest of the group chat app is built on top of the PubNub JavaScript API. Each user is identified by a username that they enter at the beginning of the application. From there the user can enter any chat room designated by a chat room name and use the app to talk to everyone else in that room. The PubNub API also allowed me to get chat history for a given room so you can see what people have been talking about as well as PubNub Presence to tell the user who is currently in the room chatting.
Working on Mobile and Desktop
The final piece of the puzzle to get it working on iOS and Android was using PhoneGap. With PhoneGap, I could easily generate an Android and iOS app that runs a full screen web view to load the application in. As soon as the page loads, the frameworks take care of the rest. The best part of this that is the only mobile support I had to include was hiding the user list on smaller screens. Everything else was simply plug and play.
Overall, it was pretty straightforward to build. Instead of spending my time writing platform specific code or setup a single server, I was able to focus on adding great features to my application. This is how web development should be.
If you would like to build your own application like this, check out the group chat app source code on GitHub.
Get Started
Sign up for free and use PubNub to power real-time chat