Levenscyclus en fouten van verbindingen
Handel open-, close- en error-events af.
Levenscyclus en fouten van verbindingen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
De volledige levenscyclus
Een socket doorloopt CONNECTING → OPEN → CLOSING → CLOSED. Vier gebeurtenissen horen bij deze overgangen: open, message, error en close.
De gebeurtenis onclose
onclose wordt geactiveerd wanneer de verbinding eindigt, netjes of niet. De gebeurtenis bevat code, reason en wasClean.
socket.onclose = (event) => {
console.log("Closed", event.code, event.reason, event.wasClean);
};Sluitingscodes
Standaardcodes zijn onder andere 1000 (normaal), 1001 (gaat weg), 1006 (abnormaal, zonder sluitingsframe) en 1011 (serverfout). Codes 4000–4999 worden door de app bepaald.
socket.onclose = (e) => {
if (e.code === 1000) console.log("normal close");
else console.log("unexpected", e.code);
};Bewust sluiten
socket.close(code, reason) start een nette afsluiting. Gebruik 1000 voor een normale afsluiting; de reden als tekenreeks moet korter zijn dan 123 bytes.
socket.close(1000, "user logged out");De gebeurtenis onerror
onerror wordt geactiveerd bij fouten. Om veiligheidsredenen bevat de foutgebeurtenis bewust weinig informatie — er wordt geen gedetailleerde reden meegegeven. Bijna altijd volgt daarna een gebeurtenis close.
socket.onerror = (event) => {
console.log("Socket error — a close will follow");
};Netjes en abnormaal onderscheiden
event.wasClean is alleen true wanneer beide kanten sluitingsframes hebben uitgewisseld. Bij een verbroken netwerkverbinding krijg je wasClean: false en code 1006.
socket.onclose = (e) => {
if (!e.wasClean) console.log("Connection dropped unexpectedly");
};Bronnen opruimen
Wis bij het sluiten timers (voor hartslagberichten), wijs wachtende verzoeken af en werk de UI-status bij, zodat de app de verbroken verbinding weerspiegelt.
socket.onclose = () => {
clearInterval(heartbeatTimer);
pending.forEach((reject) => reject(new Error("disconnected")));
pending.clear();
};Luisteraars verwijderen
Als je afhandelaars met addEventListener hebt gekoppeld, verwijder ze dan bij het sluiten om lekken te voorkomen, vooral wanneer je sockets opnieuw maakt.
function cleanup() {
socket.removeEventListener("message", onMessage);
socket.removeEventListener("close", onClose);
}readyState tijdens het afsluiten
Tussen het aanroepen van close() en de gebeurtenis onclose is readyState CLOSING (2). Verzenden tijdens dit venster wordt genegeerd.
socket.close();
console.log(socket.readyState); // 2 (CLOSING)Inactieve time-outs van servers
Servers en proxy's sluiten inactieve verbindingen vaak na 30–60 seconden. Hartslagberichten houden de verbinding actief en laten je verbroken verbindingen snel detecteren.
Een verbroken verbinding detecteren
Combineer hartslagberichten met een bewaker: als er binnen een bepaalde periode geen pong binnenkomt, behandel je de socket als verbroken en sluit je deze om opnieuw verbinden te starten.
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);
};Korte controle
Controleer de afhandeling van de levenscyclus.
Samenvatting: levenscyclus en fouten
Je hebt onclose met de bijbehorende code/reason/wasClean afgehandeld, standaard sluitingscodes geleerd, bewust gesloten, de beperkte onerror-informatie verwerkt, timers en luisteraars opgeruimd en een bewaker met hartslagberichten gebouwd. Hierna: strategieën voor opnieuw verbinden.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Levenscyclus en fouten van verbindingen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Levenscyclus en fouten van verbindingen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Levenscyclus en fouten van verbindingen”?
Handel open-, close- en error-events af. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Levenscyclus en fouten van verbindingen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een WebSocket-verbinding openen
- Berichten verzenden en ontvangen
- Levenscyclus en fouten van verbindingen
- Strategieën voor opnieuw verbinden