Wat zijn web-sockets?

Websockets (Websockets) zijn een protocol voor tweerichtingscommunicatie via een enkele TCP-verbinding, waarmee gegevens in realtime tussen browser en server kunnen worden uitgewisseld.

Belangrijke verschillen met traditionele HTTP-verzoeken:

• Tweerichtingscommunicatie: De server kan gegevens naar de client sturen zonder voorafgaande aanvraag van de client.
• Eén verbinding: Er wordt één langdurige verbinding tot stand gebracht, waardoor de kosten voor het opzetten van een nieuwe verbinding voor elke gegevensuitwisseling worden geëlimineerd (zoals bij HTTP).
• Vertraging verminderen: Minder tijd wordt besteed aan het opzetten van de verbinding, het uitwisselen van headers en het verwerken van korte verzoeken/antwoorden.

Werking:

1. Handshake: De browser stuurt een speciale HTTP-aanvraag naar de server (met headers Upgrade: websocket en Connection: Upgrade).
2. Verbinding tot stand brengen: Als de server websockets ondersteunt, reageert hij met de code 101 Switching Protocols, waarna de verbinding overschakelt op het websocket-protocol.
3. Gegevensoverdracht: Na het tot stand brengen van de verbinding kunnen beide partijen vrij berichten uitwisselen op elk moment.

Voorbeelden van gebruik:

• Online games
• Chats en berichtenapps
• Realtime gegevensupdates (koersen, nieuws)
• Samenwerkingstools

Voordelen:

• Lage latency
• Efficiënt gebruik van bronnen (minder overhead)
• Tweerichtingscommunicatie in realtime

Nadelen:

• Vereist ondersteuning zowel aan de clientzijde (browser) als aan de serverzijde.
• Complexere implementatie vergeleken met eenvoudige HTTP-verzoeken.

Voorbeeld van clientcode in JavaScript:

// Websocket maken
const socket = new WebSocket('wss://example.com/websocket');

// Handler voor het openen van de verbinding
socket.onopen = function(event) {
  console.log('Verbinding tot stand gebracht');
  socket.send('Hallo, server!'); // bericht naar de server sturen
};

// Handler voor het ontvangen van berichten
socket.onmessage = function(event) {
  console.log('Ontvangen bericht van de server: ' + event.data);
};

// Handler voor het sluiten van de verbinding
socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`Verbinding netjes gesloten, code=${event.code} reden=${event.reason}`);
  } else {
    console.log('Verbinding verbroken'); // bijvoorbeeld door netwerkfout
  }
};

// Handler voor fouten
socket.onerror = function(error) {
  console.error(`Websocket-fout: ${error}`);
};

// Verbindingsafsluiting (indien nodig)
// socket.close();