We don't have access to the data (username and room name) that is inside join, but we do have access to one common thing, and that is the socket ID. We have access to the socket variable, socket.id, and we also have access to it inside our other event listeners. And this is going to be what we use inside of a data structure we're about to create. We're going to create an array of users where we can store this information, when we want to look up a user like we might want to do in createMessage and createLocationMessage. We'll simply pass the ID to some function, get back the name and the room name, and emit the event as we want.

Now in order to get that done, we are going to make a brand new file in utils. We're going to call this file users.js, and this is where we're going to store everything related to that user's data structure.

It's going to be an array of objects, and on each object, we're going to have the ID, which will be the socket ID, some sort of really long string:

[{
  id: '/#12hjwjhwfcydg',

}]

We'll also have our name. This is the display name for the user, mine might be Andrew; and finally the room the user joined, this could be something like The Office Fans:

[{
  id: '/#12hjwjhwfcydg',
  name: 'Andrew',
  room: 'The Office Fans'
}]

This is all the information we need to store in our data structure for a user to be able to wire everything up.

Now the real work is going to come inside the methods that we'll be creating to manipulate the array. We're going to have four methods:

• We want to be able to add a user via an addUser method; this is going to take three pieces of information, the ID, the name, and the room name.
• We're also going to want to have a method for removing a user when they leave a room; remember we want to update that People list in the left-hand sidebar in the chatroom. We're going to need a way to remove them as well as add them, removeUser, and we're going to be removing users by the socket ID.
• Next up, we're going to have a way to fetch a user, this is going to come in handy when we're trying to send a message like we do inside the createMessage listener. We're going to want access to the user's name as well as the room in order to fire off the newMessage event. That is going to happen via a getUser method, which is going to take an ID and it will return the object we have defined up above.
• The last one we're going to be adding is getUserList. The getUserList method is going to take the room name, figure out exactly which users are in that room, and return an array of names and will print those names to the client.

These four methods are all we need to get this done. Now there are a couple of ways we could do this. We might make an array called users, setting it equal to an empty array and then we might define our functions. We'll add var addUser and we'll set that equal to a function that takes id, name and room:

var users = [];

var addUser = (id, name, room) => {

}

Then inside the function, we'll do something like manipulate users array with users.push, pushing on some object. Then we'll export it using modules.export, exporting the addUser function as the addUsers property:

var users = [];

var addUser = (id, name, room) => {
  users.push({});
}

modules.export = {addUsers};

Then we would call addUser over in server.js. This approach works fine, but we're not going to be using this approach. Here, we have a users array and we can manipulate the array. It does get the job done but what we're going to do instead is use the ES6 class syntax. This is going to let us create a users class. We'll be able to make a new instance of that class and fire all of our methods, which we'll be defining.

I'm going to do this as opposed to creating ad hoc functions that all work with one piece of information. Now to get this done we are going to have to learn something new; we're going to be learning about ES6 classes.