JavaScript Academy · leksjon

Strategier for ny tilkobling

Koble til på nytt på en pålitelig måte etter brudd.

Leksjon 4 av 413 trinn

Strategier for ny tilkobling er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hvorfor koble til på nytt?

Nettverk er upålitelige – Wi-Fi faller ut, bærbare datamaskiner går i hvilemodus og servere starter på nytt. En robust WebSocket-klient oppdager at tilkoblingen er lukket og oppretter den automatisk på nytt, slik at brukeropplevelsen forblir sømløs.

Naiv ny tilkobling

Den enkleste metoden åpner tilkoblingen på nytt umiddelbart når den lukkes. Faren er at klienten hamrer løs på serveren i en tett løkke hvis serveren er nede.

function connect() {
  const socket = new WebSocket(url);
  socket.onclose = () => connect(); // too aggressive!
}

Fast forsinkelse

En konstant forsinkelse er mer skånsom, men sender fortsatt en jevn strøm av forsøk og kan synkronisere mange klienter slik at de prøver samtidig – en såkalt storm av forespørsler.

socket.onclose = () => {
  setTimeout(connect, 3000);
};

Eksponentiell backoff

Fordoble ventetiden etter hvert mislykkede forsøk: 1 s, 2 s, 4 s, 8 s … med en øvre grense. Dette sprer gjenforsøkene og avlaster en overbelastet server.

let attempt = 0;
function reconnect() {
  const delay = Math.min(1000 * 2 ** attempt, 30000);
  attempt++;
  setTimeout(connect, delay);
}

Legge til jitter

Gjør forsinkelsen litt tilfeldig, slik at tusenvis av klienter ikke kobler til på nytt i nøyaktig samme øyeblikk. Med full jitter velges en tilfeldig verdi mellom 0 og den beregnede øvre grensen.

function backoffWithJitter(attempt) {
  const cap = Math.min(1000 * 2 ** attempt, 30000);
  return Math.random() * cap;
}

Tilbakestille ved suksess

Når onopen utløses, tilbakestiller du telleren for forsøk, slik at neste frakobling starter backoff på nytt.

socket.onopen = () => {
  attempt = 0;
  console.log("reconnected");
};

En komplett klient med ny tilkobling

Sett delene sammen: koble til, tilbakestill ved åpning og bruk backoff ved lukking.

let attempt = 0, socket;
function connect() {
  socket = new WebSocket(url);
  socket.onopen = () => { attempt = 0; };
  socket.onclose = () => {
    const delay = Math.min(1000 * 2 ** attempt++, 30000);
    setTimeout(connect, delay + Math.random() * 1000);
  };
}
connect();

Håndtere online/offline

Følg med på nettleserens online-/offline-hendelser. Sett gjenopprettingen på pause mens du er frakoblet, og gjør et umiddelbart forsøk når tilkoblingen kommer tilbake.

window.addEventListener("online", () => {
  attempt = 0;
  connect();
});
window.addEventListener("offline", () => {
  if (socket) socket.close();
});

Begrense forsøk

Du kan begrense antallet gjenforsøk og vise brukeren at feilen er permanent, i stedet for å prøve for alltid.

const MAX = 10;
socket.onclose = () => {
  if (attempt >= MAX) { showOfflineBanner(); return; }
  setTimeout(connect, backoffWithJitter(attempt++));
};

Synkronisere tilstand på nytt etter ny tilkobling

En ny tilkobling har ingen kontekst på serversiden. Når tilkoblingen åpnes igjen, abonnerer du på kanalene på nytt og ber om meldinger som gikk tapt mens du var frakoblet.

socket.onopen = () => {
  attempt = 0;
  socket.send(JSON.stringify({ type: "resubscribe", channels }));
  socket.send(JSON.stringify({ type: "sync", since: lastSeenId }));
};

Unngå dupliserte socketer

Forhindre at det åpnes flere socketer hvis logikken for ny tilkobling utløses to ganger. Spor den gjeldende socketen, og ignorer utdaterte behandlere.

function connect() {
  if (socket && socket.readyState <= WebSocket.OPEN) return;
  socket = new WebSocket(url);
}

Rask sjekk

Test utformingen av strategien for ny tilkobling.

Besvar den i den interaktive leksjonen

Oppsummering: Ny tilkobling

Du har gått fra naiv ny tilkobling til eksponentiell backoff med jitter, tilbakestilt forsøkene ved suksess, håndtert online-/offline-hendelser, begrenset gjenforsøk, synkronisert tilstanden på nytt etter ny tilkobling og unngått dupliserte socketer. Klienten din er nå robust.

Gratis å komme i gang

Lær deg JavaScript 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: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Strategier for ny tilkobling» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Strategier for ny tilkobling», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Strategier for ny tilkobling»?

Koble til på nytt på en pålitelig måte etter brudd. Du øver på JavaScript 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 JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript 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 «Strategier for ny tilkobling»?

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 JavaScript Academy-leksjonen?

Ja. Alle JavaScript 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

← Tilbake til JavaScript Academy