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)
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:
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.