JavaScript Academy · Lektion

Anslutningens livscykel och fel

Hantera händelser för open, close och error.

Lektion 3 av 413 steg

Anslutningens livscykel och fel är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Hela livscykeln

En socket går genom CONNECTING → OPEN → CLOSING → CLOSED. Fyra händelser motsvarar dessa övergångar: open, message, error och close.

Händelsen onclose

onclose utlöses när anslutningen avslutas, oavsett om det sker korrekt eller inte. Händelsen innehåller code, reason och wasClean.

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

Stängningskoder

Standardkoder omfattar 1000 (normal), 1001 (mot frånkoppling), 1006 (onormal, ingen stängningsram) och 1011 (serverfel). Koderna 4000–4999 definieras av applikationen.

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

Stänga medvetet

socket.close(code, reason) initierar en ordnad nedstängning. Använd 1000 vid normal stängning; reason-strängen måste understiga 123 byte.

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

Händelsen onerror

onerror utlöses vid fel. Av säkerhetsskäl innehåller felhändelsen avsiktligt mycket lite information – den innehåller ingen detaljerad orsak. En close-händelse följer nästan alltid.

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

Skilja på rena och onormala avslut

event.wasClean är true endast när båda sidorna har utbytt stängningsramar. Ett nätverksavbrott ger wasClean: false och koden 1006.

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

Städa upp resurser

Vid stängning ska ni rensa timers (heartbeats), avvisa väntande förfrågningar och uppdatera UI-tillståndet så att appen återspeglar frånkopplingen.

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

Ta bort lyssnare

Om ni kopplade hanterare med addEventListener ska ni ta bort dem vid stängning för att undvika läckor, särskilt när socketar skapas på nytt.

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

readyState under nedstängning

Mellan anropet av close() och händelsen onclose är readyState CLOSING (2). Sändning under denna period ignoreras.

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

Inaktiva tidsgränser från servrar

Servrar och proxyservrar stänger ofta inaktiva anslutningar efter 30–60 sekunder. Heartbeats håller anslutningen aktiv och gör att ni snabbt kan upptäcka avbrott.

Upptäcka en död anslutning

Kombinera heartbeats med en watchdog: om ingen pong kommer inom ett visst tidsintervall ska ni betrakta socketen som död och stänga den för att utlösa återanslutning.

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

Snabbtest

Testa hanteringen av livscykeln.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Livscykel och fel

Ni har hanterat onclose med dess code/reason/wasClean, lärt er standardiserade stängningskoder, stängt anslutningar medvetet, hanterat den begränsade onerror-informationen, städat upp timers och lyssnare samt byggt en watchdog för heartbeats. Nästa steg: strategier för återanslutning.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Anslutningens livscykel och fel” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Anslutningens livscykel och fel”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Anslutningens livscykel och fel”?

Hantera händelser för open, close och error. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Anslutningens livscykel och fel”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy