Como Usar Socket IO con Vue 3 – Parte 1

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

  • Parte 1
  • Parte 2 (Final – GitHub)
Usando Socket IO y Vue 3
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:

npm create vite@latest

> npx
> create-vite

? Project name: » vite-projectsocket-io-vue-3
√ Project name: ... socket-io-vue-3

En framework elegimos Vue:

 Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
√ Select a framework: » Vue

En variante elijo JavaScript:

Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   JavaScript
    Customize with create-vue ↗
    Nuxt ↗
√ Select a variant: » JavaScript

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

# Ingresamos al directorio del proyecto
cd wordpress-jamstack 

# Instalamos sus dependencias que trae consigo 
npm install 

# Iniciamos el servidor de desarrollo de Vue 
npm run dev 

vue-proyecto@0.0.0 dev
> vite

Forced re-optimization of dependencies

  VITE v4.3.3  ready in 380 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

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

Servidor de Vite JS funcionando sin problemas
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:

/socket-io-vue-3 
    ├── /node_modules 
    ├── /public
    ├── /src
    ├── .eslintrc.cjs
    ├── .gitignore 
    ├── index.html      
    ├── package.json 
    ├── README.md
    ├── vite.config.ts

Ahora pasemos a integrar Socket IO en Vue 3.

Instalación de Dependencias

Para este proyecto tenemos que instalar las siguientes dependencias:

# Express
npm i express -d

# Socket IO 
$ npm i socket.io -d 

# Cliente de Socket IO
npm i socket.io-client -d

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:

"dependencies": {
    "express": "^4.19.2",
    "socket.io": "^4.7.5",
    "socket.io-client": "^4.7.5",
    "vue": "^3.4.21"
},

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:

/socket-io-vue-3 
    ├── /node_modules 
    ├── /public
    ├── /src
        ├── /assets 
        ├── /components 
        ├── App.vue 
        ├── main.js 
        ├── socket.js // Creamos y abrimos este archivo 
        ├── style.css 
    ├── .eslintrc.cjs
    ├── .gitignore 
    ├── index.html      
    ├── package.json 
    ├── README.md
    ├── vite.config.ts

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

// Soporte para require como module
import { createRequire } from "module";
const require = createRequire(import.meta.url);

Instanciamos Express JS para nuestro servidor:

// Importamos express para crear un servidor 
import express from "express";
const app = express();
const http = require('http');
const server = http.createServer(app);

Le pasamos Socket IO al servidor:

// Importamos socket.io al servidor
// Le configuramos CORS
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"]
  }
});

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:

// Escuchamos el evento connection
io.on('connection', (socket) => {
  
  console.log('Usuario conectado');
  
  // Escuchamos el evento disconnect
  socket.on('disconnect', () => {
    console.log('Usuario desconectado');    
  });

  // Escuchamos el evento chat message
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
    console.log(msg);   
  });   

});

Por ultimo iniciamos el servidor:

// Ejecutamos el servidor en el puerto 3000
server.listen(3000, () => {
  console.log('Servidor funcionando en el puerto 3000');
});

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

// Soporte para require como module
import { createRequire } from "module";
const require = createRequire(import.meta.url);

// Importamos express para crear un servidor 
import express from "express";
const app = express();
const http = require('http');
const server = http.createServer(app);

// Importamos socket.io al servidor
// Le configuramos CORS
const io = require('socket.io')(server, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"]
  }
});

// Escuchamos el evento connection
io.on('connection', (socket) => {
  
  console.log('Usuario conectado');
  
  // Escuchamos el evento disconnect
  socket.on('disconnect', () => {
    console.log('Usuario desconectado');    
  });

  // Escuchamos el evento chat message
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
    console.log(msg);   
  });   

});

// Iniciamos el servidor en el puerto 3000
server.listen(3000, () => {
  console.log('Servidor funcionando en el puerto 3000');
});

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)

  • En la siguiente parte y última terminaremos de crear nuestro proyecto.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

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