Como Usar Socket IO con Vue 3 – Parte 1

4 minuto(s)

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

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

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

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

# 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

Aprende a Como Cambiar el Puerto de Vite JS.

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

/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

# 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"
},

"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

/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);

// 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);

// 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"]
  }
});

// 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);   
  });   

});

// 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');
});

// 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');
});