Utilización de websockets con el paquete vue-native-websocket con Vuex

La comunicación por sockets permite la comunicación de dos puntos con una conexión fija y estable. Ambas partes envían información y escuchan al otro. Cuando desarrollamos una aplicación Vue podemos echar mano de algunos de los paquetes que nos ofrece npm, en mi caso estuve probando varios y al final me decante por vue-native-websocket que fue el que mejor garantía me dio sobretodo con el tema de la reconexión automática cuando se desconectaba. Tienes toda la información acerca del paquete vue-native-websocket en su página, yo te explicaré de forma concisa la instalación y la utilización con Vuex.

Instalar el paquete vue-native-websocket

Lo primero a realizar es la instalación del paquete. Puede ver más información acerca de la instalación, actualización y eliminación de dependencias npm.

npm install vue-native-websocket --save

Configurar main.js

A la hora de configurar el mail debes tener en cuenta la url que se le pasa cuando indicamos que usamos la dependencia debe ser un servicio websocket (ws://), además se le indica el store, el formato, si quieres reconexión y el tiempo para empezar la reconexión.

import VueNativeSock from 'vue-native-websocket';
Vue.use(VueNativeSock, ws://111.111.111.111/event_socket, {
  store: store,
  format: 'json',
  reconnection: true, // (Boolean) whether to reconnect automatically (false)
  //reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),
  reconnectionDelay: 3000 // (Number) how long to initially wait before attempting a new (1000)
});

Configurar el store de Vuex

En el store incluiremos las varibales globales que nos permitirán acceder al estado del socket.
// SOCKETS
    socket: {
      isConnected: false,
      message: '',
      reconnectError: false
    },

Incluir los eventos en el mutations

En el mutations.js o donde tengas las mutations del store, se colocan los eventos que se encargan de gestionar las conexiones con el socket. El importante es el ON_MESSAGE que es el que se encarga de escuchar, en nuestro caso el socket vendrá con un topic que determinará en un switch la llamada que hará.
// SOCKETS
  SOCKET_ONOPEN(state, event) {
    console.log('SOCKET_ONOPEN');
    Vue.prototype.$socket = event.currentTarget;
    state.socket.isConnected = true;
  },
 
  SOCKET_ONCLOSE(state, event) {
    console.log('SOCKET_ONCLOSE');
    state.socket.isConnected = false;
  },
 
  SOCKET_ONERROR(state, event) {
    console.log('SOCKET_ONERROR');
    console.error(state, event);
  },
 
  // default handler called for all methods
  SOCKET_ONMESSAGE(state, message) {
    console.log('SOCKET_ONMESSAGE');
 
      state.socket.message = message;
 
      switch (message.topic) {
        case 'AutoLogOut':
          this.dispatch('SOCKET_AutoLogout', message.payload);
          break;
        case 'Identification':
            this.dispatch('SOCKET_Identification', message.payload);
            break;
        default:
        //console.log('NO SE HA LOCALIZADO EVENTO');
 
      }
 
  },
 
  // mutations for reconnect methods
  SOCKET_RECONNECT(state, count) {
    console.log('SOCKET_RECONNECT');
  },
 
  SOCKET_RECONNECT_ERROR(state) {
    console.log('SOCKET_RECONNECT_ERROR');
    state.socket.reconnectError = true;
  },

¿Cómo hacer pruebas?

Puedes utilizar el plugin de Chrome Simple WebSocket Client

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *