Phenquestions
„WebSocket“ protokolas leidžia užmegzti abipusį ryšį tarp kliento ir serverio. Šis procesas yra panašus į skambučių jūsų telefonu būdą: pirmiausia užmezgate ryšį ir tada galite pradėti bendrauti vieni su kitais. „WebSocket“ protokolas naudojamas beveik visur - nuo kelių žaidėjų naršyklės žaidimų iki pokalbių programų.
Šiame straipsnyje parodyta, kaip sukurti „WebSocket“ protokolą ir naudoti jį bendraujant su keliais vartotojais.
Būtinos sąlygos
Prieš pereidami prie „WebSocket“ protokolo kūrimo ir naudojimo, pirmiausia turite įdiegti keletą dalykų, reikalingų šiam procesui. Pirmas dalykas, kurį reikia įdiegti, yra „Node“.„js“ - serverio platforma, kuri „JavaScript“ programavimo kalbą paverčia mašininiu kodu, leidžiančiu paleisti „JavaScript“ tiesiogiai kompiuteryje. Norėdami įdiegti mazgą.js, „Windows“ vartotojai gali tiesiog pereiti į oficialų mazgą.js svetainę ir spustelėkite žalią LTS mygtuką, esantį ekrano centre.
Jei naudojate „Linux“ ir „MacOS“ vartotojus, spustelėkite Atsisiuntimai skiltyje svetainės antraštėje.
Atidarius Atsisiuntimai skyriuje pamatysite visų trijų pagrindinių platformų diegimo failus. Pasirinkite paketą, kurį palaiko jūsų sistema.
Paleiskite diegimo programą, pateiktą su atsisiųstais failais, ir „Node“.js bus įdiegtas jūsų kompiuteryje. Norėdami patikrinti, ar programa įdiegta, atidarykite terminalą ir pateikite šią komandą:
$ mazgas -v
Įdiegę „Node“.js, dabar jūs turite prieigą prie įvairių „JavaScript“ modulių, kurie ilgainiui padarys jūsų darbą efektyvesnį. Atidarykite katalogą, kuriame norite sukurti savo kliento ir serverio architektūrą, tada atidarykite terminalą tame kataloge ir vykdykite šią komandą:
$ npm inic
Ši komanda naudojama paketui sukurti.json failas, leidžiantis nustatyti ir įdiegti skirtingus mazgus.js paketai. Įdiekite „WebSocket“ protokolo paketą, terminale išleisdami šią komandą:
$ npm įdiegti ws
Sukurkite tris failus, vadinamus indeksas.HTML, klientas.js ir serveris.js. Kaip rodo pavadinimai, šie „JavaScript“ failai yra mūsų „WebSocket“ protokolo kliento ir serverio architektūra. Dabar pagaliau galime pradėti rašyti kliento ir serverio programų kodą.
„WebSocket“ serverio kūrimas
Norėdami sukurti „WebSocket“ serverį, pradėsime rašydami serverio kodą. Atidaryk serverio.js failą, kurį sukūrėte savo teksto rengyklėje arba IDE ankstesniame skyriuje, ir failo viduje įveskite šias eilutes.
const „WebSocket“ = reikalauti ('ws');const ws = nauja „WebSocket“.Serveris (prievadas: 8080);
konsolė.žurnalas („Serveris paleistas“);
ws.įjungta ('ryšys', (wss) =>
konsolė.žurnalas („Prijungtas naujas klientas“)
wss.siųsti ('Sveiki atvykę į serverį!');
wss.on ('žinutė', (žinutė) =>
konsolė.žurnalas ('Gautas serveris: $ message');
wss.siųsti ('Got your Message:' + žinutė);
);
);
Dabar mes išsamiau paaiškinsime, ką daro kiekviena eilutė.
Kodo paaiškinimas
Kaip minėta anksčiau, „Node“ yra keletas įmontuotų modulių.js, kurie palengvina jūsų darbą. Norėdami importuoti šiuos modulius, naudosime reikalauti raktinis žodis.
const „WebSocket“ = reikalauti ('ws');const ws = nauja „WebSocket“.Serveris (prievadas: 8080);
konsolė.žurnalas („Serveris paleistas“);
Pirmoji eilutė naudojama mazgui importuoti.js „WebSocket“ modulis. Naudodamiesi šiuo moduliu kitoje eilutėje sukursime savo „WebSocket“ serverį, kuris klausosi 8080 prievado. The konsolė.žurnalas () eilutė yra tiesiog tam, kad praneštumėte mums, jog serveris paleistas. Tai pamatysite savo terminalo viduje, kai terminale paleisite šią komandą:
$ node serveris
Kitoje eilutėje mes nustatome ryšį tarp serverio ir kliento.
ws.įjungta ('ryšys', (wss) =>konsolė.žurnalas („Prijungtas naujas klientas“)
);
Užmezgus ryšį, wss.send () eilutė siunčia pranešimą klientui. Tokiu atveju pranešimas yra „Sveiki atvykę į serverį.“
wss.siųsti ('Sveiki atvykę į serverį!');Galiausiai, wss.„on“ (pranešimas) yra skirtas serveriui gauti pranešimą iš kliento. Norėdami patvirtinti, serveris siunčia šį pranešimą klientui paskutinėje eilutėje.
wss.on ('žinutė', (žinutė) =>konsolė.žurnalas ('Gautas serveris: $ message');
wss.siųsti ('Got your Message:' + žinutė);
);
„WebSocket“ kliento kūrimas
Kliento pusėje mums reikalingas indeksas.HTML failą ir klientą.js failas. Žinoma, galite tiesiog pridėti turinį iš kliento.js failą į savo indeksą.HTML failą, bet aš norėčiau juos laikyti atskirai. Pirmiausia pažvelkime į klientą.js kodas. Atidarykite failą ir failo viduje įveskite šias eilutes:
const lizdas = new WebSocket ('ws: // localhost: 8080');lizdas.addEventListener ('open', () =>
konsolė.žurnalas ('Prisijungta prie serverio!');
);
lizdas.addEventListener ('message', (msg) =>
konsolė.žurnalas ('Klientas gavo: $ msg.duomenys ');
);
const sendMsg = () =>
lizdas.siųsti ('Kaip tai vyksta amigo!');
Kodo paaiškinimas
Kaip su serveriu.js, sukursime naują „WebSocket“, kuris klausosi 8080 prievado, kurį galima pamatyti vietinis šeimininkas: 8080 skyriaus kodą.
const lizdas = new WebSocket ('ws: // localhost: 8080');Kitoje eilutėje, addEventListener priverčia jūsų klientą klausytis visų šiuo metu vykstančių įvykių. Šiuo atveju tai būtų serverio kūrimas ir paleidimas. Užmezgus ryšį, klientas išsiunčia pranešimą į terminalą.
lizdas.addEventListener ('open', () =>konsolė.žurnalas ('Prisijungta prie serverio!');
);
Dar kartą klientas išklauso visus šiuo metu vykstančius įvykius. Kai serveris siunčia pranešimą, klientas jį gauna ir tada parodo pranešimą terminale.
lizdas.addEventListener ('message', (msg) =>konsolė.žurnalas ('Klientas gavo: $ msg.duomenys ');
);
Kelios paskutinės eilutės yra tiesiog funkcija, kai klientas siunčia pranešimą serveriui. Mes susiesime tai su mygtuku mūsų HTML faile, kad geriau suprastume, kaip tai veikia.
const sendMsg = () =>lizdas.siųsti ('Kaip tai vyksta amigo!');
HTML failo paruošimas
Galiausiai atidarykite indeksą.HTML failą ir pridėkite nuorodą į savo klientą.js failas jo viduje. Mano atveju aš tiesiog pridėsiu šias kodo eilutes:
Kaip matote žemiau esančiose eilutėse, src (scenarijaus žymos viduje) nurodo kliento „JavaScript“ failą. „SendMsg“ funkcija, sukurta kliente.js failas, taip pat buvo prijungtas prie mygtuko onClick funkcijos.
Viskas kartu
Dabar galite pradėti testuoti kliento ir serverio architektūrą. Pirmiausia atidarykite terminalą ir paleiskite šią komandą, kad paleistumėte savo serverį:
$ node serveris
Paleidę serverį atidarykite katalogą, kuriame yra jūsų rodyklė.HTML failas yra ir dukart spustelėkite jį, kad atidarytumėte jį savo naršyklėje. Terminale pamatysite tokį pranešimą, nurodantį, kad klientas prisijungė:
Taip pat galite patikrinti pranešimus, siunčiamus iš serverio klientui, paspausdami dešinio pelės klavišo mygtuką ir atidarydami Apžiūrėkite langas. Šiame lange spustelėkite Konsolė skyriuje, ir jūs galėsite pamatyti iš serverio išsiųstus pranešimus.
Kai spustelėsite mygtuką, tiek serveris, tiek klientas galės siųsti ir gauti pranešimus vienas kitam ir vienas iš kito.
Serveris:
Klientas:
„Voilà“, jūsų „WebSocket“ ryšys buvo užmegztas!
Išvada
„WebSocket“ protokolas yra puikus būdas užmegzti ryšį tarp kliento ir serverio. Šis protokolas naudojamas keliose srityse, įskaitant daugelio žaidėjų naršyklių žaidimus, įvairių socialinės žiniasklaidos platformų pokalbių sistemas ir netgi koduotojų bendradarbiavimo procesus.
