Building a Chatroom UI Tutorial

In 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:

• Part One: Set up a chat application and gave an overview of its architecture.
• Part Two: Built a key exchange system, enabling you to share public keys between users.
• Part Three: Walked you through how to send TLS encrypted chat messages.
• Part Four: How to send self destructing chat messages

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

• Part One: Set up a chat application and gave an overview of its architecture.
• Part Two: Built a key exchange system, enabling you to share public keys between users.
• Part Three: Walked you through how to send TLS encrypted chat messages.
• Part Four: How to send self destructing chat messages