Real-time Chat Blog

Building a Chatroom UI Tutorial

3 min read PubNub Staff on Aug 4, 2014
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

This blog post walks you through building a chatroom UI for self-destructing chat. However, the UI can be applied to any chatroom as well.

Good News

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.

Take me to the Chat Resource Center →

BabelIconIn this blog post, we’re going to build a self-destructing chatroom UI layer on top of our self-destructing messaging system. This is Part Five of our five part series. We’ve already gone through building the self-destructing messaging layer, so feel free to start at the beginning:

This is a five part series on building Babel, an open source chat widget and API built with PubNub. Babel allows you to send and receive self destructing, encrypted chat messages and exchange 1024-bit RSA public keys in a chatroom.

Check out the live working Babel self destructing chat demo. You can also take a look at the source code on our Babel Github Repository. Now, let’s get the tutorial started!


Step 1: Implementing explode.js for Exploding Messages

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

Like before, we have to import the PubNub JavaScript SDK and initialize PubNub. However, this time we’ll also import jQuery, to make manipulating the DOM easier, and explode.js for explosions.

Explode.js gives you a quick and fun way to destruct messages in three easy steps by simply calling a function.

Step 2: Setting Up Your HTML for Chatroom UI

The only HTML elements we’ll really need are an input field to enter a TTL, another input field to enter messages, and a div where we’ll print the messages we receive.

We’ll also need to subscribe to a PubNub channel and set a callback for messages we receive. For now, let’s just declare a function onMessage that we’ll initialize later. We also want a message to be published when a user presses the enter key in the message input. We can handle this with jQuery’s keypress method.

Step 3: Adding Custom Countdowns for Messages

Now, when we receive a message we have to do two things. First, we need to print the message and ttl into the messages div. We also need to continuously count down the ttl of each message, and eventually delete the messages once their ttl hits 0. We’ll bind both of these actions into onMessage.

Printing the message and ttl into the messages div is easy to do with jQuery. We can implement the countdown with the setInterval method, and we can delete our message with jQuery’s remove() method.

Step 4: Explosions

Unfortunately, jQuery’s remove() method provides a rather unsatisfactory end to our self-destructing message. Instead of exploding our message, it just disappears uneventfully.

Thus, I made explode.js specifically for this problem. explode.js does exactly what its name denotes, and it’s really simple to use. Below is code for a modified setInterval call that also explodes our message upon self-destruction.

Finished: JavaScript Self-Destructing Chat with Chatroom UI

Congratulations, you’ve just made your own EXPLODING, self-destructing messaging system with PubNub. Checkout this self-destructing chatroom UI demo JSFiddle that has a working demo of the code from this blog, along with a few more bells and whistles.

Additionally, check out the finished Babel demo here.

If you haven’t already, don’t forget to take a look at the other blog posts in this series

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff