WebSocket -eksempelprogram

Websocket-protokollen gjør det mulig å oppstå toveis kommunikasjon mellom en klient og en server. Denne prosessen ligner på måten samtaler på telefonen din finner sted: Først oppretter du en forbindelse, og deretter kan du begynne å kommunisere med hverandre. Websocket -protokollen brukes nesten overalt - fra multiplayer nettleserspill til chat -applikasjoner.

Denne artikkelen viser deg hvordan du lager 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 noen få 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 noden.JS -nettstedet og klikk på den grønne LTS -knappen som finnes midt på skjermen.

For Linux- og macOS -brukere, klikker du på Nedlastinger Seksjon i underoverskrift på nettstedet.

Etter å ha åpnet Nedlastinger Seksjonen, vil du se installasjonsfiler for alle tre hovedplattformene. Velg en pakke som støttes av systemet ditt.

Kjør installasjonsprogrammet som følger med de nedlastede filene, og noden.JS vil bli installert på datamaskinen din. For å sjekke om programmet er installert, åpner du terminalen og utsted følgende kommando:

$ node -v

Etter å ha installert node.JS, du har nå tilgang til forskjellige JavaScript -moduler, noe som vil gjøre arbeidet ditt mer effektivt på lang sikt. Åpne katalogen du vil opprette din klient- og serverarkitektur, og åpne deretter terminalen inne i den katalogen og kjøre følgende kommando:

$ npm init -y

Denne kommandoen brukes til å lage pakken.JSON -fil som lar deg konfigurere og installere forskjellige noder.JS -pakker. Installer websocket -protokollpakken ved å utstede følgende kommando i terminalen:

$ npm installer WS

Lage tre filer, kalt indeks.HTML, klient.JS, og server.JS. Som indikert med navnene, er disse JavaScript -filene klienten og serverarkitekturen til vår websocket -protokoll. Nå kan vi endelig begynne å skrive koden til våre klient- og serverapplikasjoner.

Opprette en websocket -server

For å opprette en websocket -server, starter vi med å skrive koden for serveren. Åpne server.JS fil som du opprettet i tekstredigereren 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.Log ("Server startet");
ws.på ('tilkobling', (wss) =>
konsoll.Logg ("En ny klient tilkoblet")
WSS.Send ('Velkommen til serveren!');
WSS.på ('melding', (melding) =>
konsoll.Log ('server mottatt: $ melding');
WSS.Send ('Fikk meldingen din:' + melding);
);
);

Nå vil vi forklare hva hver linje gjør mer detaljert.

Kodeforklaring

Som nevnt tidligere, er det noen innebygde moduler tilgjengelig i Node.JS som gjør arbeidet ditt mye enklere. For å importere disse modulene, vil vi bruke krever nøkkelord.

const webSocket = krever ('ws');
const ws = ny websocket.Server (port: 8080);
konsoll.Log ("Server startet");

Den første linjen brukes til å importere noden.JS WebSocket -modul. Ved å bruke denne modulen, i neste linje, oppretter vi vår websocket -server, som lytter på port 8080. De konsoll.Logg() Linjen er ganske enkelt der for å gi oss beskjed om at serveren har startet. Du vil se at dette vises i terminalen din når du kjører følgende kommando i terminalen:

$ node -server

I neste linje etablerer vi en forbindelse mellom serveren og klienten.

ws.på ('tilkobling', (wss) =>
konsoll.Logg ("En ny klient tilkoblet")
);

Etter at det er opprettet en forbindelse, WSS.Send () Line sender en melding til klienten. I dette tilfellet er meldingen “velkommen til serveren.”

WSS.Send ('Velkommen til serveren!');

Endelig WSS.på ('melding') er at serveren skal motta meldingen fra klienten. For bekreftelse sender serveren denne meldingen tilbake til klienten i den siste linjen.

WSS.på ('melding', (melding) =>
konsoll.Log ('server mottatt: $ melding');
WSS.Send ('Fikk meldingen din:' + melding);
);

Opprette en websocket -klient

For klientsiden trenger vi både indeksen.HTML -fil og klienten.JS -fil. Selvfølgelig kan du ganske enkelt legge til innholdet fra klienten.JS -fil i indeksen din.HTML -fil, men jeg foretrekker å holde dem adskilt. La oss først se på klienten.JS -kode. Åpne filen og skriv inn følgende linjer inne i filen:

const socket = new WebSocket ('ws: // localhost: 8080');
stikkontakt.AddEventListener ('åpen', () =>
konsoll.Logg ('koblet til serveren!');
);
stikkontakt.AddEventListener ('melding', (msg) =>
konsoll.Logg ('Klient mottatt: $ MSG.data');
);
const sendmsg = () =>
stikkontakt.Send ('Hows It Going Amigo!');

Kodeforklaring

Som med serveren.JS, vi lager en ny websocket som lytter til port 8080, som kan sees i Localhost: 8080 delen av koden.

const socket = new WebSocket ('ws: // localhost: 8080');

I neste linje, AddEventListener Får klienten til å lytte til eventuelle hendelser som for øyeblikket skjer. I dette tilfellet ville det opprette og starte serveren. Når tilkoblingen er etablert, sender klienten en melding til terminalen.

stikkontakt.AddEventListener ('åpen', () =>
konsoll.Logg ('koblet til serveren!');
);

Nok en gang lytter klienten til alle hendelser som for øyeblikket skjer. Når serveren sender en melding, mottar klienten dette 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 vil koble dette til en knapp i HTML -filen vår for en bedre forståelse av hvordan dette fungerer.

const sendmsg = () =>
stikkontakt.Send ('Hows It Going Amigo!');

Utarbeide en HTML -fil

Til slutt, åpne indeksen.HTML -fil og legg til en referanse til klienten din.JS -fil inne i den. I mitt tilfelle vil jeg ganske enkelt legge til følgende kodelinjer:

Send melding til serveren

Som du kan se i linjene nedenfor, src (Inne i skriptet) refererer til klienten JavaScript -filen. Sendmsg -funksjonen, som ble opprettet i klienten.JS -fil, har også blitt koblet til knappens onClick -funksjon.

Send melding til serveren

Sette alt sammen

Du kan nå begynne å teste din klient- og serverarkitektur. Først åpner du terminalen og kjør følgende kommando for å starte serveren din:

$ node -server

Etter å ha startet serveren din, åpner du katalogen som indeksen din.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 er sendt fra serveren til klienten ved å trykke på høyreklikk-knappen og deretter åpne Undersøke vindu. I dette vinduet klikker du på Konsoll seksjon, og du vil kunne se meldingene sendt 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 -tilkobling er opprettet!

Konklusjon

Websocket -protokollen er en utmerket måte å etablere kommunikasjon mellom en klient og en server. Denne protokollen brukes på flere felt, inkludert nettleserspill, chat -systemer med forskjellige sosiale medieplattformer og til og med samarbeidsprosesser mellom kodere.