WebSocket: wat is het, full-duplex communicatieprotocol en hoe het werkt

Wat is WebSocket?

WebSocket — is een communicatieprotocol dat werkt over TCP en een full-duplex kanaal biedt tussen client en server. Het is gestandaardiseerd door de IETF als RFC 6455 in 2011 en wordt ondersteund door alle moderne browsers, mobiele platforms en serverframeworks.

In tegenstelling tot HTTP, waar de client een verzoek initieert en een antwoord ontvangt, staat WebSocket beide partijen toe om op elk moment berichten te verzenden na het tot stand brengen van de verbinding. Dit maakt het ideaal voor scenario's die directe levering van gegevens vereisen: chats, meldingen, gezamenlijke documentbewerking.

Het WebSocket-protocol gebruikt HTTP-poort 80 of HTTPS-poort 443 voor de initiële handshake, waarna het overschakelt naar zijn eigen protocol met minimale headers — slechts 2 bytes in plaats van 800+ bytes in HTTP. Deze eigenschap geeft een aanzienlijk prestatievoordeel bij een groot aantal berichten.

Belangrijkste kenmerken van het protocol

Een WebSocket-verbinding begint met een HTTP Upgrade-verzoek, waarna het protocol overschakelt naar binair frame-formaat. De grootte van een frame varieert van 2 bytes tot 2^63 bytes, waardoor zowel korte tekstberichten als grote binaire gegevens kunnen worden verzonden. Berichtfragmentatie, maskering van gegevens van client naar server en ping/pong voor het onderhouden van de verbinding worden ondersteund.

Hoe werkt WebSocket?

Het proces van het tot stand brengen van een WebSocket-verbinding bestaat uit twee fasen: handshake en gegevensoverdracht. In de handshake-fase stuurt de client een HTTP-verzoek met de header Upgrade: websocket, en de server bevestigt de protocolwissel met status 101 Switching Protocols. Daarna gaat de verbinding over in full-duplex transmissiemodus.

Elk bericht in WebSocket wordt verdeeld in frames. Een frame bevat opcode (tekst, binaire gegevens, sluiting, ping/pong), payload-lengte en een maskeringssleutel voor gegevens van de client. Een frame kan worden gefragmenteerd — controleframes (ping/pong) kunnen worden verzonden tussen berichtfragmenten, wat verbindingsverbreking bij lange transmissie voorkomt.

const ws = new WebSocket('wss://example.com/chat')

ws.addEventListener('open', () => {
    console.log('Verbinding tot stand gebracht')
    ws.send('Hallo server!')
})

ws.addEventListener('message', (event) => {
    console.log('Ontvangen:', event.data)
})

ws.addEventListener('close', () => {
    console.log('Verbinding gesloten')
})

In bovenstaand voorbeeld maakt de client een WebSocket-object aan, met de beveiligde URL wss://. Na het openen van de verbinding wordt een begroetingsbericht verzonden, en de message-handler ontvangt antwoorden van de server. Bij sluiting wordt de close-handler geactiveerd — dit is belangrijk voor heraansluiting bij netwerkonderbreking.

WebSocket vs HTTP: vergelijking

Het belangrijkste verschil tussen WebSocket en HTTP zit in het interactiemodel. HTTP werkt volgens het verzoek-antwoord-schema: de client initieert een verzoek, de server retourneert een antwoord, de verbinding wordt gesloten. WebSocket daarentegen vestigt een permanent kanaal waarlangs beide partijen op elk moment transmissie kunnen initiëren.

Voor toepassingen die lage latentie en constante gegevensstroom vereisen, is WebSocket aanzienlijk efficiënter. HTTP Long Polling — een alternatief waarbij de server het verzoek openhoudt totdat gegevens verschijnen — creëert extra belasting op de server en verhoogt het geheugenverbruik door meerdere gelijktijdige verbindingen.

Volgens High Performance Browser Networking (Grigorik, O’Reilly) vermindert WebSocket netwerkvertragingen in real-time scenario's met 40–60% vergeleken met HTTP Long Polling, en de serverbelasting daalt 3–5 keer door het elimineren van herhaalde handshakes.

Waar wordt WebSocket gebruikt

Dankzij de lage latentie en bidirectionele communicatie wordt WebSocket gebruikt in een breed scala aan toepassingen. Belangrijke scenario's omvatten directe berichtenuitwisseling, statussynchronisatie in games en overdracht van marktgegevens in financiële systemen.

Chats en messengers

