Vue Academy · Lección

Composable useWebSocket con reconexión

Envoltorio de WebSocket en un composable, reconexión automática con espera exponencial y seguimiento del estado

Composable useWebSocket con reconexión es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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.

Envolver WebSockets en un composable

La gestión directa de WebSocket repartida entre varios componentes se vuelve difícil de mantener. Un composable useWebSocket centraliza el estado de la conexión, la reconexión y la gestión de mensajes, y permite reutilizarlo en cualquier parte.

Lo crearemos paso a paso.

Seguir el estado con un ref

Exponga el estado de la conexión como un ref reactivo status para que la interfaz pueda mostrar indicadores de "Conectando", "Abierto" o "Cerrado".

import { ref } from "vue"

export function useWebSocket(url) {
  const status = ref("CLOSED") // CONNECTING | OPEN | CLOSED
  // ...
  return { status }
}

La función connect

Encapsule la apertura del socket en una función interna connect para poder llamarla más adelante y reconectar. Actualice status en cada evento del ciclo de vida.

let ws
function connect() {
  status.value = "CONNECTING"
  ws = new WebSocket(url)
  ws.onopen = () => { status.value = "OPEN" }
  ws.onclose = () => { status.value = "CLOSED"; scheduleReconnect() }
}

Reconexión con retraso creciente

Reconectar al instante en un bucle cerrado sobrecarga el servidor. Use un backoff exponencial: espere más tiempo después de cada intento fallido, hasta alcanzar un límite.

let attempts = 0
function scheduleReconnect() {
  attempts++
  const delay = Math.min(1000 * 2 ** attempts, 30000)
  setTimeout(connect, delay)
}

Restablecer el backoff tras un éxito

Cuando una conexión se establezca correctamente, restablezca el contador de intentos para que la siguiente desconexión inicie el backoff desde el principio en lugar de aplicar un retraso largo.

ws.onopen = () => {
  status.value = "OPEN"
  attempts = 0
  flushQueue()
}

Una cola de mensajes mientras está desconectado

Si el usuario envía un mensaje mientras el socket está desconectado, no debe perderlo. Almacene los mensajes salientes en una cola y envíelos todos cuando se abra la conexión.

const queue = []
function send(data) {
  const payload = JSON.stringify(data)
  if (ws && ws.readyState === WebSocket.OPEN) {
    ws.send(payload)
  } else {
    queue.push(payload)
  }
}

Vaciar la cola

Cuando se abra el socket, procese todo lo que se haya acumulado. Extraiga los elementos del principio para conservar el orden.

function flushQueue() {
  while (queue.length && ws.readyState === WebSocket.OPEN) {
    ws.send(queue.shift())
  }
}

Controladores de mensajes por tipo

Permita que los consumidores registren controladores para cada type de mensaje. Almacene los callbacks en un mapa y distribúyalos según el tipo de mensaje en cada trama entrante.

const handlers = {}
function on(type, cb) { handlers[type] = cb }

// inside connect:
ws.onmessage = (e) => {
  const msg = JSON.parse(e.data)
  if (handlers[msg.type]) handlers[msg.type](msg.payload)
}

Limpieza en onUnmounted

El composable administra temporizadores y un socket. Detenga los temporizadores y cierre el socket cuando el componente que lo usa se desmonte, para que la reconexión no siga ejecutándose cuando la vista ya no exista.

import { onUnmounted } from "vue"

let reconnectTimer
onUnmounted(() => {
  clearTimeout(reconnectTimer)
  if (ws) ws.close(1000, "component unmounted")
})

Evitar la reconexión tras un cierre intencional

Un cierre limpio (código 1000) realizado durante su propia limpieza NO debe activar una reconexión. Registre un indicador intentional y omita la programación de la reconexión cuando esté establecido.

let intentional = false
function close() { intentional = true; ws.close(1000) }

ws.onclose = () => {
  status.value = "CLOSED"
  if (!intentional) scheduleReconnect()
}

Estructura completa del composable

Todo encaja: conectar al crearse, exponer status, send y on, poner mensajes en cola mientras está desconectado, reconectar con backoff y realizar la limpieza automáticamente.

export function useWebSocket(url) {
  const status = ref("CLOSED")
  // connect, scheduleReconnect, send, on, flushQueue, cleanup...
  connect()
  return { status, send, on, close }
}

// usage:
// const { status, send, on } = useWebSocket("wss://...")

Comprobación rápida

Compruebe su comprensión de la estrategia de reconexión.

Repaso

Ha creado un composable useWebSocket robusto:

Un ref status refleja CONNECTING / OPEN / CLOSED para la interfaz.
Reconecta con backoff exponencial, con un límite, y restablece el contador cuando la conexión tiene éxito.
Almacena los mensajes salientes en una cola mientras está desconectado y los envía todos al abrirse la conexión.
Distribuye las tramas entrantes entre callbacks controladores según el tipo.
Realiza la limpieza de los temporizadores y del socket en onUnmounted, omitiendo la reconexión tras un cierre intencional.

Preguntas frecuentes

¿La lección «Composable useWebSocket con reconexión» es gratis?

Sí — el texto completo de «Composable useWebSocket con reconexión» 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 «Composable useWebSocket con reconexión»?

Envoltorio de WebSocket en un composable, reconexión automática con espera exponencial y seguimiento del estado 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 4 de 4.

¿Cuánto tiempo toma la lección «Composable useWebSocket con reconexión»?

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