Empezando con Vuejs 2, Vuex y Socket.IO

Empezando con Vuejs 2, Vuex y Socket.IO
En este tutorial vamos a ver cómo desarrollar nuestra primera aplicación utilizando Vuejs 2, Vuex y Socket.IO, la idea es desarrollar un sencillo contador y que cada vez que un cliente lo incremente o decremente se notifique a todos los usuarios.

Para conseguir este propósito vamos a utilizar Vue-Socket.io, un plugin para Vuejs 2 que se adapta de fábula a Vuex, así que es la mejor opción.

Socket.IO con NodeJS

Para poder conectar con Socket.IO en un servidor vamos a utilizar NodeJS junto con Express, para ello simplemente debemos crear una aplicación con Express Generator, así que vamos primero a instalarlo con npm de forma global y de paso creamos nuestra aplicación.

Ahora vamos a instalar Socket.IO 2 con el siguiente comando.

Ya lo tenemos todo instalado, lo único que tenemos que hacer es crear nuestro servidor utilizando Sockets, para ello simplemente debemos modificar el código del archivo app.js por el siguiente.

En este momento tenemos un servidor completamente funcional que estará escuchando por el puerto 5000 una vez lo pongamos en marcha, además, estará atento a los eventos increment y decrement que puedan ser emitidos por el cliente.

Para poner en marcha el servidor vamos a ejecutar el siguiente comando desde una terminal situados en nuestro proyecto.

Una vez el servidor reciba el evento increment o decrement éste emitirá a todos los clientes (io.sockets.emit) el evento COUNTER_INCREMENT o COUNTER_DECREMENT, así que aquí ya lo tenemos todo listo, podemos ir al cliente con Vuejs 2 y Vuex.

Vuejs 2, Vuex y Socket.IO

Vamos por faena, lo primero que debemos hacer es crear un proyecto nuevo utilizando Vue-cli, así que colócate en el directorio donde quieras crear tu app con Vuejs 2 y ejecuta el siguiente comando.

Instalar Vuex y Vue-Socket.io

Ahora accede a tu proyecto y vamos a instalar todas las dependencias que necesitaremos para desarrollar el ejemplo con el siguiente comando.

Con Vuex seremos capaces de mantener el estado de nuestra aplicación centralizado, con Vue-Socket.io podremos conectar nuestra app con Socket.IO, y más concretamente en este caso con Vuex, que es la gracia.

Módulo Counter conectado con Vuex y Socket.IO

Con la finalidad de separar al máximo la lógica de nuestra aplicación, vamos a generar un módulo con Vuex que representará nuestra aplicación de contador, así que vamos a crear el archivo src/modules/counterModule.js y añadimos el siguiente código.

Para poder ejecutar una mutación desde NodeJS ésta debe tener el prefijo SOCKET_, si revisas el código de Node verás que es sencillo hacer la relación.

  • io.sockets.emit(‘COUNTER_INCREMENT’, counter + 1): Emite un evento a todos los clientes y ejecuta la mutación SOCKET_COUNTER_INCREMENT.
  • io.sockets.emit(‘COUNTER_DECREMENT’, counter + 1): Emite un evento a todos los clientes y ejecuta la mutación SOCKET_COUNTER_DECREMENT.

Cuando cualquiera de las mutaciones sea ejecutada, al hacer uso en el servidor de Nodejs de io.sockets.emit, todos los clientes serán notificados y verán actualizados los datos de su app.

Si quieres emitir un evento al cliente que ha hecho la petición, simplemente deberías utilizar socket.emit(‘EVENTO’, {}).

Si quieres emitir un evento a todos los clientes excepto al que ha hecho la petición, simplemente deberías utilizar socket.broadcast.emit(‘EVENTO’, {}).

RootState en las acciones de Vuex

Dentro de las acciones de Vuex tenemos el contexto, que nosotros desestructuramos para acceder a commit, state y rootState.

Bien, pues rootState es el estado que generamos en nuestra tienda, por lo tanto, para acceder a estos datos desde nuestro módulo, es necesario acceder a través de rootState.

Allí es donde vamos a definir rootState.io, que será un objeto que contiene el socket que se ha conectado, y se va a definir cada vez que la página sea actualizada.

Mezclando todo en nuestra Store

Para combinar todo lo que hemos hecho hasta ahora, vamos a abrir el archivo src/main.js y vamos a modificarlo por el siguiente.

Importamos todo lo que vamos a necesitar, creamos la tienda (store), establecemos una mutación para establecer el socket actual, utilizamos el plugin VueSocketio y le pasamos la store, finalmente creamos nuestra app utilizando la store y haciendo uso del hook beforeCreate establecemos el nuevo socket, this.$socket es proporcionado por el plugin VueSocketio.

Ya tenemos nuestra app lista, sólo nos queda definir el componente counter y todo estará funcionando, así que crea el archivo src/components/Counter.vue y añade el siguiente código.

Eso es todo, espero que te haya parecido interesante y servido este tutorial sobre la integración de Vuejs 2, Vuex y Socket.IO.

Curso completo de Vuejs 2 y Vuex

¿Todavía no conoces Vuejs 2 y Vuex?, en cursosdesarrolloweb.es tienes un curso completo para aprender a trabajar con Vuejs 2 y Vuex utilizando las últimas versiones con ejemplos fáciles y útiles.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Nuevo Curso de Vuejs 2 Avanzado con Vuex y AdonisJs 4Acceder ahora
+ +