Phenquestions
WebSocket-protokollen tillater toveiskommunikasjon mellom en klient og en server. Denne prosessen ligner måten samtaler på telefonen foregår på: først oppretter du en forbindelse, og deretter kan du begynne å kommunisere med hverandre. WebSocket-protokollen brukes nesten overalt - fra flerspillerleserspill til chatapplikasjoner.
Denne artikkelen viser hvordan du oppretter en WebSocket-protokoll og bruker den til å kommunisere med flere brukere.
Forutsetninger
Før du går videre til prosessen med å lage og bruke en WebSocket-protokoll, må du først installere et par ting som kreves for denne prosessen. Det første du trenger å installere er Node.js, en plattform på serversiden som konverterer JavaScript-programmeringsspråket til maskinkode som lar deg kjøre JavaScript direkte på datamaskinen din. For å installere Node.js, Windows-brukere kan ganske enkelt gå til den offisielle Node.js nettsted og klikk på den grønne LTS-knappen som du finner midt på skjermen.
For Linux- og macOS-brukere, klikk på Nedlastinger delen i underoverskriften på nettstedet.
Etter at du har åpnet Nedlastinger delen, vil du se installasjonsfiler for alle de tre store plattformene. Velg en pakke som støttes av systemet ditt.
Kjør installasjonsprogrammet som følger med de nedlastede filene, og Node.js blir installert på datamaskinen din. For å sjekke om programmet er installert, åpner du terminalen og gir følgende kommando:
$ node -v
Etter installasjon av Node.js, du har nå tilgang til forskjellige JavaScript-moduler, som vil gjøre arbeidet ditt mer effektivt på sikt. Åpne katalogen der du vil opprette klient- og serverarkitektur, åpne deretter terminalen i katalogen og kjør følgende kommando:
$ npm init -y
Denne kommandoen brukes til å lage pakken.json-fil som lar deg sette opp og installere en annen node.js-pakker. Installer WebSocket-protokollpakken ved å utstede følgende kommando i terminalen:
$ npm installer ws
Lag tre filer, kalt indeks.html, klient.js og server.js. Som angitt av navnene, er disse JavaScript-filene klient- og serverarkitekturen til WebSocket-protokollen. Nå kan vi endelig begynne å skrive koden til klient- og serverapplikasjonene våre.
Opprette en WebSocket Server
For å opprette en WebSocket-server begynner vi med å skrive koden for serveren. Åpne server.js filen du opprettet i teksteditoren eller IDE i forrige seksjon, og skriv inn følgende linjer i filen.
const WebSocket = krever ('ws');const ws = ny WebSocket.Server (port: 8080);
konsoll.logg ("Server startet");
ws.på ('forbindelse', (wss) =>
konsoll.logg ("A new Client Connected")
wss.send ('Velkommen til serveren!');
wss.på ('melding', (melding) =>
konsoll.logg ('Server mottatt: $ melding');
wss.send ('Fikk din melding:' + melding);
);
);
Nå vil vi forklare hva hver linje gjør mer detaljert.
Kode Forklaring
Som nevnt tidligere, er det noen innebygde moduler tilgjengelig i Node.js som gjør arbeidet ditt mye lettere. For å importere disse modulene, bruker vi krever nøkkelord.
const WebSocket = krever ('ws');const ws = ny WebSocket.Server (port: 8080);
konsoll.logg ("Server startet");
Den første linjen brukes til å importere noden.js WebSocket-modul. Ved hjelp av denne modulen, i neste linje, oppretter vi vår WebSocket-server, som lytter på port 8080. De konsoll.Logg() line er rett og slett der for å fortelle oss at serveren har startet. Du vil se dette vises inne i terminalen din når du kjører følgende kommando i terminalen:
$ node server
I neste linje oppretter vi en forbindelse mellom serveren og klienten.
ws.på ('forbindelse', (wss) =>konsoll.logg ("A new Client Connected")
);
Etter at en forbindelse er etablert, vil wss.send () linje sender en melding til klienten. I dette tilfellet er meldingen “Velkommen til serveren.”
wss.send ('Velkommen til serveren!');Til slutt, wss.on ('melding') er for serveren å motta meldingen fra klienten. For bekreftelse sender serveren denne meldingen tilbake til klienten i siste linje.
wss.på ('melding', (melding) =>konsoll.logg ('Server mottatt: $ melding');
wss.send ('Fikk din melding:' + melding);
);
Opprette en WebSocket-klient
For klientsiden trenger vi begge indeksene.html-fil og klienten.js-fil. Selvfølgelig kan du bare legge til innholdet fra klienten.js-fil til indeksen din.html-fil, men jeg foretrekker å holde dem atskilt. La oss først se på klienten.js-kode. Åpne filen og skriv inn følgende linjer inne i filen:
const socket = ny WebSocket ('ws: // localhost: 8080');stikkontakt.addEventListener ('open', () =>
konsoll.logg ('Koblet til serveren!');
);
stikkontakt.addEventListener ('melding', (msg) =>
konsoll.logg ('Klient mottatt: $ msg.data');
);
const sendMsg = () =>
stikkontakt.send ('Hvordan går det amigo!');
Kode Forklaring
Som med serveren.js, vil vi lage en ny WebSocket som lytter til port 8080, som kan sees i lokal vert: 8080 delen av koden.
const socket = ny WebSocket ('ws: // localhost: 8080');I neste linje, addEventListener får klienten til å lytte til hendelser som for øyeblikket skjer. I dette tilfellet vil det være å opprette og starte serveren. Når forbindelsen er opprettet, sender klienten en melding til terminalen.
stikkontakt.addEventListener ('open', () =>konsoll.logg ('Koblet til serveren!');
);
Nok en gang lytter klienten til hendelser som for øyeblikket skjer. Når serveren sender en melding, mottar klienten denne og viser deretter meldingen i terminalen.
stikkontakt.addEventListener ('melding', (msg) =>konsoll.logg ('Klient mottatt: $ msg.data');
);
De siste linjene er ganske enkelt en funksjon der klienten sender en melding til serveren. Vi kobler dette til en knapp i html-filen for å få en bedre forståelse av hvordan dette fungerer.
const sendMsg = () =>stikkontakt.send ('Hvordan går det amigo!');
Forbereder en HTML-fil
Til slutt åpner du indeksen.html-fil og legg til en referanse til klienten din.js-filen inne i den. I mitt tilfelle vil jeg bare legge til følgende kodelinjer:
Som du kan se i linjene nedenfor, src (inne i skriptekoden) refererer til klientens javascript-fil. SendMsg-funksjonen, som ble opprettet i klienten.js-fil, har også blitt koblet til knappens onClick-funksjon.
Setter alt sammen
Du kan nå begynne å teste klient- og serverarkitekturen. Åpne først terminalen og kjør følgende kommando for å starte serveren:
$ node server
Når du har startet serveren din, åpner du katalogen der indeksen din ligger.html-filen er til stede, og dobbeltklikk på den for å åpne den i nettleseren din. Du vil se følgende melding vises i terminalen om at en klient har koblet seg til:
Du kan også sjekke meldingene som sendes fra serveren til klienten ved å trykke på høyreklikk-knappen og deretter åpne Undersøke vindu. Klikk på i dette vinduet Konsoll delen, og du vil kunne se meldingene som sendes fra serveren.
Når du klikker på knappen, vil både serveren og klienten kunne sende og motta meldinger til og fra hverandre.
Server:
Klient:
Voilà, din WebSocket-forbindelse er opprettet!
Konklusjon
WebSocket-protokollen er en utmerket måte å etablere kommunikasjon mellom en klient og en server. Denne protokollen brukes i flere felt, inkludert flerspiller-nettleserspill, chat-systemer på forskjellige sosiale medieplattformer, og til og med samarbeidsprosesser mellom kodere.
