Phenquestions
Protokol WebSocket omogućuje dvosmjernu komunikaciju između klijenta i poslužitelja. Ovaj je postupak sličan načinu na koji se odvijaju pozivi na vašem telefonu: prvo uspostavite vezu, a zatim možete započeti međusobnu komunikaciju. Protokol WebSocket koristi se gotovo svugdje - od igara preglednika za više igrača do aplikacija za chat.
Ovaj vam članak pokazuje kako stvoriti protokol WebSocket i koristiti ga za komunikaciju s više korisnika.
Preduvjeti
Prije nego što prijeđete na postupak stvaranja i upotrebe protokola WebSocket, prvo morate instalirati nekoliko stvari koje su potrebne za ovaj postupak. Prva stvar koju trebate instalirati je Node.js, platforma na strani poslužitelja koja pretvara programski jezik JavaScript u strojni kod koji vam omogućuje pokretanje JavaScript-a izravno na vašem računalu. Da biste instalirali Node.js, korisnici Windowsa mogu jednostavno otići na službeni Node.js i kliknite zeleni gumb LTS koji se nalazi u sredini zaslona.
Za korisnike Linuxa i MacOS-a kliknite na Preuzimanja odjeljak u podnaslovu web mjesta.
Nakon otvaranja Preuzimanja vidjet ćete instalacijske datoteke za sve tri glavne platforme. Odaberite paket koji vaš sustav podržava.
Pokrenite instalacijski program koji dolazi s preuzetim datotekama i Node.js bit će instaliran na vašem računalu. Da biste provjerili je li program instaliran, otvorite terminal i izdajte sljedeću naredbu:
$ čvor -v
Nakon instalacije Node.js, sada imate pristup raznim JavaScript modulima, što će vaš rad dugoročno učiniti učinkovitijim. Otvorite direktorij u kojem želite stvoriti arhitekturu klijenta i poslužitelja, a zatim otvorite terminal unutar tog direktorija i pokrenite sljedeću naredbu:
$ npm init -y
Ova se naredba koristi za stvaranje paketa.json datoteku koja vam omogućuje postavljanje i instaliranje različitih Node.js paketi. Instalirajte paket protokola WebSocket izdavanjem sljedeće naredbe u terminalu:
$ npm instalirati ws
Stvorite tri datoteke, nazvane indeks.html, klijent.js i poslužitelj.js. Kao što naznačuju nazivi, ove JavaScript datoteke su arhitektura klijenta i poslužitelja našeg protokola WebSocket. Sada napokon možemo početi pisati kod svojih klijentskih i poslužiteljskih aplikacija.
Stvaranje WebSocket poslužitelja
Da bismo stvorili WebSocket poslužitelj, započet ćemo s pisanjem koda za poslužitelj. Otvori poslužitelju.js datoteku koju ste stvorili u programu za uređivanje teksta ili IDE u prethodnom odjeljku i unesite sljedeće redove u datoteku.
const WebSocket = zahtijeva ('ws');const ws = novi WebSocket.Poslužitelj (port: 8080);
konzola.zapisnik ("Poslužitelj pokrenut");
ws.on ('veza', (wss) =>
konzola.zapisnik ("Novi klijent povezan")
wss.send ('Dobrodošli na poslužitelj!');
wss.on ('poruka', (poruka) =>
konzola.log ('Primljeno na poslužitelj: $ message');
wss.send ('Imam vašu poruku:' + poruka);
);
);
Sad ćemo detaljnije objasniti što svaka linija radi.
Objašnjenje koda
Kao što je prethodno spomenuto, u Nodeu su dostupni neki ugrađeni moduli.js koji vam znatno olakšavaju posao. Za uvoz ovih modula koristit ćemo zahtijevati ključna riječ.
const WebSocket = zahtijeva ('ws');const ws = novi WebSocket.Poslužitelj (port: 8080);
konzola.zapisnik ("Poslužitelj pokrenut");
Prvi redak koristi se za uvoz čvora.js modul WebSocket. Koristeći ovaj modul, u sljedećem retku kreiramo naš WebSocket poslužitelj koji sluša na priključku 8080. The konzola.zapisnik () linija jednostavno postoji kako bi nas obavijestila da je poslužitelj počeo. Vidjet ćete da se ovo pojavljuje u vašem terminalu kada pokrenete sljedeću naredbu u terminalu:
$ čvor poslužitelj
U sljedećem retku uspostavljamo vezu između poslužitelja i klijenta.
ws.on ('veza', (wss) =>konzola.zapisnik ("Novi klijent povezan")
);
Nakon uspostavljanja veze, wss.redak send () šalje poruku klijentu. U ovom je slučaju poruka „Dobro došli na poslužitelj."
wss.send ('Dobrodošli na poslužitelj!');Napokon, wss.on ('poruka') je da poslužitelj prima poruku od klijenta. Za potvrdu, poslužitelj u zadnjem retku ovu poruku vraća klijentu.
wss.on ('poruka', (poruka) =>konzola.log ('Primljeno na poslužitelj: $ message');
wss.send ('Imam vašu poruku:' + poruka);
);
Stvaranje klijenta WebSocket
Za klijentsku stranu trebamo oba indeksa.html datoteku i klijenta.js datoteku. Naravno, možete jednostavno dodati sadržaj od klijenta.js u vaš indeks.html datoteku, ali radije ih držim odvojene. Pogledajmo prvo klijenta.js kôd. Otvorite datoteku i u nju unesite sljedeće retke:
const socket = novi WebSocket ('ws: // localhost: 8080');utičnica.addEventListener ('open', () =>
konzola.log ('Povezano s poslužiteljem!');
);
utičnica.addEventListener ('poruka', (msg) =>
konzola.log ('Klijent primljen: $ msg.podaci');
);
const sendMsg = () =>
utičnica.send ('Kako se to čini amigo!');
Objašnjenje koda
Kao kod poslužitelja.js, stvorit ćemo novi WebSocket koji preslušava port 8080, što se može vidjeti u lokalnihost: 8080 odjeljak koda.
const socket = novi WebSocket ('ws: // localhost: 8080');U sljedećem retku, addEventListener tjera vašeg klijenta da sluša sve događaje koji se trenutno događaju. U ovom slučaju to bi bilo stvaranje i pokretanje poslužitelja. Nakon uspostavljanja veze, klijent na terminal šalje poruku.
utičnica.addEventListener ('open', () =>konzola.log ('Povezano s poslužiteljem!');
);
Još jednom, klijent sluša sve događaje koji se trenutno događaju. Kada poslužitelj pošalje poruku, klijent to prima, a zatim prikazuje poruku u terminalu.
utičnica.addEventListener ('poruka', (msg) =>konzola.log ('Klijent primljen: $ msg.podaci');
);
Posljednjih nekoliko redaka jednostavno je funkcija u kojoj klijent šalje poruku poslužitelju. To ćemo povezati s gumbom u našoj html datoteci radi boljeg razumijevanja kako to funkcionira.
const sendMsg = () =>utičnica.send ('Kako se to čini amigo!');
Priprema HTML datoteke
Na kraju otvorite indeks.html datoteku i dodajte referencu na svog klijenta.js unutar nje. U mom slučaju jednostavno ću dodati sljedeće retke koda:
Kao što možete vidjeti u donjim redovima, src (unutar oznake skripte) odnosi se na klijentsku javascript datoteku. Funkcija sendMsg koja je stvorena u klijentu.js, također je povezana s funkcijom onClick gumba.
Sve zajedno
Sada možete započeti testiranje arhitekture klijenta i poslužitelja. Prvo otvorite terminal i pokrenite sljedeću naredbu za pokretanje poslužitelja:
$ čvor poslužitelj
Nakon pokretanja poslužitelja otvorite direktorij u kojem se nalazi vaš indeks.html datoteka, i kliknite je dvaput da biste je otvorili u pregledniku. Vidjet ćete da se na terminalu pojavljuje sljedeća poruka u kojoj se navodi da se klijent povezao:
Poruke poslane s poslužitelja klijentu također možete provjeriti pritiskom na gumb desnim klikom i otvaranjem Pregledati prozor. U ovom prozoru kliknite Konzola i moći ćete vidjeti poruke poslane s poslužitelja.
Jednom kada kliknete gumb, i poslužitelj i klijent moći će međusobno slati i primati poruke.
Poslužitelj:
Klijent:
Voilà, uspostavljena je vaša WebSocket veza!
Zaključak
Protokol WebSocket izvrstan je način uspostavljanja komunikacije između klijenta i poslužitelja. Ovaj se protokol koristi u nekoliko polja, uključujući igre preglednika za više igrača, sustave za chat različitih platformi društvenih medija, pa čak i procese suradnje između kodera.
