Programmeren van WebSockets en realtime-systemen · Les

Levenscyclus en statussen van verbindingen

Verken de verschillende statussen van een WebSocket-verbinding, van openen tot sluiten, en leer hoe u deze beheert.

Les 3 van 411 stappen

Levenscyclus en statussen van verbindingen is een gratis Programmeren van WebSockets en realtime-systemen-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Programmeren van WebSockets en realtime-systemen. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Programmeren van WebSockets en realtime-systemen bevat in totaal 4 lessen.

Verbindingsstatussen begrijpen

Wanneer je met WebSockets werkt, is het cruciaal dat je de huidige status van je verbinding kent. Zo kun je de gegevensstroom beheren en verbroken verbindingen netjes afhandelen.

Net zoals een telefoongesprek verschillende fasen doorloopt (bellen, verbonden zijn en ophangen), heeft een WebSocket-verbinding een vastgestelde levenscyclus met specifieke statussen.

De status CONNECTING (0)

De allereerste status van een WebSocket is CONNECTING. Deze ontstaat meteen nadat je een nieuw WebSocket-object hebt gemaakt.

De numerieke waarde is 0.
In deze status probeert de client een verbinding met de server tot stand te brengen.
Dit omvat het initiële HTTP-handshakeproces waarmee de verbinding naar WebSocket wordt opgewaardeerd.
Je kunt nog geen berichten verzenden.

Verbinden met Node.js

Wanneer een WebSocket-client probeert verbinding te maken, gaat deze naar de status CONNECTING (readyState = 0). In deze fase vindt de initiële handshake plaats.

Voer de volgende stappen uit om dit Node.js-voorbeeld uit te voeren:

Zorg dat Node.js is geïnstalleerd.
Open je terminal en voer npm init -y uit.
Installeer de bibliotheek ws: npm install ws
Sla de onderstaande code op als index.js.
Voer node index.js uit.

Opmerking: Voor een geslaagde verbinding moet er een WebSocket-server actief zijn op ws://localhost:8080.

const WebSocket = require('ws');

const ws = new WebSocket('ws://localhost:8080');

console.log(`Initial state: ${ws.readyState}`); // Expected: 0 (CONNECTING)

