WebSocket is een integrale technologie in veel moderne webapplicaties. Als je code voor het web schrijft, heb je de term waarschijnlijk al eerder gehoord, maar misschien weet je niet precies wat het is of hoe je het moet gebruiken. Gelukkig is WebSocket geen ingewikkeld concept en kunt u er vrij snel een basisbegrip van krijgen.
Wat is WebSocket?
WebSocket is helaas een van die namen die op het eerste gezicht niet logisch lijkt. WebSocket is eigenlijk de naam van a communicatie protocol waarmee bidirectionele communicatie tussen de client en de webserver mogelijk is.
In eenvoudiger bewoordingen is WebSocket een technologie waarmee een client en een server een verbinding kunnen maken waarbij beide partijen de ander op elk moment een bericht kunnen sturen.
Dit is anders dan bij een gewone HTTP-verbinding, waarbij de client een verzoek moet initiëren, en pas dan kan de server een antwoord sturen. In feite is WebSocket een heel ander communicatieprotocol dan HTTP dat is ontworpen om HTTP-compatibel te zijn. Wanneer een clienttoepassing een WebSocket-verbinding wil starten, moet deze de
HTTP-upgrademechanisme om over te schakelen naar het WebSocket-protocol.Op dit punt denk je misschien: "een protocol is slechts een set regels, hoe kun je dat gebruiken om te coderen?".
Het ontbrekende stuk is iets dat a. wordt genoemd protocolstack. In wezen hebben apparaten die een protocol ondersteunen ingebouwde hardware en software waarmee u toepassingen kunt schrijven die communiceren met behulp van het protocol. Het protocol wordt niet direct gebruikt om iets te bouwen.
Waarom is WebSocket gemaakt?
Om de noodzaak van WebSocket te illustreren, overweeg het mechanisme achter chatten op internet.
Iemand stuurt een bericht naar de chatserver vanaf zijn apparaat, maar de server moet dat bericht nog naar jouw apparaat sturen voordat je het kunt lezen. Als de server HTTP gebruikt, kan de server dat bericht niet rechtstreeks naar u doorsturen, omdat de server geen verzoeken kan initiëren.
Er zijn een aantal manieren om dit probleem met HTTP op te lossen. Eén manier is dat de client constant updateverzoeken naar de server stuurt, en de server stuurt alle gegevens door die hij in het antwoord heeft. Deze techniek wordt polling genoemd en elk verzoek wordt een poll genoemd. Er zijn twee varianten van polling: lange polling en korte polling.
Het gebruik van de lange polling-variant betekent dat het clientapparaat constant aan de server vraagt of er nieuwe berichten beschikbaar zijn. Als er nieuwe berichten beschikbaar zijn, stuurt de server de berichten als antwoord. Als dat niet het geval was, zou de server het reageren uitstellen en de verbinding openhouden totdat hij gegevens had om terug te sturen, waarna de client onmiddellijk een nieuw verzoek zou indienen.
Deze techniek is inefficiënt, omdat HTTP niet is ontworpen om op deze manier te worden gebruikt. Het presteert adequaat op kleine schaal, maar elk HTTP-verzoek omvat het verzenden van extra gegevens in de header, en het resulteert in een aanzienlijk verhoogde belasting van de server wanneer veel clients aan het pollen zijn het.
Hier is een diagram dat lange peilingen illustreert:
De korte peilingsvariant is nog minder efficiënt. Bij korte polling houdt de server de verbinding niet open totdat er nieuwe gegevens zijn, wat betekent dat de client de server met vaste, zeer korte intervallen moet blijven pollen.
Een andere techniek voor bidirectionele communicatie in HTTP wordt streaming genoemd.
Bij streaming houdt de server, nadat het eerste verzoek is verzonden, de verbinding voor onbepaalde tijd open en stuurt nieuwe stukjes informatie als continue gedeeltelijke antwoorden naar de client.
Het gebruik van streaming resulteert in een kleinere dataoverhead en serverbelasting dan polling, omdat de client idealiter slechts één HTTP-verzoek doet. Helaas veroorzaakt streaming onder bepaalde omstandigheden problemen, omdat browsers en netwerktussenpersonen (zoals proxy's) vaak proberen om de gedeeltelijke reacties als gebroken stukjes van één groot HTTP-antwoord (wat normaal HTTP-gedrag is), in plaats van als de afzonderlijke berichten waarvoor ze bedoeld waren zijn.
WebSocket is gemaakt om deze problemen op te lossen. In tegenstelling tot HTTP is WebSocket speciaal ontworpen voor bidirectionele communicatie. Met WebSocket kunnen de client en server, zodra een verbinding is geopend, berichten heen en weer sturen zonder de problemen van polling of streaming.
Gebruiksscenario's voor WebSocket
WebSocket is geweldig, maar dat betekent niet dat het overal moet worden gebruikt.
Het implementeren van WebSocket kan uw applicatie ingewikkelder maken, vooral aan de serverzijde, dus het zou niet moeten worden gedaan tenzij u een goede reden hebt. Dat roept de vraag op: hoe ziet een goede reden eruit?
WebSocket is ideaal voor gebruikssituaties waar frequente bidirectionele communicatie met lage latentie vereist is. Met andere woorden, WebSocket biedt een voordeel voor toepassingen die frequent of op grote schaal moeten communiceren. Als de communicatie niet realtime hoeft te zijn of de applicatie nooit op grote schaal zal groeien, kan polling of streaming voldoende zijn voor gebruik in die applicatie.
Typische toepassingen van WebSocket zijn het bouwen van chat-applicaties, online multiplayer-games, realtime samenwerking en meldingssoftware, enz.
Hoe WebSocket aan de clientzijde te gebruiken?
Het gebruik van WebSocket aan de serverzijde kan nogal ingewikkeld zijn, en het proces varieert aanzienlijk, afhankelijk van de taal (zoals C#, Java, etc.) en bibliotheek naar keuze, dus we zullen het hier niet behandelen. Vervolgens bespreken we kort hoe u WebSocket aan de clientzijde kunt gebruiken.
Alle moderne browsers implementeren een web-API genaamd de WebSocket-API, de protocolstack van de browser voor het WebSocket-protocol. U kunt WebSocket in JavaScript gebruiken met behulp van deze API. Met de API kunt u een WebSocket-object maken, waarmee u een WebSocket-verbinding maakt en communiceert met de WebSocket-server.
U kunt de volgende code-indeling gebruiken om een WebSocket-object te maken:
laat voorbeeldSocket = nieuwe WebSocket("wss://www.example.com/socketserver", "dummyProtocol");Het eerste argument voor de constructor is de URI van de WebSocket-server waarmee u een verbinding wilt maken. Het begint altijd met "ws" of "wss". Het tweede argument is optioneel. De waarde ervan is een tekenreeks of een reeks tekenreeksen, die de subprotocollen specificeert die u ondersteunt.
Het WebSocket-object heeft een alleen-lezen eigenschap met de naam readyState. Toegang tot deze eigenschap geeft de huidige status van de WebSocket-verbinding. readyState heeft vier mogelijke waarden: "connecting", "open", "closing" en "closed".
Wanneer die coderegel wordt uitgevoerd, probeert de browser verbinding te maken met de opgegeven server. De verbinding wordt niet in één keer voltooid, dus de readyState van voorbeeldSocket zal "verbinden" zijn. Er kunnen geen berichten worden verzonden of ontvangen totdat de verbinding is voltooid, waarna de waarde van readyState "open" wordt.
De voorbeeldSocket object heeft een gebeurtenislistener (die verschilt van) Luisteraars voor DOM-gebeurtenissen) genaamd "onopen" waarmee u pas verdere acties kunt uitvoeren nadat de verbinding tot stand is gebracht. Het object heeft ook een 'send'-methode waarmee u strings, Blobs (binaire gegevens) en ArrayBuffers als berichten naar de server kunt verzenden.
Hier is een voorbeeld waarin deze samen worden gebruikt:
voorbeeldSocket.onopen = functie (evenement) {
voorbeeldSocket.send("WebSocket is echt gaaf");
};De API biedt u ook een manier om te kunnen reageren op de berichten die de server verzendt. Dit wordt gedaan met de "onmessage" gebeurtenislistener. Hier is een voorbeeld:
voorbeeldSocket.onmessage = functie (evenement) {
troosten.log(evenement.gegevens);
}In plaats daarvan kun je ook schrijven een pijlfunctie:
voorbeeldSocket.onmessage = (gebeurtenis) => { troosten.log (gebeurtenisgegevens); }De API biedt ook een dichtbij() methode om de verbinding te sluiten. Hier is hoe het eruit ziet:
voorbeeldSocket.dichtbij();WebSocket maakt efficiënte bidirectionele communicatie mogelijk
WebSocket is een bidirectioneel communicatieprotocol. Servers en browsers implementeren protocolstacks om te communiceren via WebSocket. WebSocket bestaat omdat HTTP niet is ontworpen om bidirectioneel te zijn. Er zijn methoden om bidirectionele verbindingen met HTTP te implementeren, maar deze hebben problemen.
WebSocket is krachtige technologie, maar is niet in alle gevallen nodig, omdat het de applicatie-architectuur aanzienlijk kan compliceren. Het gebruik van WebSocket aan de clientzijde gebeurt met de browser WebSocket API.
