Phenquestions
WebSocket-protokollen giver mulighed for tovejskommunikation mellem en klient og en server. Denne proces svarer til den måde, hvorpå opkald på din telefon finder sted: først opretter du en forbindelse, og derefter kan du begynde at kommunikere med hinanden. WebSocket-protokollen bruges næsten overalt - fra multiplayer-browserspil til chatapplikationer.
Denne artikel viser dig, hvordan du opretter en WebSocket-protokol og bruger den til at kommunikere med flere brugere.
Forudsætninger
Før du går videre til processen med at oprette og bruge en WebSocket-protokol, skal du først installere et par ting, der er nødvendige for denne proces. Den første ting, du skal installere, er Node.js, en serverplatform, der konverterer JavaScript-programmeringssproget til maskinkode, der giver dig mulighed for at køre JavaScript direkte på din computer. For at installere Node.js, Windows-brugere kan simpelthen gå til den officielle node.js hjemmeside og klik på den grønne LTS-knap, der findes i midten af skærmen.
For Linux- og macOS-brugere skal du klikke på Downloads sektion i underoverskriften på hjemmesiden.
Efter åbning af Downloads sektion, vil du se installationsfiler for alle tre store platforme. Vælg en pakke, der understøttes af dit system.
Kør installationsprogrammet, der følger med de downloadede filer, og Node.js installeres på din computer. For at kontrollere, om programmet er installeret, skal du åbne terminalen og udstede følgende kommando:
$ node -v
Efter installation af Node.js, du har nu adgang til forskellige JavaScript-moduler, hvilket vil gøre dit arbejde mere effektivt i det lange løb. Åbn det bibliotek, hvor du vil oprette din klient- og serverarkitektur, åbn derefter terminalen inde i den mappe, og kør følgende kommando:
$ npm init -y
Denne kommando bruges til at oprette pakken.json-fil, der giver dig mulighed for at opsætte og installere en anden node.js-pakker. Installer WebSocket-protokolpakken ved at udstede følgende kommando i terminalen:
$ npm installer ws
Opret tre filer, kaldet indeks.html, klient.js og server.js. Som angivet ved navnene er disse JavaScript-filer klienten og serverarkitekturen i vores WebSocket-protokol. Nu kan vi endelig begynde at skrive koden til vores klient- og serverapplikationer.
Oprettelse af en WebSocket-server
For at oprette en WebSocket-server starter vi med at skrive koden til serveren. Åbn server.js fil, som du oprettede i din teksteditor eller IDE i det foregående afsnit, og indtast følgende linjer inde i filen.
const WebSocket = kræve ('ws');const ws = ny WebSocket.Server (port: 8080);
konsol.log ("Server startet");
ws.on ('forbindelse', (wss) =>
konsol.log ("En ny klient tilsluttet")
wss.send ('Velkommen til serveren!');
wss.på ('besked', (besked) =>
konsol.log ('Server modtaget: $ meddelelse');
wss.send ('Fik din besked:' + besked);
);
);
Nu vil vi forklare, hvad hver linje gør mere detaljeret.
Kode Forklaring
Som tidligere nævnt er der nogle indbyggede moduler tilgængelige i Node.js, der gør dit arbejde meget lettere. For at importere disse moduler bruger vi kræve nøgleord.
const WebSocket = kræve ('ws');const ws = ny WebSocket.Server (port: 8080);
konsol.log ("Server startet");
Den første linje bruges til at importere noden.js WebSocket-modul. Ved hjælp af dette modul opretter vi i næste linje vores WebSocket-server, som lytter på port 8080. Det konsol.log () linje er simpelthen der for at fortælle os, at serveren er startet. Du vil se dette vises inde i din terminal, når du kører følgende kommando i terminalen:
$ node-server
I den næste linje opretter vi en forbindelse mellem serveren og klienten.
ws.on ('forbindelse', (wss) =>konsol.log ("En ny klient tilsluttet")
);
Efter at en forbindelse er oprettet, vil wss.send () -linjen sender en besked til klienten. I dette tilfælde er meddelelsen “Velkommen til serveren.”
wss.send ('Velkommen til serveren!');Endelig, wss.on ('meddelelse') er for serveren at modtage meddelelsen fra klienten. For bekræftelse sender serveren denne meddelelse tilbage til klienten i sidste linje.
wss.på ('besked', (besked) =>konsol.log ('Server modtaget: $ meddelelse');
wss.send ('Fik din besked:' + besked);
);
Oprettelse af en WebSocket-klient
For klientsiden har vi brug for begge indekser.html-fil og klienten.js-fil. Selvfølgelig kan du blot tilføje indholdet fra klienten.js-fil i dit indeks.html-fil, men jeg foretrækker at holde dem adskilt. Lad os først se på klienten.js-kode. Åbn filen, og indtast følgende linjer inde i filen:
const socket = ny WebSocket ('ws: // localhost: 8080');stikkontakt.addEventListener ('open', () =>
konsol.log ('Forbundet til serveren!');
);
stikkontakt.addEventListener ('besked', (msg) =>
konsol.log ('Klient modtaget: $ msg.data');
);
const sendMsg = () =>
stikkontakt.send ('Hvordan går det amigo!');
Kode Forklaring
Ligesom med serveren.js, vi opretter en ny WebSocket, der lytter til port 8080, som kan ses i lokal vært: 8080 sektion af koden.
const socket = ny WebSocket ('ws: // localhost: 8080');I den næste linje, addEventListener får din klient til at lytte til de begivenheder, der i øjeblikket sker. I dette tilfælde vil det være at oprette og starte serveren. Når forbindelsen er oprettet, sender klienten en meddelelse til terminalen.
stikkontakt.addEventListener ('open', () =>konsol.log ('Forbundet til serveren!');
);
Igen lytter klienten til de begivenheder, der i øjeblikket sker. Når serveren sender en besked, modtager klienten denne og viser derefter meddelelsen i terminalen.
stikkontakt.addEventListener ('besked', (msg) =>konsol.log ('Klient modtaget: $ msg.data');
);
De sidste par linjer er simpelthen en funktion, hvor klienten sender en besked til serveren. Vi forbinder dette til en knap i vores html-fil for en bedre forståelse af, hvordan dette fungerer.
const sendMsg = () =>stikkontakt.send ('Hvordan går det amigo!');
Forberedelse af en HTML-fil
Endelig skal du åbne indekset.html-fil og tilføj en reference til din klient.js-fil inde i den. I mit tilfælde vil jeg blot tilføje følgende kodelinjer:
Som du kan se i nedenstående linjer, src (inde i script-tag) henviser til klientens javascript-fil. SendMsg-funktionen, som blev oprettet i klienten.js-fil, er også blevet forbundet til knappens onClick-funktion.
Sætter alt sammen
Du kan nu begynde at teste din klient- og serverarkitektur. Åbn først terminalen, og kør følgende kommando for at starte din server:
$ node-server
Når du har startet din server, skal du åbne det bibliotek, som dit indeks indeholder.html-filen er til stede, og dobbeltklik på den for at åbne den i din browser. Du ser følgende meddelelse vises i terminalen om, at en klient har oprettet forbindelse:
Du kan også kontrollere de meddelelser, der sendes fra serveren til klienten, ved at trykke på højreklikknappen og derefter åbne Inspicere vindue. Klik på i dette vindue Konsol sektion, og du vil kunne se de beskeder, der sendes fra serveren.
Når du klikker på knappen, kan både serveren og klienten sende og modtage meddelelser til og fra hinanden.
Server:
Klient:
Voilà, din WebSocket-forbindelse er oprettet!
Konklusion
WebSocket-protokollen er en glimrende måde at etablere kommunikation mellem en klient og en server på. Denne protokol bruges i flere felter, herunder multiplayer-browserspil, chat-systemer på forskellige sociale medieplatforme og endda samarbejdsprocesser mellem kodere.
