Vue Academy · Lección

Cliente de Socket.io con Vue

socket.io-client, io(url), socket.on/emit y estado reactivo de Vue a partir de eventos del socket

Cliente de Socket.io con Vue es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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.

¿Por qué Socket.IO?

Los WebSockets sin procesar son de bajo nivel. Socket.IO es una biblioteca popular que añade reconexión automática, transportes alternativos, salas y una API clara basada en eventos.

Cuenta con paquetes correspondientes para el servidor y el cliente; aquí nos centraremos en el cliente del navegador utilizado dentro de Vue.

Instalar el cliente

Añada el paquete del cliente a su proyecto de Vue. Es independiente del paquete del servidor.

// terminal
// npm install socket.io-client

import { io } from "socket.io-client"

Conectarse con io()

Llame a io(url) para crear un socket y conectarse. A diferencia de los WebSockets sin procesar, debe proporcionar una URL http(s)://; Socket.IO negocia el transporte por usted.

import { io } from "socket.io-client"

const socket = io("https://api.example.com", {
  autoConnect: true,
})

Escuchar con socket.on

Socket.IO se basa en eventos con nombre. Use socket.on(name, handler) para reaccionar a un evento del servidor. El controlador recibe la carga útil que haya emitido el servidor.

socket.on("message", (msg) => {
  console.log("New message:", msg.text, "from", msg.user)
})

Eventos de ciclo de vida integrados

Socket.IO emite sus propios eventos de ciclo de vida, a los que puede suscribirse: connect, disconnect y connect_error.

socket.on("connect", () => {
  console.log("Connected, id:", socket.id)
})

socket.on("disconnect", (reason) => {
  console.log("Disconnected:", reason)
})

Enviar con socket.emit

Para enviar datos, llame a socket.emit(name, payload). Usted elige el nombre del evento y el servidor escucha ese mismo nombre. No es necesario codificar JSON manualmente: Socket.IO se encarga de serializar los datos.

function sendMessage(text) {
  socket.emit("send", { text, at: Date.now() })
}

sendMessage("Hello room!")

Un arreglo reactivo de mensajes

En Vue, almacene los mensajes entrantes en un arreglo reactivo dentro de un ref. El controlador de socket.on los añade al arreglo y la plantilla se vuelve a representar automáticamente.

import { ref } from "vue"

const messages = ref([])

socket.on("message", (msg) => {
  messages.value.push(msg)
})

Integrarlo en script setup

Un componente típico se conecta en onMounted, registra los listeners y expone una función de envío a la plantilla.

import { ref, onMounted, onUnmounted } from "vue"
import { io } from "socket.io-client"

const messages = ref([])
const socket = io("https://api.example.com")

onMounted(() => {
  socket.on("message", (m) => messages.value.push(m))
})

function send(text) {
  socket.emit("send", { text })
}

Limpiar los listeners

Los listeners registrados con socket.on permanecen asociados. Si el componente vuelve a montarse, puede acumular controladores duplicados. Elimínelos con socket.off al desmontar el componente.

function onMessage(m) { messages.value.push(m) }

onMounted(() => socket.on("message", onMessage))
onUnmounted(() => socket.off("message", onMessage))

Desconectarse en onUnmounted

Cuando se destruya el componente, cierre la conexión con socket.disconnect() para no dejar un socket abierto entre navegaciones.

import { onUnmounted } from "vue"

onUnmounted(() => {
  socket.disconnect()
})

Confirmaciones

Una característica útil de Socket.IO: pase una función de devolución de llamada como último argumento de emit y el servidor podrá llamarla para confirmar la recepción. Es ideal para una experiencia de usuario que indique «mensaje entregado».

socket.emit("send", { text: "hi" }, (ack) => {
  console.log("Server confirmed:", ack.status)
})

Comprobación rápida

Compruebe su comprensión de la API del cliente de Socket.IO.

Resumen

En esta lección ha aprendido lo siguiente:

io(url) de socket.io-client se conecta mediante una URL http(s).
socket.on(name, handler) reacciona a eventos del servidor con nombre.
socket.emit(name, payload) envía eventos; las cargas útiles se serializan automáticamente.
Añada los datos entrantes a un arreglo reactivo ref para que los represente la plantilla.
Limpie los listeners con socket.off y socket.disconnect() en onUnmounted.

Preguntas frecuentes

¿La lección «Cliente de Socket.io con Vue» es gratis?

Sí — el texto completo de «Cliente de Socket.io con Vue» 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 «Cliente de Socket.io con Vue»?

socket.io-client, io(url), socket.on/emit y estado reactivo de Vue a partir de eventos del socket 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 2 de 4.

¿Cuánto tiempo toma la lección «Cliente de Socket.io con Vue»?

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

← Volver a Vue Academy