JavaScript Academy · Lección

Estrategias de reconexión

Vuelva a conectarse de forma fiable tras una interrupción.

Estrategias de reconexión es una lección gratuita de JavaScript 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 JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Por qué reconectar?

Las redes no son fiables: se pierde la conexión Wi-Fi, los portátiles entran en suspensión y los servidores se reinician. Un cliente de WebSocket robusto detecta el cierre y restablece automáticamente la conexión para que la experiencia del usuario no se vea interrumpida.

Reconexión ingenua

El enfoque más sencillo vuelve a abrir la conexión inmediatamente al cerrarse. El problema es que, si el servidor está caído, se le envían solicitudes sin parar en un bucle muy rápido.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Retardo fijo

Añadir un retardo constante es menos agresivo, pero sigue enviando intentos a un ritmo estable y puede sincronizar a muchos clientes, lo que provoca un efecto manada.

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Backoff exponencial

Duplique la espera después de cada intento fallido: 1 s, 2 s, 4 s, 8 s… hasta alcanzar un máximo. Así se distribuyen los reintentos y se alivia la carga de un servidor con problemas.

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

Añadir jitter

Aleatorice ligeramente el retardo para que miles de clientes no se reconecten en el mismo instante. El jitter completo elige un valor aleatorio entre 0 y el límite calculado.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Restablecer al conectarse correctamente

Cuando se active onopen, restablezca el contador de intentos para que la siguiente desconexión comience de nuevo el backoff.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

Un cliente completo con reconexión

Combine las piezas: conecte, restablezca el contador al abrirse la conexión y aplique backoff al cerrarse.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Respetar los estados en línea y sin conexión

Escuche los eventos online/offline del navegador. Pause la reconexión mientras no haya conexión y realice un intento inmediato cuando se restablezca.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Limitar los intentos

Opcionalmente, limite el número de reintentos e informe al usuario de un error permanente en lugar de reintentar indefinidamente.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Volver a sincronizar el estado tras la reconexión

Una conexión nueva no tiene el contexto del servidor. Al volver a abrirla, suscríbase de nuevo a los canales y solicite los mensajes que se hayan perdido mientras estaba desconectado.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Evitar sockets duplicados

Evite abrir varios sockets si la lógica de reconexión se activa dos veces. Realice el seguimiento del socket actual e ignore los controladores obsoletos.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Comprobación rápida

Ponga a prueba el diseño de la reconexión.

Repaso: reconexión

Ha pasado de una reconexión ingenua a un backoff exponencial con jitter, ha restablecido los intentos tras una conexión correcta, ha respetado los eventos online/offline, ha limitado los reintentos, ha vuelto a sincronizar el estado después de reconectar y ha evitado los sockets duplicados. Ahora su cliente es resistente.

Preguntas frecuentes

¿La lección «Estrategias de reconexión» es gratis?

Sí — el texto completo de «Estrategias de 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 JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estrategias de reconexión»?

Vuelva a conectarse de forma fiable tras una interrupción. Practicas JavaScript 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 JavaScript Academy?

No se requiere experiencia previa. JavaScript 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 «Estrategias de 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 JavaScript Academy?

Sí. Cada lección de JavaScript 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

← Volver a JavaScript Academy