Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Handle Client and Server disconnects using Socket.io

    Mark BartonMark Barton
    expressExpress
    vueVue.js
    ^2.5.21

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    We're going to listen for an inbuilt event, specifically on the socket, called disconnect.

    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.

    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.

    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.

    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.

    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.

    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.

    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.