0Pricing
React Academy · Lektion

Wiederverbindung, Fehlerbehandlung und Cleanup

Verarbeiten Sie Verbindungsabbrüche angemessen und bereinigen Sie Socket-Listener in useEffect.

Wiederverbindung, Fehlerbehandlung und Cleanup ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Wiederverbindungen wichtig sind

Netzwerkunterbrechungen sind auf Mobilgeräten häufig. Ohne eine Logik zur Wiederverbindung verlieren Benutzer ihre Echtzeitverbindung unbemerkt. Eine gute Strategie führt automatisch erneute Verbindungsversuche mit einem Backoff durch.

Automatische Wiederverbindung mit Socket.IO

Socket.IO stellt die Verbindung standardmäßig automatisch wieder her. Konfigurieren Sie reconnectionAttempts, reconnectionDelay und reconnectionDelayMax in den Optionen von io().

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

Verbindungsstatus in React verfolgen

Hören Sie auf die Ereignisse connect, disconnect und connect_error und bilden Sie den Status im Komponentenstatus ab.

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

Ein Banner für die Wiederverbindung anzeigen

Zeigen Sie ein Banner an, wenn die Socket-Verbindung getrennt wird, damit Benutzer wissen, dass sie offline sind und die Wiederverbindung läuft.

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

Manuelle Wiederverbindung

Lassen Sie Benutzer nach ausgeschöpften Wiederholungsversuchen über einen Button manuell eine erneute Verbindung herstellen.

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

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

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

Wiederverbindung mit unverändertem WebSocket

Ein unveränderter WebSocket bietet keine integrierte Wiederverbindung. Implementieren Sie den exponentiellen Backoff manuell: Warten Sie nach dem Schließen Math.min(delay * 2, maxDelay), bevor Sie eine neue Verbindung versuchen.

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

Jeder Socket-Listener, der in einem useEffect hinzugefügt wird, muss in der Cleanup-Funktion entfernt werden. Andernfalls entstehen Speicherlecks und Ereignisse werden doppelt verarbeitet.

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

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

Veraltete Closures in Handlern vermeiden

Wenn ein Socket-Handler auf Status oder Props zugreift, erfasst er eine veraltete Closure. Verwenden Sie eine Ref, um immer auf den neuesten Wert zuzugreifen.

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

Ausstehende Nachrichten bei der Wiederverbindung senden

Stellen Sie ausgehende Nachrichten bei getrenntem Verbindungsstatus in eine Warteschlange und leeren Sie diese, sobald die Verbindung wiederhergestellt ist.

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

Räumen nach der Wiederverbindung erneut beitreten

Socket.IO löscht bei einer Trennung die Mitgliedschaften in Räumen. Treten Sie bei der Wiederverbindung des Sockets erneut bei, um die Abonnements wiederherzustellen.

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

Globale Fehlerbehandlung

Behandeln Sie nicht behebbare Fehler angemessen: Zeigen Sie eine Fehleroberfläche an und bieten Sie als letzten Ausweg das Neuladen der Seite an.

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

Kurztest

Welches Risiko besteht, wenn ein Socket-Event-Listener nicht im Cleanup von useEffect entfernt wird?

Zusammenfassung

Konfigurieren Sie die Socket.IO-Wiederverbindung mit Backoff-Optionen. Bilden Sie den Verbindungsstatus im React-Status ab, zeigen Sie ein Banner für die Wiederverbindung an, treten Sie nach der Wiederverbindung erneut Räumen bei und entfernen Sie Listener immer im Cleanup von useEffect. Stellen Sie ausstehende Nachrichten offline in eine Warteschlange und senden Sie sie bei der Wiederverbindung.

Häufig gestellte Fragen

Ist die Lektion „Wiederverbindung, Fehlerbehandlung und Cleanup“ kostenlos?

Ja — der vollständige Text von „Wiederverbindung, Fehlerbehandlung und Cleanup“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Wiederverbindung, Fehlerbehandlung und Cleanup“?

Verarbeiten Sie Verbindungsabbrüche angemessen und bereinigen Sie Socket-Listener in useEffect. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Wiederverbindung, Fehlerbehandlung und Cleanup“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. WebSocket-Grundlagen im Browser
  2. Socket.IO mit React verwenden
  3. Eine Echtzeit-Chat-Component erstellen
  4. Wiederverbindung, Fehlerbehandlung und Cleanup
← Zurück zu React Academy