En esta página:
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:
|
1 2 3 4 5 6 7 8 9 |
npm create vite@latest > npx > create-vite ? Project name: » vite-projectsocket-io-vue-3 √ Project name: ... socket-io-vue-3 |
En framework elegimos Vue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
1 2 3 4 5 6 7 8 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
# 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/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:
|
1 2 3 4 5 6 7 8 9 10 |
# 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:
|
1 2 3 4 5 6 7 8 |
"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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/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:
|
1 2 3 4 5 |
// Soporte para require como module import { createRequire } from "module"; const require = createRequire(import.meta.url); |
Instanciamos Express JS para nuestro servidor:
|
1 2 3 4 5 6 7 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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:
|
1 2 3 4 5 6 |
// 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// 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.