WebSockets voor bidirectionele gegevensstromen
Implementeer en begrijp WebSockets, een full-duplexcommunicatieprotocol dat ideaal is voor realtime, bidirectionele gegevensuitwisseling tussen client en server.
WebSockets voor bidirectionele gegevensstromen is een gratis Realtime-streamingsystemen (WebRTC + live gegevens)-les op CoddyKit. Dit is les 2 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 Realtime-streamingsystemen (WebRTC + live gegevens). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Realtime-streamingsystemen (WebRTC + live gegevens) bevat in totaal 4 lessen.
Wat zijn WebSockets?
Stel je een telefoongesprek voor waarin beide mensen tegelijkertijd kunnen praten en luisteren, zonder voor elke zin op te hangen en opnieuw te bellen. Een WebSocket-verbinding lijkt daarop!
WebSockets bieden een full-duplex-communicatiekanaal over één langdurige verbinding. Dit betekent dat gegevens gelijktijdig in beide richtingen kunnen stromen, waardoor realtime interacties soepel en efficiënt verlopen.
Verder dan HTTP: bidirectionele gegevensstroom
Traditionele HTTP-communicatie werkt als het versturen van een brief en wachten op antwoord. Elk verzoek staat op zichzelf.
- HTTP: De client stuurt een verzoek en de server stuurt een antwoord. De verbinding wordt meestal gesloten.
- WebSockets: Zodra de verbinding tot stand is gebracht, kunnen de client en de server op elk moment berichten naar elkaar sturen, zonder een nieuwe verzoek-antwoordcyclus nodig te hebben. De verbinding blijft open.
Dit persistente, bidirectionele karakter is cruciaal voor live-updates.
Een WebSocket-verbinding tot stand brengen
Een WebSocket-verbinding begint met een standaard HTTP-verzoek, maar bevat een speciale header om de verbinding te 'upgraden'.
Dit proces wordt de WebSocket-handshake genoemd:
- De client stuurt een HTTP-verzoek met een header 'Upgrade'.
- De server antwoordt met de status '101 Switching Protocols'.
- De verbinding wordt vervolgens een persistente WebSocket-verbinding.
Na de handshake wordt de onderliggende TCP-verbinding gebruikt voor het rechtstreeks uitwisselen van WebSocket-berichten.
De WebSocket-API van je browser
In webbrowsers werk je met WebSockets via de ingebouwde WebSocket-API. Dit is een JavaScript-object dat de verbindingsdetails voor je afhandelt.
Je maakt een nieuwe WebSocket-instantie door de URL van je WebSocket-server op te geven. Deze URL begint meestal met ws:// voor niet-versleutelde of wss:// voor versleutelde verbindingen (beveiligde WebSockets).
Verbinding maken met een server
Laten we bekijken hoe je vanuit je browser een eenvoudige WebSocket-verbinding tot stand brengt. We maken verbinding met een openbare echo-server die alles wat hij ontvangt eenvoudig terugstuurt.
Probeer dit voorbeeld uit te voeren. Je zou 'Connected!' moeten zien wanneer de verbinding tot stand is gebracht.
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Connect</title>
</head>
<body>
<h1>Connecting...</h1>
<script>
// Use wss:// for secure connections
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.querySelector('h1').innerText = 'Connected!';
console.log('WebSocket connection opened');
};
socket.onerror = (error) => {
document.querySelector('h1').innerText = 'Error!';
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>Gegevens naar de server sturen
Als je eenmaal verbonden bent, kun je gegevens naar de WebSocket-server sturen met de methode send() van je WebSocket-object. Je kunt tekst, binaire gegevens of zelfs JSON-tekenreeksen versturen.
Typ in dit voorbeeld een bericht en klik op 'Send'. De echo-server ontvangt het bericht.
<!DOCTYPE html>
<html>
<head>
<title>Send WebSocket</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>
<p id="status"></p>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.getElementById('status').innerText = 'Connected. Send a message!';
};
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
if (socket.readyState === WebSocket.OPEN) {
socket.send(message);
document.getElementById('status').innerText = 'Sent: ' + message;
input.value = ''; // Clear input after sending
} else {
document.getElementById('status').innerText = 'Not connected yet!';
}
}
</script>
</body>
</html>Serverupdates ontvangen
Om berichten van de server te ontvangen, luister je naar de gebeurtenis message met socket.onmessage. Het gebeurtenisobject bevat de ontvangen gegevens.
Voer deze code uit. Er wordt een bericht verstuurd bij het openen van de verbinding, waarna het antwoord van de echo-server wordt weergegeven.
<!DOCTYPE html>
<html>
<head>
<title>Receive WebSocket</title>
</head>
<body>
<h1>Echo Messages</h1>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
console.log('WebSocket connection opened.');
// Send a message to get a response from the echo server
socket.send('Hello Echo Server!');
};
socket.onmessage = (event) => {
const messageList = document.getElementById('messages');
const newItem = document.createElement('li');
newItem.textContent = 'Received: ' + event.data;
messageList.appendChild(newItem);
};
socket.onerror = (error) => {
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>WebSockets netjes sluiten
Het is een goede gewoonte om je WebSocket-verbindingen te beheren. Je kunt een verbinding sluiten met de methode socket.close().
Daarnaast kun je naar andere gebeurtenissen luisteren:
socket.onclose: Wordt geactiveerd wanneer de verbinding wordt gesloten.socket.onerror: Wordt geactiveerd wanneer er tijdens de verbinding een fout optreedt.
Door deze gebeurtenissen correct af te handelen, kun je robuuste realtime toepassingen bouwen.
Waar WebSockets uitblinken
WebSockets zijn perfect voor toepassingen die directe, voortdurende updates tussen clients en servers nodig hebben. Veelvoorkomende toepassingen zijn:
- Realtime chattoepassingen: Berichten verschijnen direct voor alle deelnemers.
- Live-sportuitslagen/aandelenkoersen: Gegevens worden bijgewerkt zonder de pagina te vernieuwen.
- Onlinegames voor meerdere spelers: De gamestatus en acties van spelers worden gesynchroniseerd.
- Samenwerken aan documenten: Je ziet wijzigingen van anderen in realtime.
Ze bieden een efficiënter alternatief voor het herhaaldelijk pollen van een server.
WebSocket-kennistoets
Je hebt geleerd over WebSockets. Laten we testen of je het begrijpt!
Samenvatting van WebSockets
Goed gedaan! In deze les heb je WebSockets verkend, een krachtige technologie voor realtime communicatie.
- WebSockets bieden full-duplex, bidirectionele communicatie.
- Ze brengen na een HTTP-handshake een persistente verbinding tot stand.
- Met de
WebSocket-API van de browser kun je verbinding maken en berichten versturen en ontvangen. - WebSockets zijn ideaal voor toepassingen die directe, voortdurende updates nodig hebben.
Vervolgens ga je praktische toepassingen van datakanalen in WebRTC bekijken!
Leer Realtime-streamingsystemen (WebRTC + live gegevens) 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
- 48
Veelgestelde vragen
Is de les “WebSockets voor bidirectionele gegevensstromen” gratis?
Ja — de volledige tekst van “WebSockets voor bidirectionele gegevensstromen” 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 Realtime-streamingsystemen (WebRTC + live gegevens) wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Realtime-streamingsystemen (WebRTC + live gegevens) bevat in totaal 4 lessen.
Wat leer ik in “WebSockets voor bidirectionele gegevensstromen”?
Implementeer en begrijp WebSockets, een full-duplexcommunicatieprotocol dat ideaal is voor realtime, bidirectionele gegevensuitwisseling tussen client en server. Je oefent met Realtime-streamingsystemen (WebRTC + live gegevens) 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 Realtime-streamingsystemen (WebRTC + live gegevens) te beginnen?
Ervaring vooraf is niet nodig. Realtime-streamingsystemen (WebRTC + live gegevens) 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 2 van 4.
Hoe lang duurt de les “WebSockets voor bidirectionele gegevensstromen”?
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 Realtime-streamingsystemen (WebRTC + live gegevens)?
Ja. Elke les over Realtime-streamingsystemen (WebRTC + live gegevens) 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
- Live gegevens versus traditioneel HTTP
- WebSockets voor bidirectionele gegevensstromen
- Server-Sent Events (SSE) voor unidirectionele push
- Long polling en de evolutie naar streaming