Phenquestions
WebSocket-protokollet möjliggör tvåvägskommunikation mellan en klient och en server. Denna process liknar det sätt på vilket samtal på din telefon sker: först upprättar du en anslutning och sedan kan du börja kommunicera med varandra. WebSocket-protokollet används nästan överallt - från webbläsarspel med flera spelare till chattapplikationer.
Den här artikeln visar hur du skapar ett WebSocket-protokoll och använder det för att kommunicera med flera användare.
Förutsättningar
Innan du går vidare till att skapa och använda ett WebSocket-protokoll måste du först installera några saker som krävs för denna process. Det första du behöver installera är Node.js, en serverplattform som konverterar JavaScript-programmeringsspråket till maskinkod som låter dig köra JavaScript direkt på din dator. För att installera Node.js, Windows-användare kan helt enkelt gå till den officiella noden.js webbplats och klicka på den gröna LTS-knappen som finns i mitten av skärmen.
För Linux- och macOS-användare klickar du på Nedladdningar avsnitt i underrubriken på webbplatsen.
Efter att ha öppnat Nedladdningar avsnitt kommer du att se installationsfiler för alla tre stora plattformarna. Välj ett paket som stöds av ditt system.
Kör installationsprogrammet som medföljer de nedladdade filerna och Node.js kommer att installeras på din dator. För att kontrollera om programmet har installerats öppnar du terminalen och ger följande kommando:
$ node -v
Efter installation av Node.js, du har nu tillgång till olika JavaScript-moduler, vilket gör ditt arbete mer effektivt på lång sikt. Öppna katalogen där du vill skapa din klient- och serverarkitektur, öppna sedan terminalen i den katalogen och kör följande kommando:
$ npm init -y
Detta kommando används för att skapa paketet.json-fil som låter dig ställa in och installera en annan nod.js-paket. Installera protokollpaketet WebSocket genom att utfärda följande kommando i terminalen:
$ npm installera ws
Skapa tre filer, kallas index.html, klient.js och server.js. Som anges av namnen är dessa JavaScript-filer klient- och serverarkitekturen för vårt WebSocket-protokoll. Nu kan vi äntligen börja skriva koden för våra klient- och serverapplikationer.
Skapa en WebSocket-server
För att skapa en WebSocket-server börjar vi med att skriva koden för servern. Öppna server.js fil som du skapade i din textredigerare eller IDE i föregående avsnitt och ange följande rader i filen.
const WebSocket = kräver ('ws');const ws = ny WebSocket.Server (port: 8080);
trösta.log ("Server Started");
ws.på ('anslutning', (wss) =>
trösta.log ("En ny klient ansluten")
wss.skicka ('Välkommen till servern!');
wss.på ('meddelande', (meddelande) =>
trösta.logg ('Server mottagen: $ meddelande');
wss.skicka ('Fick ditt meddelande:' + meddelande);
);
);
Nu kommer vi att förklara vad varje rad gör mer detaljerat.
Kodförklaring
Som tidigare nämnts finns det några inbyggda moduler tillgängliga i Node.js som gör ditt arbete mycket lättare. För att importera dessa moduler använder vi behöva nyckelord.
const WebSocket = kräver ('ws');const ws = ny WebSocket.Server (port: 8080);
trösta.log ("Server Started");
Den första raden används för att importera noden.js WebSocket-modul. Med hjälp av denna modul, i nästa rad, skapar vi vår WebSocket-server, som lyssnar på port 8080. De trösta.logga() line är helt enkelt där för att meddela oss att servern har startat. Du kommer att se detta visas i din terminal när du kör följande kommando i terminalen:
$ nodserver
I nästa rad skapar vi en anslutning mellan servern och klienten.
ws.på ('anslutning', (wss) =>trösta.log ("En ny klient ansluten")
);
Efter att en anslutning har upprättats, kommer wss.send () -linjen skickar ett meddelande till klienten. I det här fallet är meddelandet ”Välkommen till servern.”
wss.skicka ('Välkommen till servern!');Slutligen, wss.on ('meddelande') är för servern att ta emot meddelandet från klienten. För bekräftelse skickar servern detta meddelande tillbaka till klienten på sista raden.
wss.på ('meddelande', (meddelande) =>trösta.logg ('Server mottagen: $ meddelande');
wss.skicka ('Fick ditt meddelande:' + meddelande);
);
Skapa en WebSocket-klient
För klientsidan behöver vi både indexet.html-fil och klienten.js-fil. Naturligtvis kan du helt enkelt lägga till innehållet från klienten.js-filen i ditt index.html-fil, men jag föredrar att hålla dem åtskilda. Låt oss först titta på klienten.js-kod. Öppna filen och ange följande rader inuti filen:
const socket = ny WebSocket ('ws: // localhost: 8080');uttag.addEventListener ('öppen', () =>
trösta.log ('Ansluten till servern!');
);
uttag.addEventListener ('meddelande', (msg) =>
trösta.log ('Kund mottagen: $ msg.data');
);
const sendMsg = () =>
uttag.skicka ('Hur går det amigo!');
Kodförklaring
Som med servern.js, vi kommer att skapa en ny WebSocket som lyssnar på port 8080, som kan ses i lokal värd: 8080 avsnitt av koden.
const socket = ny WebSocket ('ws: // localhost: 8080');I nästa rad, addEventListener får din klient att lyssna på event som händer just nu. I det här fallet skulle det vara att skapa och starta servern. När anslutningen har upprättats skickar klienten ett meddelande till terminalen.
uttag.addEventListener ('open', () =>trösta.log ('Ansluten till servern!');
);
Återigen lyssnar klienten på alla händelser som för närvarande händer. När servern skickar ett meddelande får klienten detta och visar sedan meddelandet i terminalen.
uttag.addEventListener ('meddelande', (msg) =>trösta.log ('Klient mottagen: $ msg.data');
);
De sista raderna är helt enkelt en funktion där klienten skickar ett meddelande till servern. Vi ansluter detta till en knapp i vår html-fil för en bättre förståelse för hur detta fungerar.
const sendMsg = () =>uttag.skicka ('Hur går det amigo!');
Förbereder en HTML-fil
Slutligen öppna indexet.html-fil och lägg till en referens till din klient.js-filen inuti den. I mitt fall kommer jag helt enkelt att lägga till följande kodrader:
Som du kan se i raderna nedan, src (inuti skripttaggen) hänvisar till klientens javascriptfil. SendMsg-funktionen, som skapades i klienten.js-filen, har också kopplats till knappens onClick-funktion.
Att sätta ihop allt
Du kan nu börja testa din klient- och serverarkitektur. Öppna först terminalen och kör följande kommando för att starta din server:
$ nodserver
När du har startat din server, öppna den katalog där ditt index finns.html-filen finns och dubbelklicka på den för att öppna den i din webbläsare. Följande meddelande visas i terminalen om att en klient har anslutit:
Du kan också kontrollera meddelanden som skickas från servern till klienten genom att trycka på högerklicka på knappen och sedan öppna Inspektera fönster. Klicka på i det här fönstret Trösta avsnittet, och du kommer att kunna se meddelanden som skickas från servern.
När du väl har klickat på knappen kommer både servern och klienten att kunna skicka och ta emot meddelanden till och från varandra.
Server:
Klient:
Voilà, din WebSocket-anslutning har upprättats!
Slutsats
WebSocket-protokollet är ett utmärkt sätt att skapa kommunikation mellan en klient och en server. Detta protokoll används i flera fält, inklusive webbläsarspel med flera spelare, chattsystem på olika sociala medieplattformar och till och med samarbetsprocesser mellan kodare.
