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.
Contenido
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
// SOCKETS socket: { isConnected: false, message: '', reconnectError: false }, |
Incluir los eventos en el mutations
// 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
