Vue.js 2 Design Patterns and Best Practices

Determining connection status

Now that we've added the Vue-Socket.io plugin, we have access to a sockets object inside of our Vue instance. This allows us to listen to particular events as well as determine whether the user is connected or disconnected from the WebSocket.

Inside of App.vue, let's display a message on screen if we're connected/disconnected from the server:

<template>  <div>    <h1 v-if="isConnected">Connected to the server.</h1>    <h1 v-else>Disconnected from the server.</h1>  </div></template><script>export default {  data() {    return {      isConnected: false,    };  },  sockets: {    connect() {      this.isConnected = true;    },    disconnect() {      this.isConnected = false;    },  },};</script>

There shouldn't be much new here other than the sockets object. ...