ws.onopen = () => {
  console.log(`Connection opened! State: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Hello from CoddyKit client!');
  setTimeout(() => ws.close(1000, 'Demo complete'), 2000);
};

ws.onmessage = (event) => {
  console.log(`Received: ${event.data}`);
};

ws.onclose = (event) => {
  console.log(`Connection closed. Code: ${event.code}, Reason: ${event.reason}`);
  console.log(`Final state: ${ws.readyState}`); // Expected: 3 (CLOSED)
};

ws.onerror = (error) => {
  console.error('WebSocket Error:', error.message);
};

De status OPEN (1)

Zodra de handshake is voltooid en de verbinding succesvol tot stand is gebracht, gaat de WebSocket naar de status OPEN.

De numerieke waarde is 1.
In deze status is de verbinding klaar voor bidirectionele communicatie.
Je kunt gegevens naar de server verzenden en de server kan gegevens naar jou verzenden.
Dit is de fase van actieve communicatie.

De gebeurtenis OPEN afhandelen

De gebeurtenis onopen wordt geactiveerd zodra de WebSocket-verbinding van CONNECTING naar OPEN overgaat. Dit is het signaal dat je berichten kunt gaan verzenden.

Voer dit Node.js-voorbeeld uit om de gebeurtenis onopen in actie te zien:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log('WebSocket connection is now OPEN!');
  console.log(`Current state: ${ws.readyState}`); // Expected: 1 (OPEN)
  ws.send('Ready to chat!');
  setTimeout(() => ws.close(), 1500); // Close after a short delay
};

ws.onmessage = (event) => {
  console.log('Received:', event.data);
};

ws.onclose = () => {
  console.log('Connection closed.');
};

ws.onerror = (error) => {
  console.error('Error:', error.message);
};

De status CLOSING (2)

Wanneer de client of de server besluit de verbinding te beëindigen, gaat deze naar de status CLOSING.

De numerieke waarde is 2.
Deze status ontstaat nadat ws.close() is aangeroepen, maar voordat de verbinding volledig is afgesloten.
Tijdens deze fase wordt een afsluitende handshake uitgevoerd om een nette beëindiging te garanderen.
Er mogen geen nieuwe berichten worden verzonden, hoewel sommige gebufferde berichten mogelijk nog worden verwerkt.

Een verbinding netjes sluiten

Je kunt een WebSocket-verbinding expliciet sluiten met de methode ws.close(). De verbinding gaat dan door de status CLOSING (readyState = 2) voordat deze uiteindelijk CLOSED wordt (readyState = 3).

Bekijk de statuswijzigingen tijdens het sluiten:

const WebSocket = require('ws');
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
  console.log(`Connection OPEN. State: ${ws.readyState}`); // 1
  console.log('Initiating connection close...');
  ws.close(1000, 'Client requested shutdown'); // Code 1000: normal closure
  console.log(`State after calling close(): ${ws.readyState}`); // Expected: 2 (CLOSING)
};

ws.onclose = (event) => {
  console.log(`Connection CLOSED. State: ${ws.readyState}`); // 3
  console.log(`Close Code: ${event.code}, Reason: ${event.reason}`);
};

ws.onerror = (error) => {
  console.error('Error during connection:', error.message);
};

De status CLOSED (3)

De laatste status van een WebSocket-verbinding is CLOSED.

De numerieke waarde is 3.
De verbinding is volledig beëindigd.
Er kan geen verdere communicatie plaatsvinden via dit WebSocket-object.
Als je opnieuw verbinding wilt maken, moet je een nieuwe instantie van WebSocket maken.

De verbindingsstatus controleren

Je kunt de huidige status van een WebSocket-verbinding altijd controleren met de eigenschap readyState. Deze eigenschap retourneert een van de numerieke waarden (0, 1, 2, 3) of de bijbehorende benoemde constanten:

WebSocket.CONNECTING (0)
WebSocket.OPEN (1)
WebSocket.CLOSING (2)
WebSocket.CLOSED (3)

Door deze constanten te gebruiken, wordt je code beter leesbaar!

Korte controle: verbindingsstatussen

De eigenschap readyState geeft de huidige status van een WebSocket-verbinding aan.

Beantwoord dit in de interactieve les

Samenvatting: levenscyclus van een WebSocket

Goed gedaan! Je hebt de vier essentiële statussen van een WebSocket-verbinding geleerd:

CONNECTING (0): Handshake wordt uitgevoerd.
OPEN (1): Verbinding tot stand gebracht, klaar voor gegevens.
CLOSING (2): Afsluitende handshake gestart.
CLOSED (3): Verbinding beëindigd.

Inzicht in deze statussen is essentieel voor het bouwen van robuuste en betrouwbare realtimeapplicaties.

Gratis beginnen

Leer Programmeren van WebSockets en realtime-systemen 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: 12
Lessen: 47

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Levenscyclus en statussen van verbindingen” gratis?

Ja — de volledige tekst van “Levenscyclus en statussen van verbindingen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Programmeren van WebSockets en realtime-systemen wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Programmeren van WebSockets en realtime-systemen bevat in totaal 4 lessen.

Wat leer ik in “Levenscyclus en statussen van verbindingen”?

Verken de verschillende statussen van een WebSocket-verbinding, van openen tot sluiten, en leer hoe u deze beheert. Je oefent met Programmeren van WebSockets en realtime-systemen 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 Programmeren van WebSockets en realtime-systemen te beginnen?

Ervaring vooraf is niet nodig. Programmeren van WebSockets en realtime-systemen 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 statussen 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 Programmeren van WebSockets en realtime-systemen?

Ja. Elke les over Programmeren van WebSockets en realtime-systemen 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

De WebSocket-handshake uitgelegd
WebSocket-dataframes en berichten
Levenscyclus en statussen van verbindingen
Subprotocollen, extensies en compressie

← Terug naar Programmeren van WebSockets en realtime-systemen