Getting started with Express and Socket.io

Set up a simple Socket.io client to connect to the server.

Connect a Vue.js Component to a Socket.io server

Display a broadcast message using a Vuetify snackbar component which is sent via Socket.io

Mapping a Socket.io id to a known User using an example Vue component.

Build a Vue Component to send a message to specific users using Socket.io

Handle Client and Server disconnects using Socket.io

Sending an Image from Express to a Vue Component using Socket.io

Building an acknowledgement function to a Vue Socket.io emit method

Vue and Socket.io for Real-Time Communication

Often we need to send data to specific users or groups of users using Socket.io, but by default Socket.io only provides a unique volatile ID so this lesson will demonstrate how we can map on the Server a known User with that Socket ID.

The lesson will build a new Vue component which will allow a User to select their name and group and then send this information from the client to the server using the Socket.

This lesson will also use SessionStorage to store this information so if the browser is refreshed then the component will be auto populated and the details sent to the server.

Instructor: [00:00] By default, Socket.IO will give each user a unique identifier, as you can see here with the four connected clients. That's OK if you wanted to broadcast a message to all the clients at the same time with the same message, but more often than not, you want to target either an individual user or groups of users.

[00:18] To handle this, we need to update our server code. We're going to update the io.js file, which we produced in a previous lesson. I'm going to maintain a new memory map of known users against the Socket.IO identifier.

[00:32] We'll have a map of users. In addition, we're going to have another map, which will be keyed on the ID. We do this for speed of looking up a user, either by the username or by the Socket ID. When the client connects to the socket server, you may not know who they are yet. You may need to wait until they log in, or some other method.

[00:55] What we need is a new custom event that's tied to this specific socket. This isn't a global event. This is unique to this connected client. We will use the socket.on method. We pass it a custom event name. In this case, we're going to have updateUser. The client is going to send us an object with a name property and a group property. To help us with debugging, I'm going to log that out the name.

[01:22] Now we can set our users map, and we're going to key on the name of the user. We're also going to include the socket ID, and then we'll use the REST syntax to populate the rest of the data properties.

[01:34] We're also now going to update the IDs map. Again, this is just for speed if we're looking up based on a socket ID.

[01:40] Finally, we're going to use an inbuilt Socket.IO method called join. This allows you to group individuals and therefore target them in one go for any messages. We're going to use the group name that's been sent from the client.

[01:53] Let's now look at the client side. Whipping up our Vue application, we're going to add a new component, and we're going to call this userProfile. Let's start with the template for this component.

[02:06] I have some template code I've already created in the clipboard, so I'll just paste that in. This component is going to be used to allow the user to define who they are. They're going to select their name and also what group they're a member of.

[02:19] Normally in your application, you'd already know who they are by the fact that they've logged in, but for our lesson, we're going to be using this component to allow the user to say who they are. We've got a new method here called saveUserDetails. Let's build out the script area.

[02:35] Let's start with our data block. We're going to have a hard-coded list of groups that the user can select from. To make things slightly easier, we're also going to have a hard-coded list of names that they will select from.

[02:48] We'll set the default name value to be blank, the default selected group to be blank. We're also going to show the current socket ID. Let me add export default before I forget.

[03:01] Now we want to add the methods for our component. There are three methods we want to use. The first one is going to be sending the user details to our socket server. We're going to be sending an object called user_data. The name is going to be coming from our data, as will the group.

[03:23] We now need to get the data to our socket server. We're going to use something called $socket. This is available to us because we installed the Vue-Socket package. It has a method called emit. We're going to use the same custom event name that we defined on our socket server, and it's going to be called update-user. Its payload is going to be the object.

[03:48] The next two methods are used to store in the local session storage what's the username and group the user selected. This means if the browser is refreshed, they don't have to reselect. I'm going to start with a method called saveUserDetails. We'll be using the session storage. If the browser is closed, this information will be lost.

[04:11] The last thing to do is call our sendUserDetails function. The sequence of events will be save it then send it.

[04:20] The last method will be called when the socket is first connected to the server and we check to see if we have any name and group within our session storage. We're going to call this one readLocalUser, and we're just going to set the data properties for many values stored in the local session storage. If we have any values, we're going to then send them to the server.

[04:44] We're now going to include the sockets block, which is given to us by the Vue-Socket package. We're going to be listening for the inbuilt standard event connect. This means we are connected to our socket server, and we can then send on our data the socket ID, which we can then display.

[05:04] This is available to us from the $socket object. At the same time, once we're connected, we can then read the local user if we have any values, which then in turn we'll send back to the socket server the selected user.

[05:19] To be able to test this component, we now need to just wire it up into our app.vue file. If we go in there, we import it first, add a reference inside our component's block, and add the component within our layout container.

[05:37] We can go ahead and test this component now. To test this component, we're going to use the Vue CLI development server. We say npm run server.

[05:52] I have my Express socket server on the right-hand side -- it's not running yet -- and an open browser. I'm going to go to my Vue development server, which is localhost:8080. My new component now is displayed.

[06:06] There is no socket displayed yet, but if I start my socket server, the connective end fires, we get given an ID, which appears here, and is now updated on the socket server itself. If I select a person and a group, click update, the socket event fires, and now the socket ID is associated with John Adams.

[06:28] If I refresh my browser, the local session storage has been used to pick up my user profile information, has been reset on the component, and then sent to the server with the updated information. Within the development tools under session storage, we can now see our group and our name being set.

[06:51] To summarize, we have a Vue component with a method that's using the $socket objects with an emit method, calling a custom event called update_user with a payload of an object, which is containing a name and a group.

[07:09] Within the socket server, within our IO file, we listen for the update_user custom event on that specific subject. We get passed an object which contains a name, and the ID, and some other information, and we set it on a map called users and IDs.

[07:30] Going back to the Vue component, we save the user details into session storage and then when the actual Vue component is launched and connected, we attempt to read those values back into the component in case the browser is refreshed.

Course

Vue and Socket.io for Real-Time Communication

Mapping a Socket.io id to a known User using an example Vue component.

Share this video with your friends