Free up to 1MM monthly messages. No credit card required.
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:
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!
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:
Explode.js gives you a quick and fun way to destruct messages in three easy steps by simply calling a function.
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.
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
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 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.
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
A Notice of Privacy Practices (NPP) is one of the requirements of HIPAA and helps patients understand their personal data rights.
HIPAA violations can be financially expensive and devastating to a brand. Examine some examples of HIPAA violations, and learn...
HIPAA covered entities must follow the five technical safeguards to achieve HIPAA compliance and prevent data corruption.