Creación de un componente de chat en tiempo real
Lista de mensajes con v-for, vinculación del campo de entrada, emisión al enviar y desplazamiento al final cuando llega un mensaje
Creación de un componente de chat en tiempo real es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Objetivo: un cuadro de chat en tiempo real
Crearemos un componente de chat pequeño pero completo: muestra una lista desplazable de mensajes, permite que el usuario escriba y envíe mensajes, y añade los mensajes entrantes en tiempo real.
Esto reúne el estado reactivo, los hooks del ciclo de vida y el acceso al DOM.
La ref de mensajes
Almacene la conversación en un arreglo reactivo. Cada entrada es un objeto sencillo con un id, un autor y un texto.
import { ref } from "vue"
const messages = ref([
{ id: 1, user: "system", text: "Welcome to the room" },
])Una ref para la entrada
Vincule el cuadro de texto a una ref independiente con v-model. Esta ref contiene el mensaje que se está redactando antes de enviarlo.
// template:
// <input v-model="draft" @keyup.enter="sendMessage" />
const draft = ref("")Registrar el listener del socket
En onMounted, suscríbase a los mensajes entrantes y añada cada uno al arreglo. Usar onMounted garantiza que el componente esté listo antes de asociar los controladores.
import { onMounted } from "vue"
onMounted(() => {
socket.on("message", (msg) => {
messages.value.push(msg)
})
})Enviar un mensaje
La función sendMessage emite el borrador al servidor y limpia la entrada. Evitamos enviar cadenas vacías.
function sendMessage() {
const text = draft.value.trim()
if (!text) return
socket.emit("send", { text })
draft.value = ""
}Representar la lista
La plantilla recorre messages con v-for, utilizando el id como clave. Cada fila muestra el autor y el texto.
<!-- template -->
<div ref="chatBox" class="chat">
<p v-for="m in messages" :key="m.id">
<strong>{{ m.user }}:</strong> {{ m.text }}
</p>
</div>El problema del desplazamiento
Cuando llega un mensaje nuevo, el usuario quiere que la vista permanezca desplazada hasta el final. Sin embargo, si desplaza la vista justo después de añadir el mensaje al arreglo, la nueva fila todavía no está en el DOM: Vue aún no ha aplicado la actualización.
Desplaza la vista demasiado pronto y se pierde la última línea.
Una ref de plantilla para el contenedor
Obtenga el contenedor de desplazamiento mediante una ref de plantilla para poder leer y establecer su posición de desplazamiento.
import { ref } from "vue"
const chatBox = ref(null)
// template: <div ref="chatBox"> ... </div>Esperar al DOM con nextTick
nextTick devuelve una promesa que se resuelve después de que Vue aplique las actualizaciones pendientes del DOM. Espere a que se resuelva antes de desplazarse para que el nuevo mensaje exista en el DOM.
import { nextTick } from "vue"
async function scrollToBottom() {
await nextTick()
const el = chatBox.value
el.scrollTop = el.scrollHeight
}Desplazarse después de cada mensaje nuevo
Llame a scrollToBottom justo después de añadir un mensaje, tanto para los entrantes como para los salientes. Establecer scrollTop = scrollHeight lleva directamente al final.
onMounted(() => {
socket.on("message", async (msg) => {
messages.value.push(msg)
await scrollToBottom()
})
})Flujo completo
El componente ahora: recibe un mensaje, actualiza el estado reactivo, espera al DOM mediante nextTick y, después, se desplaza. El envío sigue el mismo flujo. Limpio, predecible y en tiempo real.
async function sendMessage() {
const text = draft.value.trim()
if (!text) return
socket.emit("send", { text })
draft.value = ""
await scrollToBottom()
}Comprobación rápida
Compruebe su comprensión de la sincronización del DOM en el componente de chat.
Repaso
En esta lección ha creado un componente de chat en tiempo real. Puntos clave:
- Mantenga los mensajes en un array reactivo de
refy el borrador en su propio ref. - Registre el listener del socket en
onMountedy añada los mensajes entrantes. sendMessageemite el borrador y borra el campo de entrada.- Use un ref de plantilla y
await nextTick()antes de establecerscrollTop = scrollHeightpara que el mensaje más reciente sea visible.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Creación de un componente de chat en tiempo real» es gratis?
Sí — el texto completo de «Creación de un componente de chat en tiempo real» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de un componente de chat en tiempo real»?
Lista de mensajes con v-for, vinculación del campo de entrada, emisión al enviar y desplazamiento al final cuando llega un mensaje Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Creación de un componente de chat en tiempo real»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de WebSocket en el navegador
- Cliente de Socket.io con Vue
- Creación de un componente de chat en tiempo real
- Composable useWebSocket con reconexión