0Pricing
React Academy · Lezione

Riconnessione, gestione degli errori e pulizia

Gestisca le disconnessioni in modo appropriato e rimuova gli listener dei socket in useEffect.

Riconnessione, gestione degli errori e pulizia è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Perché la riconnessione è importante

Le interruzioni di rete sono comuni sui dispositivi mobili. Senza una logica di riconnessione, gli utenti perdono la connessione in tempo reale senza accorgersene. Una buona strategia esegue automaticamente nuovi tentativi con un backoff.

Riconnessione automatica di Socket.IO

Socket.IO si riconnette automaticamente per impostazione predefinita. Configuri reconnectionAttempts, reconnectionDelay e reconnectionDelayMax nelle opzioni di io().

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

Rilevamento dello stato della connessione in React

Ascolti gli eventi connect, disconnect e connect_error e rifletta lo stato nello stato 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;
}

Visualizzazione di un banner di riconnessione

Visualizzi un banner quando il socket si disconnette, così gli utenti sanno di essere offline e che la riconnessione è in corso.

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

Riconnessione manuale

Dopo aver esaurito i tentativi, consenta agli utenti di avviare manualmente una riconnessione tramite un pulsante.

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

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

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

Riconnessione di WebSocket diretto

WebSocket diretto non dispone di una riconnessione integrata. Implementi manualmente un backoff esponenziale: alla chiusura, attenda Math.min(delay * 2, maxDelay) prima di tentare una nuova connessione.

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;
}

Cleanup in useEffect

Ogni ascoltatore socket aggiunto in un useEffect deve essere rimosso nella funzione di cleanup. In caso contrario, si verificano perdite di memoria e la gestione duplicata degli eventi.

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

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

Come evitare le closure obsolete nei gestori

Quando un gestore socket fa riferimento allo stato o alle props, acquisisce una closure obsoleta. Utilizzi un ref per accedere sempre al valore più recente.

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

Invio dei messaggi in attesa dopo la riconnessione

Accodi i messaggi in uscita mentre è disconnesso e svuoti la coda quando la connessione viene ristabilita.

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);
}

Rientro nelle room dopo la riconnessione

Socket.IO cancella le appartenenze alle room quando avviene una disconnessione. Rientri nelle room quando il socket si riconnette per ripristinare le sottoscrizioni.

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

Gestione globale degli errori

Gestisca gli errori non recuperabili in modo appropriato: mostri un’interfaccia di errore e offra il ricaricamento della pagina come ultima risorsa.

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

Verifica rapida

Qual è il rischio di non rimuovere un ascoltatore degli eventi socket nel cleanup di useEffect?

Riepilogo

Configuri la riconnessione di Socket.IO con opzioni di backoff. Rifletta lo stato della connessione nello stato React, mostri un banner di riconnessione, rientri nelle room dopo la riconnessione e rimuova sempre gli ascoltatori nel cleanup di useEffect. Accodi i messaggi in attesa mentre è offline e svuoti la coda alla riconnessione.

Domande Frequenti

La lezione «Riconnessione, gestione degli errori e pulizia» è gratuita?

Sì — il testo completo di «Riconnessione, gestione degli errori e pulizia» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Riconnessione, gestione degli errori e pulizia»?

Gestisca le disconnessioni in modo appropriato e rimuova gli listener dei socket in useEffect. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Riconnessione, gestione degli errori e pulizia»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Fondamenti dei WebSocket nel browser
  2. Utilizzo di Socket.IO con React
  3. Creazione di un componente chat in tempo reale
  4. Riconnessione, gestione degli errori e pulizia
← Torna a React Academy