React Academy · Lekcja

Ponowne łączenie, obsługa błędów i czyszczenie

Prawidłowa obsługa rozłączeń i czyszczenie nasłuchiwaczy gniazda w useEffect.

Lekcja 4 z 413 kroki

Ponowne łączenie, obsługa błędów i czyszczenie to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Dlaczego ponawianie połączenia ma znaczenie

Przerwy w połączeniu sieciowym są częste na urządzeniach mobilnych. Bez logiki ponawiania połączenia użytkownicy mogą po cichu utracić połączenie w czasie rzeczywistym. Dobra strategia automatycznie ponawia próby z narastającym opóźnieniem.

Automatyczne ponawianie połączenia w Socket.IO

Socket.IO domyślnie automatycznie ponawia połączenie. Skonfiguruj reconnectionAttempts, reconnectionDelay i reconnectionDelayMax w opcjach io().

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

Śledzenie stanu połączenia w React

Nasłuchuj zdarzeń connect, disconnect i connect_error, a następnie odzwierciedlaj stan połączenia w stanie komponentu.

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

Wyświetlanie banera ponownego łączenia

Wyświetl baner po rozłączeniu gniazda, aby użytkownicy wiedzieli, że są offline i trwa ponowne nawiązywanie połączenia.

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

Ręczne ponawianie połączenia

Po wyczerpaniu liczby prób pozwól użytkownikom ręcznie ponowić połączenie za pomocą przycisku.

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

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

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

Ponawianie połączenia za pomocą surowego WebSocket

Surowy WebSocket nie ma wbudowanej funkcji ponawiania połączenia. Zaimplementuj wykładnicze zwiększanie opóźnienia ręcznie: po zamknięciu odczekaj Math.min(delay * 2, maxDelay) przed próbą nawiązania nowego połączenia.

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

Czyszczenie w useEffect

Każde nasłuchiwanie gniazda dodane w useEffect musi zostać usunięte w funkcji czyszczącej. Niewykonanie tego prowadzi do wycieków pamięci i wielokrotnej obsługi tych samych zdarzeń.

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

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

Unikanie nieaktualnych domknięć w handlerach

Gdy handler gniazda odwołuje się do stanu lub właściwości, przechwytuje nieaktualne domknięcie. Użyj ref, aby zawsze uzyskiwać dostęp do najnowszej wartości.

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

Opróżnianie oczekujących wiadomości po ponownym połączeniu

Kolejkuj wychodzące wiadomości podczas rozłączenia i opróżnij kolejkę po ponownym nawiązaniu połączenia.

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

Ponowne dołączanie do pokoi po ponownym połączeniu

Socket.IO usuwa członkostwo w pokojach po rozłączeniu. Po ponownym połączeniu gniazda dołącz ponownie do pokoi, aby przywrócić subskrypcje.

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

Globalna obsługa błędów

Obsługuj błędy, których nie można naprawić, w kontrolowany sposób: wyświetl interfejs błędu i zaoferuj ponowne załadowanie strony jako ostateczność.

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

Szybkie sprawdzenie

Jakie jest ryzyko nieusunięcia nasłuchiwania zdarzeń gniazda w funkcji czyszczącej useEffect?

Odpowiedz w interaktywnej lekcji

Podsumowanie

Skonfiguruj ponawianie połączenia Socket.IO za pomocą opcji narastającego opóźnienia. Odzwierciedlaj stan połączenia w stanie React, wyświetlaj baner ponownego łączenia, dołączaj ponownie do pokoi po nawiązaniu połączenia i zawsze usuwaj nasłuchiwania w funkcji czyszczącej useEffect. Kolejkuj oczekujące wiadomości offline i opróżniaj kolejkę po ponownym połączeniu.

Bezpłatny start

Ucz się React dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 88
Lekcje: 324

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Ponowne łączenie, obsługa błędów i czyszczenie” jest bezpłatna?

Tak — pełny tekst „Ponowne łączenie, obsługa błędów i czyszczenie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Ponowne łączenie, obsługa błędów i czyszczenie”?

Prawidłowa obsługa rozłączeń i czyszczenie nasłuchiwaczy gniazda w useEffect. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Ponowne łączenie, obsługa błędów i czyszczenie”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Podstawy WebSocket w przeglądarce
Używanie Socket.IO z React
Budowanie komponentu czatu w czasie rzeczywistym
Ponowne łączenie, obsługa błędów i czyszczenie

← Powrót do React Academy