JavaScript Academy · leksjon

Tilkoblingens livssyklus og feil

Håndter open-, close- og error-hendelser.

Leksjon 3 av 413 trinn

Tilkoblingens livssyklus og feil er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 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.

Hele livssyklusen

En socket går gjennom CONNECTING → OPEN → CLOSING → CLOSED. Fire hendelser tilsvarer disse overgangene: open, message, error og close.

onclose-hendelsen

onclose utløses når tilkoblingen avsluttes, enten på en kontrollert måte eller ikke. Hendelsen inneholder code, reason og wasClean.

socket.onclose = (event) => {
  console.log("Closed", event.code, event.reason, event.wasClean);
};

Lukkekoder

Standardkoder omfatter 1000 (normal), 1001 (forlater), 1006 (unormal, uten lukkebilde) og 1011 (serverfeil). Kodene 4000–4999 defineres av applikasjonen.

socket.onclose = (e) => {
  if (e.code === 1000) console.log("normal close");
  else console.log("unexpected", e.code);
};

Lukke med vilje

socket.close(code, reason) starter en kontrollert avslutning. Bruk 1000 for en normal lukking. Årsaksstrengen må være kortere enn 123 byte.

socket.close(1000, "user logged out");

onerror-hendelsen

onerror utløses ved feil. Av sikkerhetshensyn inneholder feilhendelsen med vilje svært lite informasjon – den har ingen detaljert årsak. En close-hendelse følger nesten alltid.

socket.onerror = (event) => {
  console.log("Socket error — a close will follow");
};

Skille mellom normal og unormal avslutning

event.wasClean er true bare når begge sider har utvekslet lukkebilder. Ved et nettverksbrudd får du wasClean: false og koden 1006.

socket.onclose = (e) => {
  if (!e.wasClean) console.log("Connection dropped unexpectedly");
};

Rydde opp ressurser

Ved lukking må du tømme tidtakere (hjerteslag), avvise ventende forespørsler og oppdatere tilstanden i brukergrensesnittet, slik at appen gjenspeiler frakoblingen.

socket.onclose = () => {
  clearInterval(heartbeatTimer);
  pending.forEach((reject) => reject(new Error("disconnected")));
  pending.clear();
};

Fjerne lyttere

Hvis du koblet til behandlere med addEventListener, må du fjerne dem ved lukking for å unngå lekkasjer, særlig når du oppretter socketer på nytt.

function cleanup() {
  socket.removeEventListener("message", onMessage);
  socket.removeEventListener("close", onClose);
}

readyState under avslutning

Mellom kallet til close() og onclose-hendelsen er readyState lik CLOSING (2). Sendinger i dette tidsrommet ignoreres.

socket.close();
console.log(socket.readyState); // 2 (CLOSING)

Tidsavbrudd for inaktivitet fra servere

Servere og proxyer lukker ofte inaktive tilkoblinger etter 30–60 sekunder. Hjerteslag holder tilkoblingen aktiv og lar deg oppdage brudd raskt.

Oppdage en død tilkobling

Kombiner hjerteslag med en overvåker: Hvis det ikke kommer en pong innen et bestemt tidsrom, kan du behandle socketen som død og lukke den for å utløse ny tilkobling.

let pongTimer;
function ping() {
  socket.send(JSON.stringify({ type: "ping" }));
  pongTimer = setTimeout(() => socket.close(4000, "no pong"), 5000);
}
socket.onmessage = (e) => {
  if (JSON.parse(e.data).type === "pong") clearTimeout(pongTimer);
};

Rask sjekk

Test håndtering av livssyklusen.

Besvar den i den interaktive leksjonen

Oppsummering: Livssyklus og feil

Du har håndtert onclose med code/reason/wasClean, lært standardiserte lukkekoder, lukket tilkoblingen med vilje, håndtert den sparsomme onerror-hendelsen, ryddet opp i tidtakere og lyttere og laget en overvåker for hjerteslag. Neste trinn er strategier for ny tilkobling.

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 «Tilkoblingens livssyklus og feil» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Tilkoblingens livssyklus og feil», 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 «Tilkoblingens livssyklus og feil»?

Håndter open-, close- og error-hendelser. 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 3 av 4.

Hvor lang tid tar leksjonen «Tilkoblingens livssyklus og feil»?

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