WebSocket is de de facto standaard geworden voor chattoepassingen. Platforms zoals Slack, Telegram Web en WhatsApp Web gebruiken WebSocket voor directe berichtbezorging. Het protocol maakt het mogelijk zowel tekstberichten als bestanden via één kanaal te verzenden, en het ping/pong-mechanisme houdt de verbinding actief, zelfs bij inactiviteit.

Online games

Multiplayer browser- en mobiele games vereisen minimale latentie voor synchronisatie van de spelersstatus. WebSocket verzendt coördinaten, acties en gebeurtenissen in real-time zonder de vertragingen van HTTP-verzoeken. Frameworks zoals Socket.IO en Colyseus abstraheren het laag-niveau werk met het protocol en voegen automatische heraansluiting en kamers toe.

Financiële toepassingen

Beursterminals en handelsplatformen gebruiken WebSocket om real-time koersen te ontvangen. Een vertraging van enkele milliseconden kan miljoenen dollars kosten, daarom bieden financiële API's — zoals Binance WebSocket Streams, Coinbase Pro — juist WebSocket-interfaces voor marktgegevens.

Mobiele apps en IoT

In mobiele ontwikkeling wordt WebSocket gebruikt via native API's: URLSessionWebSocketTask op iOS en OkHttp WebSocket op Android. Voor Flutter is er de web_socket_channel-bibliotheek, en voor React Native — react-native-websocket. IoT-apparaten gebruiken WebSocket voor het verzenden van telemetrie en het ontvangen van besturingsopdrachten, omdat het protocol minder energie verbruikt dan constante HTTP-polling.

WebSocket code voorbeelden

Laten we een voorbeeld van het servergedeelte in Node.js met de ws-bibliotheek bekijken — de populairste WebSocket-implementatie voor JavaScript. De server accepteert verbindingen, verwerkt berichten en zendt ze uit naar alle aangesloten clients.

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
    console.log('Nieuwe client verbonden')

    ws.on('message', (data) => {
        console.log('Ontvangen:', data.toString())
        ws.send('Server heeft uw bericht ontvangen')
    })

    ws.on('close', () => {
        console.log('Client verbroken')
    })
})

console.log('WebSocket-server gestart op poort 8080')

De server maakt een WebSocket.Server-instantie op poort 8080 en wacht op verbindingen. Elke nieuwe client krijgt een apart ws-object toegewezen, waarmee de server individueel berichten kan verzenden. Het uitzenden van berichten naar alle clients gebeurt door massaal door de verbindingsarray te itereren. Bij een groot aantal clients (meer dan 1000) wordt aanbevolen bibliotheken met clustering-ondersteuning te gebruiken, zoals Socket.IO, die schaling via Redis en automatische heraansluiting toevoegen.

Berichten verzenden naar alle clients

wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
        client.send('Bericht voor alle deelnemers')
    }
})

Controle van readyState vóór verzending is verplicht: als de client al is verbroken, zal de send-aanroep een fout geven. De vlag WebSocket.OPEN garandeert dat de verbinding actief is en het bericht wordt afgeleverd.

Voor mobiele iOS-applicaties wordt WebSocket geïmplementeerd via URLSessionWebSocketTask, beschikbaar vanaf iOS 13. De sessie maakt een taak met de URL van het wss://-protocol, waarna de methoden send en receive worden aangeroepen. Het ontvangen van berichten kan worden georganiseerd via continue receive-recursie, die wacht op het volgende bericht na verwerking van het vorige, wat zorgt voor continue gegevensontvangst zonder heraansluiting. Voor Android wordt OkHttp WebSocket gebruikt, dat een vergelijkbare interface biedt met callbacks onOpen, onMessage, onClosing en onClosed, evenals automatische heraansluiting bij verbindingsverbreking.

Bij het werken met WebSocket in mobiele apps is het belangrijk rekening te houden met levenscyclusbeheer: wanneer de app naar de achtergrond gaat, kan de verbinding door het systeem worden verbroken. Op iOS moet de verbinding worden hersteld bij terugkeer naar de voorgrond via de delegate sceneDidBecomeActive. Op Android moeten Lifecycle-aware componenten of Service worden gebruikt om de verbinding te behouden. Bovendien wordt aanbevolen exponential backoff te implementeren bij heraansluiting — het interval tussen pogingen verhogen van 1 naar 30 seconden, om overmatige belasting van de server te voorkomen bij tijdelijke netwerkproblemen.