Name: Handle Client and Server disconnects using Socket.io
Uploaded: 2019-05-12T10:58:08-05:00
Description: In this lesson learn how to track when a client disconnects from the server as well as update our previous Vue component to display a message if the server disconnects.

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 learn how to track when a client disconnects from the server as well as update our previous Vue component to display a message if the server disconnects.

Instructor: [00:00] To deal with a client disconnecting, we'll go into our socket server and open our io.js file. This will be where a client has actually closed their browser and therefore the socket has disconnected.

[00:14] We're going to listen for an inbuilt event, specifically on the socket, called disconnect.

[00:23] We're then going to use our IDs map to get hold of the user data, based on the passed in socket ID. If we have some user data, we're just going to log it out to the console for now and we'll actually output the user name.

[00:39] It could be quite useful to know which user has closed their browser. You could even use the socket server to broadcast all the ever connected clients, the fact that that user has not closed their browser.

[00:50] On the client side, it might be useful to know when the socket server is connected. To demonstrate that, we're going to modify our pop-up message view component.

[01:00] Within the sockets block, we can now add the standard disconnect event. When the server disconnects, we're actually going to display our pop-up message. We'll also set a notifications text to warn the user the fact the server is no longer available.

[01:17] We'll set the color to be red. We'll set the snackbar property to true to display it. Let's now see it in action.

[01:28] Here, we have four connected clients. They've each got their own individual socket ID. My socket server is running. It shows them as connected.

[01:36] If I just bring the server out of the way a second and if I actually close the server, we get the error message being displayed using our snackbar component. It seems to work fine.

Handle Client and Server disconnects using Socket.io

Share this video with your friends

Course

Vue and Socket.io for Real-Time Communication