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 our previous blog post, we built a multiplayer game lobby with a basic chatroom. However, we couldn’t see who was actually sending each message in the chatroom and all users in the chatroom were anonymous.
In this blog post we’ll change that. We’ll walk you through differentiating messages from different users by adding users and usernames to our chatroom. We’re going to continue working with the same code from the previous part.
We’ve now covered both building a multiplayer game lobby with a chatroom and the different ways we can use matchmaking to connect two different users. Here’s what we’ve covered so far:
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:
First, we’ll create a function to generate a random user names. This combines random values from an array of animals and colors to create a name like
This code works by multiplying
Math.random, a random floating-point number, by the length of the array. This gives us a random index to pick out from the array.
NOTE: The Math.random() function returns a floating-point, pseudo-random number in the range [0, 1) that is, from 0 (inclusive) up to but not including 1 (exclusive), which you can then scale to your desired range.
The random number may be a fraction, so
Math.floor is used to round the result down. We can then use square bracket notation to access that value from the array.
Next, we’ll define a variable called
me and give it a value from the function we just defined.
We’re also going to add an alert at the top of the page to tells us what our own name is.
We’ll use a jQuery selector to fill in the
#whoami element with the value of
Now when we open the app in two different windows, each window has a different random name assigned to
me. It appears in the blue alert we created earlier.
Now, when we send a message to chat, we’ll also include the value of
me in addition to the
In order to fit in this extra data, we need to change the message payload from a string to an object. Rather than just sending the message text, we send an object containing a parameter called “uuid” with the value of our user name and a parameter called “text” with the value of our input.
The data that goes over the wire looks like this:
We name the parameter “uuid” because it is consistent with the PubNub library. UUID stands for “universally unique identifier” and is used specifically to identify clients within a distributed computing environment like we’re building right now.
On our subscribe call we call the message
data and parse it’s properties according to the schema we just defined.
We can add some really basic filtering to stylize messages that are our own. We’ll simply add a style called
.me when the UUID is equal to ours. This means we received a message from ourselves!
Check out the full example below or take a look at the chatroom demo with usernames on CodePen here. In our next installment, we’ll use Presence to list who’s online in the chatroom.
See the Pen Memewarz – The Concept of Me #2 by Ian Jennings (@ianjennings) on CodePen.5248
There are common underlying technologies for a dating app, and in this post, we’ll talk about the major technologies and designs...