Phenquestions
Het WebSocket-protocol zorgt voor tweerichtingscommunicatie tussen een client en een server. Dit proces is vergelijkbaar met de manier waarop gebeld wordt op je telefoon: eerst breng je een verbinding tot stand en dan kun je met elkaar gaan communiceren. Het WebSocket-protocol wordt bijna overal gebruikt - van browsergames voor meerdere spelers tot chattoepassingen.
Dit artikel laat zien hoe u een WebSocket-protocol maakt en gebruikt om met meerdere gebruikers te communiceren.
Vereisten
Voordat u doorgaat met het maken en gebruiken van een WebSocket-protocol, moet u eerst een paar dingen installeren die voor dit proces nodig zijn. Het eerste dat u moet installeren, is Node.js, een server-side platform dat de JavaScript-programmeertaal omzet in machinecode waarmee u JavaScript rechtstreeks op uw computer kunt uitvoeren. Om Node te installeren.js, kunnen Windows-gebruikers gewoon naar de officiële Node gaan.js-website en klik op de groene LTS-knop in het midden van het scherm.
Voor Linux- en macOS-gebruikers, klik op de Downloads sectie in de subkop van de website.
Na het openen van de Downloads sectie, ziet u installatiebestanden voor alle drie de belangrijkste platforms. Selecteer een pakket dat door uw systeem wordt ondersteund.
Voer het installatieprogramma uit dat bij de gedownloade bestanden wordt geleverd en Node.js wordt op uw computer geïnstalleerd. Om te controleren of het programma is geïnstalleerd, opent u de terminal en geeft u het volgende commando:
$ knooppunt -v
Na het installeren van Node.js, je hebt nu toegang tot verschillende JavaScript-modules, die je werk op de lange termijn efficiënter zullen maken. Open de map waarin u uw client- en serverarchitectuur wilt maken, open vervolgens de terminal in die map en voer de volgende opdracht uit:
$ npm init -y
Deze opdracht wordt gebruikt om het pakket te maken.json-bestand waarmee u verschillende Node . kunt instellen en installeren.js-pakketten. Installeer het WebSocket-protocolpakket door de volgende opdracht in de terminal uit te voeren:
$ npm installeren ws
Maak drie bestanden, genaamd inhoudsopgave.html, klant.js en server.js. Zoals aangegeven door de namen, zijn deze JavaScript-bestanden de client- en serverarchitectuur van ons WebSocket-protocol. Nu kunnen we eindelijk beginnen met het schrijven van de code van onze client- en serverapplicaties.
Een WebSocket-server maken
Om een WebSocket-server te maken, beginnen we met het schrijven van de code voor de server. Open de server.js bestand dat u in de vorige sectie in uw teksteditor of IDE hebt gemaakt en voer de volgende regels in het bestand in:.
const WebSocket = vereisen('ws');const ws = nieuwe WebSocket.Server ( poort: 8080 );
troosten.log("Server gestart");
ws.aan('verbinding', (wss) =>
troosten.log ("Een nieuwe client verbonden")
wss.send('Welkom op de server!');
wss.aan('bericht', (bericht) =>
troosten.log('Server ontvangen: $message');
wss.send('Heb je bericht: ' + bericht);
);
);
Nu zullen we in meer detail uitleggen wat elke regel doet.
Code Uitleg
Zoals eerder vermeld, zijn er enkele ingebouwde modules beschikbaar in Node.js die uw werk veel gemakkelijker maken. Om deze modules te importeren, gebruiken we de vereisen trefwoord.
const WebSocket = vereisen('ws');const ws = nieuwe WebSocket.Server ( poort: 8080 );
troosten.log("Server gestart");
De eerste regel wordt gebruikt om de Node . te importeren.js WebSocket-module. Met behulp van deze module maken we in de volgende regel onze WebSocket-server, die luistert op poort 8080. De troosten.log() regel is er gewoon om ons te laten weten dat de server is gestart. U ziet dit in uw terminal verschijnen wanneer u de volgende opdracht in de terminal uitvoert:
$ node-server
In de volgende regel brengen we een verbinding tot stand tussen de server en de client.
ws.aan('verbinding', (wss) =>troosten.log ("Een nieuwe client verbonden")
);
Nadat een verbinding tot stand is gebracht, wordt de wss.send() regel stuurt een bericht naar de client. In dit geval is het bericht "Welkom bij de server".”
wss.send('Welkom op de server!');Eindelijk, de wss.aan ('bericht') is voor de server om het bericht van de client te ontvangen. Ter bevestiging stuurt de server dit bericht terug naar de client in de laatste regel.
wss.aan('bericht', (bericht) =>troosten.log('Server ontvangen: $message');
wss.send('Heb je bericht: ' + bericht);
);
Een WebSocket-client maken
Voor de client-side hebben we zowel de index.html-bestand en de client.js-bestand. Natuurlijk kunt u eenvoudig de inhoud van de klant toevoegen.js-bestand in uw index.html-bestand, maar ik hou ze liever gescheiden. Laten we eerst naar de klant kijken.js-code. Open het bestand en voer de volgende regels in het bestand in:
const socket = nieuwe WebSocket('ws://localhost:8080');stopcontact.addEventListener('open', () =>
troosten.log('Verbonden met de server!');
);
stopcontact.addEventListener('message', (msg) =>
troosten.log('Cliënt ontvangen: $msg.gegevens');
);
const stuurMsg = () =>
stopcontact.send('Hoe gaat het amigo!');
Code Uitleg
Zoals met de server.js, zullen we een nieuwe WebSocket maken die luistert naar poort 8080, die te zien is in de localhost:8080 gedeelte van de code.
const socket = nieuwe WebSocket('ws://localhost:8080');In de volgende regel, addEventListener laat uw klant luisteren naar alle gebeurtenissen die momenteel plaatsvinden. In dit geval zou het de server maken en starten. Zodra de verbinding tot stand is gebracht, stuurt de client een bericht naar de terminal.
stopcontact.addEventListener('open', () =>troosten.log('Verbonden met de server!');
);
Nogmaals, de klant luistert naar alle gebeurtenissen die momenteel plaatsvinden. Wanneer de server een bericht verzendt, ontvangt de client dit en geeft het bericht vervolgens weer in de terminal.
stopcontact.addEventListener('message', (msg) =>troosten.log('Cliënt ontvangen: $msg.gegevens');
);
De laatste paar regels zijn gewoon een functie waarbij de client een bericht naar de server stuurt. We zullen dit koppelen aan een knop in ons html-bestand voor een beter begrip van hoe dit werkt.
const stuurMsg = () =>stopcontact.send('Hoe gaat het amigo!');
Een HTML-bestand voorbereiden
Open ten slotte de index.html-bestand en voeg een verwijzing naar uw klant toe.js-bestand erin. In mijn geval voeg ik eenvoudig de volgende regels code toe:
Zoals je in de onderstaande regels kunt zien, src (in de scripttag) verwijst naar het javascript-bestand van de client client. De sendMsg-functie, die is gemaakt in de client.js-bestand, is ook verbonden met de onClick-functie van de knop.
Alles bij elkaar zetten
U kunt nu beginnen met het testen van uw client- en serverarchitectuur. Open eerst de terminal en voer de volgende opdracht uit om uw server te starten:
$ node-server
Open na het starten van uw server de map waarin uw index.html-bestand aanwezig is en dubbelklik erop om het in uw browser te openen. U ziet het volgende bericht in de terminal verschijnen waarin staat dat een client verbinding heeft gemaakt:
U kunt ook de berichten controleren die van de server naar de client zijn verzonden door op de rechtermuisknop te drukken en vervolgens de . te openen Inspecteren venster. Klik in dit venster op de Troosten sectie, en u kunt de berichten zien die vanaf de server zijn verzonden.
Zodra u op de knop klikt, kunnen zowel de server als de client berichten van en naar elkaar verzenden en ontvangen.
Server:
Cliënt:
Voilà, uw WebSocket-verbinding is tot stand gebracht!
Conclusie
Het WebSocket-protocol is een uitstekende manier om communicatie tussen een client en een server tot stand te brengen. Dit protocol wordt op verschillende gebieden gebruikt, waaronder browsergames voor meerdere spelers, chatsystemen van verschillende sociale-mediaplatforms en zelfs samenwerkingsprocessen tussen codeurs.
