React Academy · leksjon

Gjenoppretting av tilkobling, feilhåndtering og opprydding

Håndter frakoblinger på en god måte, og rydd opp i socket-lyttere i useEffect.

Leksjon 4 av 413 trinn

Gjenoppretting av tilkobling, feilhåndtering og opprydding er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hvorfor tilkobling på nytt er viktig

Nettverksavbrudd er vanlige på mobile enheter. Uten logikk for tilkobling på nytt mister brukerne sanntidstilkoblingen uten å merke det. En god strategi prøver automatisk på nytt med backoff.

Automatisk tilkobling på nytt med Socket.IO

Socket.IO kobler automatisk til på nytt som standard. Konfigurer reconnectionAttempts, reconnectionDelay og reconnectionDelayMax i alternativene til io().

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

Følge tilkoblingstilstanden i React

Lytt etter connect-, disconnect- og connect_error-hendelser, og gjenspeil statusen i komponentens state.

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

Vise et banner ved tilkobling på nytt

Vis et banner når socketen kobles fra, slik at brukerne vet at de er frakoblet og at tilkobling på nytt pågår.

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

Manuell tilkobling på nytt

La brukerne starte en manuell ny tilkobling med en knapp etter at alle forsøkene er brukt opp.

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

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

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

Tilkobling på nytt med rå WebSocket

Rå WebSocket har ingen innebygd støtte for tilkobling på nytt. Implementer eksponentiell backoff manuelt: Vent ved lukking i Math.min(delay * 2, maxDelay) før du prøver å opprette en ny tilkobling.

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

Opprydding i useEffect

Alle socket-lyttere som legges til i en useEffect, må fjernes i cleanup-funksjonen. Hvis dette ikke gjøres, oppstår minnelekkasjer og duplikat håndtering av hendelser.

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

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

Unngå utdatert state i behandlere

Når en socket-handler refererer til state eller props, fanger den opp en utdatert closure. Bruk en ref for alltid å få tilgang til den nyeste verdien.

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

Tømme ventende meldinger ved tilkobling på nytt

Legg utgående meldinger i kø mens du er frakoblet, og tøm køen når tilkoblingen er gjenopprettet.

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

Bli med i rom på nytt etter tilkobling

Socket.IO sletter rommedlemskap ved frakobling. Bli med i rommene på nytt når socketen kobler til igjen, for å gjenopprette abonnementene.

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

Global feilhåndtering

Håndter feil som ikke kan gjenopprettes, på en god måte: vis et feilgrensesnitt, og tilby omlasting av siden som siste utvei.

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

Kort sjekk

Hva er risikoen ved å ikke fjerne en socket-lytter i cleanup-funksjonen til useEffect?

Besvar den i den interaktive leksjonen

Oppsummering

Konfigurer Socket.IO-tilkobling på nytt med backoff-alternativer. Gjenspeil tilkoblingsstatusen i React-state, vis et banner ved tilkobling på nytt, bli med i rom på nytt etter gjenopprettet tilkobling, og fjern alltid lyttere i cleanup-funksjonen til useEffect. Legg ventende meldinger i kø mens du er frakoblet, og tøm køen ved tilkobling på nytt.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Gjenoppretting av tilkobling, feilhåndtering og opprydding» gratis?

Ja – hele teksten i «Gjenoppretting av tilkobling, feilhåndtering og opprydding» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Gjenoppretting av tilkobling, feilhåndtering og opprydding»?

Håndter frakoblinger på en god måte, og rydd opp i socket-lyttere i useEffect. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Gjenoppretting av tilkobling, feilhåndtering og opprydding»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Grunnleggende om WebSocket i nettleseren
Bruke Socket.IO med React
Bygge en chatkomponent i sanntid
Gjenoppretting av tilkobling, feilhåndtering og opprydding

← Tilbake til React Academy