PricingLoginStart free
React Academy · Lección

Reconexión, gestión de errores y limpieza

Gestione las desconexiones correctamente y limpie los listeners del socket en useEffect.

Lección 4 de 413 pasos

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

Por qué es importante la reconexión

Las interrupciones de red son frecuentes en dispositivos móviles. Sin lógica de reconexión, los usuarios pierden silenciosamente la conexión en tiempo real. Una buena estrategia reintenta automáticamente con backoff.

Reconexión automática de Socket.IO

Socket.IO se reconecta automáticamente de forma predeterminada. Configure reconnectionAttempts, reconnectionDelay y reconnectionDelayMax en las opciones de io().

const socket = io('https://api.example.com', {
  reconnectionAttempts: 5,
  reconnectionDelay: 1000,       // initial delay
  reconnectionDelayMax: 10000,   // max delay (exponential backoff)
  randomizationFactor: 0.5,
});

Seguimiento del estado de conexión en React

Escuche los eventos connect, disconnect y connect_error y refleje el estado en el estado del componente.

function useConnectionStatus() {
  const [status, setStatus] = useState<'connected' | 'disconnected' | 'error'>(
    socket.connected ? 'connected' : 'disconnected'
  );

  useEffect(() => {
    socket.on('connect', () => setStatus('connected'));
    socket.on('disconnect', () => setStatus('disconnected'));
    socket.on('connect_error', () => setStatus('error'));
    return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('connect_error');
    };
  }, []);

  return status;
}

Mostrar un banner de reconexión

Muestre un banner cuando el socket se desconecte para que los usuarios sepan que están sin conexión y que la reconexión está en curso.

function ConnectionBanner() {
  const status = useConnectionStatus();
  if (status === 'connected') return null;
  return (
    <div className="banner warning">
      {status === 'error' ? 'Connection failed' : 'Reconnecting...'}
    </div>
  );
}

Reconexión manual

Después de agotar los reintentos, permita que los usuarios inicien una reconexión manual mediante un botón.

const [failed, setFailed] = useState(false);

socket.on('reconnect_failed', () => setFailed(true));

if (failed) {
  return (
    <button onClick={() => { setFailed(false); socket.connect(); }}>
      Retry connection
    </button>
  );
}

Reconexión con WebSocket sin procesar

WebSocket sin procesar no incluye reconexión integrada. Implemente manualmente un backoff exponencial: al cerrarse la conexión, espere Math.min(delay * 2, maxDelay) antes de intentar establecer una nueva.

function connectWithBackoff(url, attempt = 0) {
  const ws = new WebSocket(url);
  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt, 30000);
    setTimeout(() => connectWithBackoff(url, attempt + 1), delay);
  };
  return ws;
}

Limpieza en useEffect

Cada listener de socket añadido en un useEffect debe eliminarse en la función de limpieza. No hacerlo provoca fugas de memoria y gestión duplicada de eventos.

useEffect(() => {
  const onData = (d) => setState(d);
  socket.on('data', onData);

  return () => {
    socket.off('data', onData); // remove specific handler reference
  };
}, []);

Cómo evitar closures obsoletas en los controladores

Cuando un controlador de socket hace referencia al estado o a las props, captura una closure obsoleta. Use una ref para acceder siempre al valor más reciente.

const handlerRef = useRef(null);
handlerRef.current = (msg) => updateMessages(messages, msg); // fresh ref each render

useEffect(() => {
  const onMsg = (...args) => handlerRef.current(...args);
  socket.on('message', onMsg);
  return () => socket.off('message', onMsg);
}, []); // no deps needed

Envío de mensajes pendientes al reconectar

Ponga en cola los mensajes salientes mientras no haya conexión y vacíe la cola cuando se restablezca la conexión.

const queue = useRef<string[]>([]);

socket.on('connect', () => {
  while (queue.current.length) {
    socket.emit('message', queue.current.shift());
  }
});

function send(text: string) {
  if (socket.connected) socket.emit('message', text);
  else queue.current.push(text);
}

Volver a unirse a las salas tras reconectar

Socket.IO elimina las pertenencias a salas al desconectarse. Vuelva a unirse a las salas cuando el socket se reconecte para restaurar las suscripciones.

useEffect(() => {
  function rejoin() { socket.emit('join-room', roomId); }
  socket.on('connect', rejoin);
  return () => socket.off('connect', rejoin);
}, [roomId]);

Gestión global de errores

Gestione los errores irrecuperables de forma adecuada: muestre una interfaz de error y ofrezca recargar la página como último recurso.

socket.on('connect_error', (err) => {
  console.error('Socket error:', err.message);
  // Show user-friendly error
});

Comprobación rápida

¿Qué riesgo existe si no elimina un listener de eventos del socket en la función de limpieza de useEffect?

Responde en la lección interactiva

Recapitulación

Configure la reconexión de Socket.IO con opciones de backoff. Refleje el estado de la conexión en el estado de React, muestre un banner de reconexión, vuelva a unirse a las salas después de reconectar y elimine siempre los listeners en la función de limpieza de useEffect. Ponga en cola los mensajes pendientes mientras no haya conexión y vacíe la cola al reconectar.

Gratis para empezar

Aprende React 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
88
Lecciones
324
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Reconexión, gestión de errores y limpieza» es gratis?

Sí — el texto completo de «Reconexión, gestión de errores y limpieza» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Reconexión, gestión de errores y limpieza»?

Gestione las desconexiones correctamente y limpie los listeners del socket en useEffect. Practicas React 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 React Academy?

No se requiere experiencia previa. React 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 «Reconexión, gestión de errores y limpieza»?

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 React Academy?

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

  1. Fundamentos de WebSocket en el navegador
  2. Utilizar Socket.IO con React
  3. Crear un componente de chat en tiempo real
  4. Reconexión, gestión de errores y limpieza
← Volver a React Academy