Phenquestions
Protokol WebSocket omogoča dvosmerno komunikacijo med odjemalcem in strežnikom. Ta postopek je podoben načinu, kako potekajo klici v vašem telefonu: najprej vzpostavite povezavo, nato pa lahko začnete medsebojno komunicirati. Protokol WebSocket se uporablja skoraj povsod - od brskalniških iger za več igralcev do aplikacij za klepet.
Ta članek prikazuje, kako ustvariti protokol WebSocket in ga uporabiti za komunikacijo z več uporabniki.
Pogoji
Preden nadaljujete s postopkom ustvarjanja in uporabe protokola WebSocket, morate najprej namestiti nekaj stvari, ki so potrebne za ta postopek. Prva stvar, ki jo morate namestiti, je Node.js, strežniška platforma, ki pretvori programski jezik JavaScript v strojno kodo, ki omogoča zagon JavaScripta neposredno v računalniku. Če želite namestiti Node.js, lahko uporabniki sistema Windows preprosto odprejo uradno Node.js in kliknite na zeleni gumb LTS na sredini zaslona.
Za uporabnike Linuxa in macOS kliknite na Prenosi v podnaslovu spletnega mesta.
Po odprtju Prenosi boste videli namestitvene datoteke za vse tri glavne platforme. Izberite paket, ki ga podpira vaš sistem.
Zaženite namestitveni program, ki je priložen prenesenim datotekam, in Node.js bo nameščen v vašem računalniku. Če želite preveriti, ali je program nameščen, odprite terminal in izdajte naslednji ukaz:
$ vozlišče -v
Po namestitvi Node.js, zdaj imate dostop do različnih modulov JavaScript, ki bodo vaše delo dolgoročno učinkovitejše. Odprite imenik, v katerem želite ustvariti odjemalsko in strežniško arhitekturo, nato odprite terminal znotraj tega imenika in zaženite naslednji ukaz:
$ npm init -y
Ta ukaz se uporablja za ustvarjanje paketa.json, ki vam omogoča nastavitev in namestitev različnih Node.js. Namestite paket protokola WebSocket, tako da v terminal izdate naslednji ukaz:
$ npm namestite ws
Ustvarite tri datoteke, imenovane indeks.html, odjemalec.js in strežnik.js. Kot je razvidno iz imen, so te datoteke JavaScript odjemalska in strežniška arhitektura našega protokola WebSocket. Zdaj lahko končno začnemo pisati kodo odjemalskih in strežniških aplikacij.
Ustvarjanje strežnika WebSocket
Če želite ustvariti strežnik WebSocket, začnemo s pisanjem kode strežnika. Odprite strežnik.js datoteko, ki ste jo ustvarili v urejevalniku besedil ali IDE v prejšnjem razdelku, in vnesite naslednje vrstice v datoteko.
const WebSocket = require ('ws');const ws = nova WebSocket.Strežnik (vrata: 8080);
konzola.log ("Strežnik zagnan");
ws.on ('povezava', (wss) =>
konzola.log ("Povezan je nov odjemalec")
wss.send ('Dobrodošli v strežniku!');
wss.on ('sporočilo', (sporočilo) =>
konzola.log ('Prejeto v strežnik: $ message');
wss.send ('Imam vaše sporočilo:' + sporočilo);
);
);
Zdaj bomo podrobneje razložili, kaj počne vsaka vrstica.
Razlaga kode
Kot smo že omenili, je v Node na voljo nekaj vgrajenih modulov.js, ki vam olajšajo delo. Za uvoz teh modulov bomo uporabili zahtevajo ključna beseda.
const WebSocket = require ('ws');const ws = nova WebSocket.Strežnik (vrata: 8080);
konzola.log ("Strežnik zagnan");
Prva vrstica se uporablja za uvoz vozlišča.js modul WebSocket. Z uporabo tega modula v naslednji vrstici ustvarimo strežnik WebSocket, ki posluša na vratih 8080. The konzola.dnevnik () line je preprosto tam, da nas obvestite, da se je strežnik začel. To se bo pojavilo v vašem terminalu, ko v terminalu zaženete naslednji ukaz:
$ node strežnik
V naslednji vrstici vzpostavljamo povezavo med strežnikom in odjemalcem.
ws.on ('povezava', (wss) =>konzola.log ("Povezan je nov odjemalec")
);
Po vzpostavljeni povezavi wss.vrstica send () pošlje sporočilo odjemalcu. V tem primeru se prikaže sporočilo »Dobrodošli na strežniku."
wss.send ('Dobrodošli v strežniku!');Končno, wss.on ('message') je, da strežnik prejme sporočilo od odjemalca. Za potrditev strežnik pošlje to sporočilo stranki v zadnji vrstici nazaj.
wss.on ('sporočilo', (sporočilo) =>konzola.log ('Prejeto v strežnik: $ message');
wss.send ('Imam vaše sporočilo:' + sporočilo);
);
Ustvarjanje odjemalca WebSocket
Za stranko potrebujemo oba indeksa.html in odjemalca.js. Seveda lahko preprosto dodate vsebino od odjemalca.js v vaš indeks.html, vendar jih raje hranim ločeno. Najprej si oglejmo stranko.js koda. Odprite datoteko in v njej vnesite naslednje vrstice:
const vtičnica = nova WebSocket ('ws: // localhost: 8080');vtičnica.addEventListener ('odprto', () =>
konzola.log ('Povezan s strežnikom!');
);
vtičnica.addEventListener ('message', (msg) =>
konzola.log ('Prejeto odjemalca: $ msg.podatki ');
);
const sendMsg = () =>
vtičnica.send ('Hows, da gre amigo!');
Razlaga kode
Tako kot pri strežniku.js, ustvarili bomo novo WebSocket, ki posluša vrata 8080, kar je razvidno iz localhost: 8080 odsek kode.
const vtičnica = nova WebSocket ('ws: // localhost: 8080');V naslednji vrstici, addEventListener omogoča, da vaša stranka posluša vse trenutne dogodke. V tem primeru bi to bilo ustvarjanje in zagon strežnika. Ko je povezava vzpostavljena, odjemalec na terminal pošlje sporočilo.
vtičnica.addEventListener ('odprto', () =>konzola.log ('Povezan s strežnikom!');
);
Stranka še enkrat posluša vse trenutne dogodke. Ko strežnik pošlje sporočilo, ga odjemalec prejme in nato prikaže sporočilo v terminalu.
vtičnica.addEventListener ('message', (msg) =>konzola.log ('Prejeto odjemalca: $ msg.podatki ');
);
Zadnjih nekaj vrstic je preprosto funkcija, pri kateri odjemalec pošlje sporočilo strežniku. To bomo povezali z gumbom v naši datoteki html, da bomo bolje razumeli, kako to deluje.
const sendMsg = () =>vtičnica.send ('Hows, da gre amigo!');
Priprava datoteke HTML
Na koncu odprite indeks.html in dodajte sklic na odjemalca.js v njej. V mojem primeru bom preprosto dodal naslednje vrstice kode:
Kot lahko vidite v spodnjih vrsticah, src (znotraj oznake skripta) se nanaša na odjemalsko datoteko javascript. Funkcija sendMsg, ki je bila ustvarjena v odjemalcu.js, je bila povezana tudi s funkcijo gumba onClick.
Vse skupaj
Zdaj lahko začnete preizkušati svojo odjemalsko in strežniško arhitekturo. Najprej odprite terminal in zaženite naslednji ukaz, da zaženete strežnik:
$ node strežnik
Po zagonu strežnika odprite imenik, v katerem je indeks.html in dvakrat kliknite nanjo, da jo odprete v brskalniku. V terminalu se bo prikazalo naslednje sporočilo, da se je stranka povezala:
Sporočila, poslana s strežnika odjemalcu, lahko preverite tudi tako, da pritisnete gumb z desnim klikom in nato odprete Preglejte okno. V tem oknu kliknite Konzola lahko videli sporočila, poslana s strežnika.
Ko kliknete na gumb, bosta strežnik in odjemalec lahko medsebojno pošiljala in prejemala sporočila.
Strežnik:
Naročnik:
Voilà, vaša povezava WebSocket je vzpostavljena!
Zaključek
Protokol WebSocket je odličen način za vzpostavitev komunikacije med odjemalcem in strežnikom. Ta protokol se uporablja na več področjih, vključno z brskalniškimi igrami za več igralcev, klepetnimi sistemi različnih platform socialnih medijev in celo procesi sodelovanja med kodirniki.
