JavaScript Academy · Lección

Ciclo de vida y errores de la conexión

Gestione los eventos open, close y error.

Ciclo de vida y errores de la conexión es una lección gratuita de JavaScript 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 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.

El ciclo de vida completo

Un socket pasa por CONNECTING → OPEN → CLOSING → CLOSED. Cuatro eventos corresponden a estas transiciones: open, message, error y close.

El evento onclose

onclose se activa cuando termina la conexión, de forma normal o no. El evento contiene code, reason y wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Códigos de cierre

Entre los códigos estándar se incluyen 1000 (cierre normal), 1001 (el extremo se marcha), 1006 (cierre anómalo, sin trama de cierre) y 1011 (error del servidor). Los códigos 4000–4999 se definen en la aplicación.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Cerrar deliberadamente

socket.close(code, reason) inicia un cierre ordenado. Utilice 1000 para un cierre normal; la cadena de motivo debe tener menos de 123 bytes.

socket.close(1000, "user logged out");

El evento onerror

onerror se activa cuando se producen errores. Por motivos de seguridad, el evento de error contiene intencionadamente poca información: no incluye un motivo detallado. Casi siempre le sigue un evento close.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Distinguir entre cierres normales y anómalos

event.wasClean es true únicamente cuando ambos extremos han intercambiado tramas de cierre. Si se pierde la conexión de red, se obtiene wasClean: false y el código 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Liberar recursos

Al cerrarse la conexión, elimine los temporizadores (como los latidos), rechace las solicitudes pendientes y actualice el estado de la interfaz para que la aplicación refleje la desconexión.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Eliminar controladores

Si ha asociado controladores con addEventListener, elimínelos al cerrar la conexión para evitar fugas, especialmente al volver a crear sockets.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

readyState durante el cierre

Entre la llamada a close() y el evento onclose, readyState es CLOSING (2). Los envíos realizados durante este intervalo se ignoran.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Tiempos de espera por inactividad del servidor

Los servidores y proxies suelen cerrar las conexiones inactivas después de 30–60 segundos. Los latidos mantienen activa la conexión y permiten detectar rápidamente las desconexiones.

Detectar una conexión inactiva

Combine los latidos con un watchdog: si no llega ningún pong dentro de un intervalo determinado, considere que el socket ha dejado de funcionar y ciérrelo para activar la reconexión.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

Comprobación rápida

Ponga a prueba la gestión del ciclo de vida.

Repaso: ciclo de vida y errores

Ha gestionado onclose con sus propiedades code/reason/wasClean, ha aprendido los códigos de cierre estándar, ha cerrado conexiones deliberadamente, ha gestionado el evento onerror, que contiene poca información, ha liberado temporizadores y controladores y ha creado un watchdog basado en latidos. A continuación: estrategias de reconexión.

Preguntas frecuentes

¿La lección «Ciclo de vida y errores de la conexión» es gratis?

Sí — el texto completo de «Ciclo de vida y errores de la conexió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 «Ciclo de vida y errores de la conexión»?

Gestione los eventos open, close y error. 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 3 de 4.

¿Cuánto tiempo toma la lección «Ciclo de vida y errores de la conexió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