Build a Vue Component to send a message to specific users using Socket.io
Building on the previous lesson this lesson will build a Vue component for composing a message to send to a specific user or group of users.
The lesson will not use HTTP for communication between Server and Client and Client to Server but instead use Socket.io to demonstrate bi-directional real time communication.
Once the payload has been received at the server the targeted User or Group will be identified and Socket.io will then emit the payload to them. The clients will then use the previous lessons PopupMessage component to display the message.
Instructor: [00:00] In this lesson, we're going to create a new Vue component, which will allow you to create a message and send it via the Socket server, either to an individual or to groups of people. The important thing to note, we are using the socket to send and receive information in real time. There's no HTTP traffic involved.
[00:18] To be able to send a message to a targeted user or group, the first thing we're going to do is update the io.js file in our server. We're going to listen for a new event on the socket, and we're going to call this sendMessage.
[00:34] We need to determine who the message is for, which could either be an individual or it could be a group. We check on the data that have been sent over the socket to see if we have a name. If we do have a name, we will extract the user from our map, using the username as the key.
[00:54] We now can have a handle on the actual socket ID which we need to target, as this is part of our user object. If we don't have a name, then we know the recipient is going to be a group. What we're going to do now is reuse a custom event that we used previously to send information to the client.
[01:14] We're going to output to the console first, just so that we know what's going on. We use the global IO object. We use the to method, and it'll be our recipient. If it's a user, it will be a socket ID, and if it's a group, it will be a group name.
[01:31] Then we use the emit method, passing it the custom event name, which is popup_notification. We just pass through the data object, which we've been given to us previously. That's it for the server side. We can now look at the Vue component.
[01:48] I'm going to create a new component called composeMessage, and it's going to be used to send messages to either users or groups. Starting with adding a template block, we then copy in some markup from the clipboard I prepared earlier.
[02:03] Here, we have a select for selecting the usernames, another one for selecting groups. We have a text area for entering the message we want to send, and we also have a select for selecting the color of the message that will be displayed.
[02:20] We have a sendMessage function which we'll write in a second, and we can call the same whether parameter to indicate whether we're sending it to a group or a user. Let's now add our script block.
[02:34] I'm going to start with the data block. These will add our reactive properties. We're going to set the message we're going to send to a default to be a blank screen initially. I'm also going to define our groups.
[02:51] These will be selected from the select. We're also going to define a list of names. These are the individual users that may potentially log in. We define an array of colors, and these colors match Vuetify CSS names. They will change the color of the popup message.
[03:12] Our initial name will be blank, as will our group, and our default color will be red. We now need to add our methods. We actually only need one method for this. We're going to call it sendMessage, and we're going to reuse this method, depending on whether we send it to a user or a group.
[03:33] By default, we're going to say sendToGroup equals false. Then we're going to create a new object called message_data, and this will be the payload that we're going to be sending via the socket to the server.
[03:47] If sendToGroup is true, we're going to set a new property called group on our object. We'll bind this to the group that's been selected in the Vue component. Else, we're going to create a new property called name. Yes, you guessed it, we're going to bind this to the selected name from the Vue component.
[04:05] We also set the color property, which comes from the Vue component, and the message that we're actually going to send. Finally, we use the $socket object, which is available to us because we installed the vue-socket plugin.
[04:21] We emit a custom event called send_message, along with the message_data object as its payload. This then will be received on our Socket server. We're now going to update the app.vue file to include our new composeMessage component.
[04:39] The first thing we're going to do is import it. Then we're going to include it within our components block. You'll notice that the popupMessage component is here as well. This is what we'll be using to display the message.
[05:02] Finally, we're going to include the composeMessage component within our actual Vuetify layout. Let's have a look and see what it looks like. Using the npm run serv, we can start our Vue development server.
[05:20] Here, we have our browser open and the left-hand side, userProfile, was our original userProfile component from the previous lesson. On the right-hand side, we have our new composeMessage component to send the message.
[05:35] I've updated and selected myself as Judy Mason. I'm now going to send a test message, in effect, to myself. I'm going to make sure I'm going to select a black one to start with. Let's send the message, and up pops the notification at the top.
[05:51] We change the color, and we're going to change the message. We send the message again, and again, the snackBar component has displayed the message. We now have three browsers open. It's a bit crowded.
[06:05] I'm going to change this particular browser screen to John Adams, and it's going to be a member of the alpha group. This browser down here, we're going to set that person to be Amy Smith.
[06:17] Again, alpha group and update that userProfile. Finally, what we're going to do is send a message to everyone in the alpha group.
[06:30] There, we can see the snackBar messages appeared to everyone in the alpha group at the same time. I'm now going to send a message directly to Amy, so only Amy should get this message. The snackBar has appeared just for Amy.
[06:45] We're going to do that again. Change the color, and the snackBar has appeared again. For reference, here is the Socket server console, and we can see where various users are connected, a user's been updated, and then where a popup notification has been triggered.
[07:08] Where the popup notification is for alpha, that's a group. Where it's for the socket ID, that's an individual user.