Adding Usernames in a Chatroom Tutorial – MemeWarz #2

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:

• Part One: Series Overview and Building a Multiplayer Game Lobby
• Part Three: Getting a List of Online Users
• Part Four: Random Matchmaking of Users
• Part Five: Skill-based Matchmaking of Users
• Part Six: Matchmaking Algorithm: Enabling Users to Challenge Other Players
• Part Seven: Create Chatrooms and Multiple Channels On Demand Tutorial
• Part Eight: Preparing for Private Chatrooms and Refactoring via Private Channels
• Part Nine: Creating Private Chat Requests with Popup Alerts
• Part Ten: JavaScript Private Chat API with Access Control

This blog post is Part Two of PubNub Developer Evangelist Ian Jennings‘s series on creating a multiplayer game with JavaScript.

Generate Random Chatroom Usernames

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 blue_buffalo or purple_hippopotamus.

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.

Who am I?

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 me.

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.

Sending My Username to Chat

Now, when we send a message to chat, we’ll also include the value of me in addition to the $input.val().

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!

Chatroom with Usernames Demo

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 PubNub 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