Demo Github
En la parte anterior creamos nuestro proyecto y realizamos ciertas tareas.
Ahora nos falta crear nuestro componente de Vue 3 para mostrar el chat con los mensajes de los usuarios.
En esta segunda y última parte terminaremos con el tutorial Como Usar Socket IO con Vue 3 – Parte 2 (Final), vamos con ello.
Partes
- Parte 1
- Parte 2 (Final – GitHub)
Creación de Componente en Vue 3
Creamos el componente Chat.vue, tu le puedes poner el nombre que desees.
Lo creamos en src > components > Chat.vue:
/socket-io-vue-3
├── /node_modules
├── /public
├── /src
├── /assets
├── /components
├── Chat.vue // Creamos y abrimos este archivo
├── HelloWorld.vue
├── App.vue
├── main.js
├── socket.js
├── style.css
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.ts
Abrimos el archivo Chat.vue y comenzamos agregando lo siguiente en <template></template>:
<template>
<div id="app">
<h1>Como Usar Socket IO con Vue 3</h1>
<!-- Caja de texto del chat-->
<input class="form-control mb-2 mr-sm-2" type="text" v-model="message" @keyup.enter="enviarMensaje">
<!-- Botón para enviar el mensaje -->
<button class="btn btn-primary mb-2" @click="enviarMensaje">Enviar</button>
<!-- Contenedor del chat -->
<ul id="chat" class="list">
<!-- Acá se muestran los mensajes del chat -->
</ul>
</div>
</template>
En la sección de JavaScript importamos el cliente de Socket IO y la URL del servidor ejecutándose en el puerto 3000.
Y creamos el método enviarMensaje() que realiza el proceso de comunicación entre los usuarios del chat en tiempo real:
<script>
// Cliente de Socket IO
import io from 'socket.io-client';
// Ruta y puerto del servidor
const socket = io('http://localhost:3000');
export default {
data() {
return {
message: '', // Definimos 'message'
chat : document.getElementById('chat') // Seleccionamos el id del chat
};
},
methods: {
// Método para enviar los mensajes en el chat
enviarMensaje() {
// Verificamos que la caja de texto no este vacía y continuamos
if (this.message.trim() !== '') {
// Agregar el evento 'chat message' al socket
socket.emit('chat message', this.message);
// Limpiamos la caja de texto
this.message = '';
// Eliminar el evento 'chat message' del socket
socket.off('chat message');
// Agregar el evento 'chat message' al socket
socket.on('chat message', (msg) => {
console.log('Received message:', msg);
// Agregar mensajes de los usuarios al chat
const item = document.createElement("li");
item.classList.add("list-group-item");
item.textContent = msg;
chat.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
}
}
}
};
</script>
A continuación el código completo del archivo Chat.vue:
<template>
<div id="app">
<h1>Como Usar Socket IO con Vue 3</h1>
<!-- Caja de texto del chat-->
<input class="form-control mb-2 mr-sm-2" type="text" v-model="message" @keyup.enter="enviarMensaje">
<!-- Botón para enviar el mensaje -->
<button class="btn btn-primary mb-2" @click="enviarMensaje">Enviar</button>
<!-- Contenedor del chat -->
<ul id="chat" class="list">
<!-- Acá se muestran los mensajes del chat -->
</ul>
</div>
</template>
<script>
// Cliente de Socket IO
import io from 'socket.io-client';
// Ruta y puerto del servidor
const socket = io('http://localhost:3000');
export default {
data() {
return {
message: '', // Definimos 'message'
chat : document.getElementById('chat') // Seleccionamos el id del chat
};
},
methods: {
// Método para enviar los mensajes en el chat
enviarMensaje() {
// Verificamos que la caja de texto no este vacía y continuamos
if (this.message.trim() !== '') {
// Agregar el evento 'chat message' al socket
socket.emit('chat message', this.message);
// Limpiamos la caja de texto
this.message = '';
// Eliminar el evento 'chat message' del socket
socket.off('chat message');
// Agregar el evento 'chat message' al socket
socket.on('chat message', (msg) => {
console.log('Received message:', msg);
// Agregar mensajes de los usuarios al chat
const item = document.createElement("li");
item.classList.add("list-group-item");
item.textContent = msg;
chat.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
}
}
}
};
</script>
Por ultimo abrimos el archivo App.vue y eliminamos todo su contenido.
Y le agregamos lo siguiente, esencialmente llamamo a nuestro componente Chat:
<script setup> // Importamos el componente Chat import Chat from './components/Chat.vue' </script> <template> <!-- Usamos el componente Chat --> <Chat /> </template> <style scoped> /* */ </style>
Ahora debes abrir 2 consolas o terminales de comando:
Una abrela en el directorio principal del proyecto:
/socket-io-vue-3 // Abre una terminal aquí
├── /node_modules
├── /public
├── /src
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.ts
Ejecuta el siguiente comando para iniciar el servidor de desarrollo de Vite JS:
npm run dev > socket-io-vue-3@0.0.0 dev > vite VITE v5.2.11 ready in 376 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose
Y la otra consola o terminal de comandos abrela en el directorio src, en donde se encuentra el archivo socket.js:
/socket-io-vue-3
├── /node_modules
├── /public
├── /src // Abre aquí la otra terminal
├── /assets
├── /components
├── App.vue
├── main.js
├── socket.js
├── style.css
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.ts
Ejecuta el siguiente comando para iniciar el servidor de express:
node socket.js Servidor funcionando en el puerto 3000 Usuario conectado Usuario conectado
Si abres 2 o más ventanas en la ruta local http://localhost:5173/, puedes ver que ambos cliente se comunican en tiempo real:
Al inicio de esta parte del tutorial he colocado una demo y un enlace a un repositorio de GitHub en donde puedes encontrar todo el código del proyecto.
Así es como puedes Usar Socket IO con Vue 3.
Conclusión
En este tutorial has aprendido a Como Usar Socket IO con Vue 3.
Te dará una idea sobre como integrar estas tecnologías.
Conforme practiques lograrás dominarlas.
Nota(s)
- 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.