Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Usar Socket IO con Vue 3 – Parte 1

Como Usar Socket IO con Vue 3 – Parte 2 (Final)

Como Usar Socket IO con Vue 3 – Parte 2 (Final)

Demo

Las aplicaciones en tiempo real permiten a los usuarios tener una interacción dinámica.

Cuando unes el framework Vue y la librería Socket.io, puedes lograr cosas increíbles.

En este tutorial aprenderás a Como Usar Socket IO con Vue 3, vamos con ello.

Partes

Las aplicaciones como un chat en tiempo real termina siendo reactiva gracias a Vue 3

Sigue los pasos tal cual te explico a continuación, para que todo salga bien.

Creación de Nuevo Proyecto

Para este tutorial crearé un chat en tiempo real.

Vamos a usar la herramienta Vite JS para crear el proyecto con Vue 3.

Para crear el proyecto ejecutamos el siguiente comando:


En framework elegimos Vue:


En variante elijo JavaScript:


Ingresamos al directorio que Vite JS ha creado para el proyecto, instalamos las dependencias e iniciamos el servidor de desarrollo de Vite JS:


Si vamos a la ruta local http://localhost:5173/ podemos ver que el proyecto se ha creado correctamente:

Con esto verificamos que el proyecto se ha creado correctamente

Vite JS nos ha creado un conjunto de directorios y archivos necesarios para que el proyecto funcione correctamente:


Ahora pasemos a integrar Socket IO en Vue 3.

Instalación de Dependencias

Para este proyecto tenemos que instalar las siguientes dependencias:


Le he pasado la opción o flag -d para que el nombre de cada dependencia se guarde en el archivo package.json

Exactamente en la sección dependencies:


Así tenemos un control sobre lo que instalamos.

Creación de Servidor con Express y Socket IO

Crea un archivo llamado socket.js en src > socket.js:


Abrimos el archivo sockets.js y empezamos agregando lo siguiente:


Instanciamos Express JS para nuestro servidor:


Le pasamos Socket IO al servidor:


Trabajamos esencialmente con 3 eventos.

Uno para cuando el usuario se conecte al chat.

Otro para cuando se desconecte del chat.

Y el evento para cuando los usuarios envían un mensaje:


Por ultimo iniciamos el servidor:


A continuación el código completo del archivo sockets.js:


Hasta aquí hemos creado el proyecto con Vue y le instalamos las dependencias necesarias.

Asimismo creamos el servidor y le hemos agregamos la detección de eventos vía Socket IO.

Ten Paciencia, lo que quiero es que entiendas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje.

Nota (s)

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil