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

In this lesson we create a very simple web page to connect to our socket Server.

Once a client connects, it is assigned a unique random identifier as its socket ID and we will log this out to the Server console.

We will send out a random number on the socket every second and demonstrate multiple clients receiving this value at the same time.



Instructor: [00:00] We're going to get our socket.io code working with our client-side application. The first thing we need to do there is to update the service side. Always find it easy to do the service-side code first.

[00:12] Within our io logic file, I am going to add an event listener on the global socket.io objects. We're going to listen for when clients connect. The syntax is io -- as in the socket io objects -- on, and then the name of the event. In this case, it's connection, which is an inbuilt event name.

[00:32] This will pass us a socket. That socket object will have an ID, which we can then console out. Once we have the socket objects, we can then listen for other events, which are only specific for that client.

[00:47] In this case, I think we're going to listen also for when that client disconnects. Again, it's socket on event name disconnect. Again, we're going to log out, which particular socket has disconnected.

[01:02] That's it for our express server first instance. The next step is to get the client-side application built. For our simple client application, we're going to use the express server to host it. We'll create a new folder called public. Inside public, we'll create a new basic index.html file.

[01:23] We have pasted in a basic HTML markup. The next step is to reference the actual client-side library that socket.io provides. As mentioned previously, it's bundled with the package.

[01:35] The syntax we're referencing it is like this. This will actually be pulled from our express server. We now make a reference to the io object, which is available from this library, and that will trigger connection to the server.

[01:53] We can now start server up and test it. I started my server up. I got the date and time from the console login, just to make it a bit smaller. You can see it's running fine. I am now going to bring up the browser running on the 8500 port.

[02:08] As you can see, I am just going to bring across. As it starts up, we get the server indicating a user connected with our socket ID, so this code is working. If I do another one -- just put the URL on that -- we get a different socket ID, another client is connected.

[02:26] If I close this one, the user disconnected, so the event is fired on the socket itself.

[02:34] The first thing we want to demonstrate is a real-time push to all connected clients, that are all going to receive the same information at the same time. We're going to modify the service.js file and give it a reference to the initialized socket.io object.

[02:51] We start by making a reference to the io file, which contains our logic, and then we call our io function, which in turn returns the socket io object, which is being initialized in this line.

[03:04] What I am going to do is paste in a function called heartbeat. This is just going to generate a random number that's going to simulate a heartbeat or pulse. We're also going to log this out to the server console so that we can see the value that's then going to be sent to all the connected clients.

[03:22] Finally, we're going to use a standard JavaScript setInterval(). We want to do this because we're going to want to transmit or broadcast to all the connected clients every second a random number.

[03:37] Within our [inaudible] function, we're going to call useOurGlocalSocket, and we use the standard socket.io emit method, which is used to broadcast to all connected clients.

[03:50] We're going to have a custom event. We're going to call it Pulse. We're using uppercase just for convention. We call our heartbeat function. Finally, we're going to do that every second.

[04:02] The next step is to update our clients script so that we can listen for this custom Pulse event.

[04:10] We have our index.html file open. We are now just going to use our socket object. We'll use the on method that's provided to us. We're going to pass in the custom event name, which is Pulse.

[04:24] In this case, what we're going to do is hold to the value that's sent to us within that custom event and just log it out to the console. That's done. We can fire our server up and test it and see how it looks.

[04:39] I've got my terminal open. I am going to start my server with node server. We have two browsers already open and they're connected with two socket IDs. We have the heartbeat coming out from our server, which is the random number.

[04:53] If I open the two browser windows and bring them forward with that consoles, we can see that the heartbeat pulse is being console logged out and they are synchronized between the two clients and the server. That all seems to be working fine.

[05:08] In summary, the service starts, the client connects, and for each client that does connect, socket.io will return a socket object with a unique identifier.

[05:18] For the server to broadcast to all connected clients, we use the io.emit method. We use a custom event along with a value. On the client side, we listen for that event using the on method, and that gives us the value.

Course

Vue and Socket.io for Real-Time Communication

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

Share this video with your friends