Phenquestions
WebSocket protokols ļauj veikt divvirzienu komunikāciju starp klientu un serveri. Šis process ir līdzīgs tam, kā notiek zvani pa tālruni: vispirms izveidojat savienojumu un pēc tam varat sākt sazināties savā starpā. WebSocket protokols tiek izmantots gandrīz visur - sākot no vairāku spēlētāju pārlūka spēlēm un beidzot ar tērzēšanas lietojumprogrammām.
Šajā rakstā ir parādīts, kā izveidot WebSocket protokolu un izmantot to, lai sazinātos ar vairākiem lietotājiem.
Priekšnoteikumi
Pirms pāriet uz WebSocket protokola izveidošanas un izmantošanas procesu, vispirms jāinstalē dažas lietas, kas nepieciešamas šim procesam. Pirmā lieta, kas jums jāinstalē, ir mezgls.js, servera puses platforma, kas pārveido JavaScript programmēšanas valodu mašīnas kodā, kas ļauj jums palaist JavaScript tieši datorā. Lai instalētu Node.js, Windows lietotāji var vienkārši doties uz oficiālo mezglu.js vietni un noklikšķiniet uz zaļās pogas LTS, kas atrodas ekrāna centrā.
Linux un macOS lietotājiem noklikšķiniet uz Lejupielādes sadaļu vietnes apakšvirsrakstā.
Pēc atvēršanas Lejupielādes sadaļā redzēsiet visu trīs galveno platformu instalācijas failus. Atlasiet paketi, kuru atbalsta jūsu sistēma.
Palaidiet instalēšanas programmu, kas nāk ar lejupielādētajiem failiem, un mezglu.js tiks instalēts jūsu datorā. Lai pārbaudītu, vai programma ir instalēta, atveriet termināli un izdodiet šādu komandu:
$ mezgls -v
Pēc mezgla instalēšanas.js, jums tagad ir pieejami dažādi JavaScript moduļi, kas ilgtermiņā padarīs jūsu darbu efektīvāku. Atveriet direktoriju, kurā vēlaties izveidot klienta un servera arhitektūru, pēc tam atveriet terminālu šajā direktorijā un izpildiet šādu komandu:
$ npm init -y
Šo komandu izmanto, lai izveidotu pakotni.json fails, kas ļauj iestatīt un instalēt dažādus mezglus.js paketes. Instalējiet WebSocket protokola pakotni, terminālā izsniedzot šādu komandu:
$ npm instalēt ws
Izveidojiet trīs failus ar nosaukumu indekss.html, klients.js un serveris.js. Kā norāda nosaukumi, šie JavaScript faili ir mūsu WebSocket protokola klienta un servera arhitektūra. Tagad beidzot varam sākt rakstīt klienta un servera lietojumprogrammu kodu.
WebSocket servera izveide
Lai izveidotu WebSocket serveri, mēs vispirms rakstīsim servera kodu. Atveriet serveris.js failu, kuru iepriekšējā sadaļā izveidojāt teksta redaktorā vai IDE, un faila iekšpusē ievadiet šādas rindas.
const WebSocket = pieprasīt ('ws');const ws = jauna WebSocket.Serveris (ports: 8080);
konsole.žurnāls ("Serveris sākts");
ws.ieslēgts ('savienojums', (wss) =>
konsole.žurnāls ("Savienots jauns klients")
wss.sūtīt ('Laipni lūdzam serverī!');
wss.ieslēgts ('ziņojums', (ziņojums) =>
konsole.žurnāls ('Saņemts serveris: $ message');
wss.nosūtīt ('Got your Message:' + ziņa);
);
);
Tagad mēs sīkāk paskaidrosim, ko dara katra rinda.
Kods Paskaidrojums
Kā minēts iepriekš, mezglā ir pieejami daži iebūvēti moduļi.js, kas ievērojami atvieglo jūsu darbu. Lai importētu šos moduļus, mēs izmantosim pieprasīt atslēgvārds.
const WebSocket = pieprasīt ('ws');const ws = jauna WebSocket.Serveris (ports: 8080);
konsole.žurnāls ("Serveris sākts");
Pirmo rindu izmanto mezgla importēšanai.js WebSocket modulis. Izmantojot šo moduli, nākamajā rindā mēs izveidojam savu WebSocket serveri, kas klausās 8080. portā. The konsole.žurnāls () līnija ir vienkārši paredzēta, lai paziņotu mums, ka serveris ir sācis. Tas tiks parādīts jūsu termināla iekšpusē, palaižot šādu komandu terminālā:
$ mezgla serveris
Nākamajā rindā mēs izveidojam savienojumu starp serveri un klientu.
ws.ieslēgts ('savienojums', (wss) =>konsole.žurnāls ("Savienots jauns klients")
);
Kad savienojums ir izveidots, wss.līnija send () nosūta ziņojumu klientam. Šajā gadījumā ziņojums ir “Laipni lūdzam serverī.”
wss.sūtīt ('Laipni lūdzam serverī!');Visbeidzot, wss.on (ziņojums) ir paredzēts serverim, lai saņemtu ziņojumu no klienta. Lai saņemtu apstiprinājumu, serveris nosūta šo ziņojumu atpakaļ klientam pēdējā rindā.
wss.ieslēgts ('ziņojums', (ziņojums) =>konsole.žurnāls ('Saņemtais serveris: $ message');
wss.nosūtīt ('Got your Message:' + ziņa);
);
WebSocket klienta izveide
Klienta pusē mums ir nepieciešams indekss.HTML failu un klientu.js fails. Protams, jūs varat vienkārši pievienot saturu no klienta.js failu jūsu indeksā.HTML failu, bet es gribētu tos turēt atsevišķi. Vispirms apskatīsim klientu.js kods. Atveriet failu un faila iekšpusē ievadiet šādas rindas:
const ligzda = new WebSocket ('ws: // localhost: 8080');kontaktligzda.addEventListener ('open', () =>
konsole.žurnāls ('Savienojums ar serveri!');
);
kontaktligzda.addEventListener ('message', (msg) =>
konsole.žurnāls ('Klients saņēmis: $ msg.dati ');
);
const sendMsg = () =>
kontaktligzda.sūtīt ('Kā tas notiek!');
Kods Paskaidrojums
Tāpat kā ar serveri.js, mēs izveidosim jaunu WebSocket, kas klausās 8080 portu, ko var redzēt vietējais saimnieks: 8080 koda sadaļu.
const ligzda = new WebSocket ('ws: // localhost: 8080');Nākamajā rindā, addEventListener liek klientam noklausīties visus notiekošos notikumus. Šajā gadījumā tas būtu servera izveide un palaišana. Kad savienojums ir izveidots, klients izvada ziņojumu terminālim.
kontaktligzda.addEventListener ('open', () =>konsole.žurnāls ('Savienojums ar serveri!');
);
Atkal klients noklausās visus notiekošos notikumus. Kad serveris nosūta ziņojumu, klients to saņem un pēc tam parāda ziņojumu terminālā.
kontaktligzda.addEventListener ('message', (msg) =>konsole.žurnāls ('Klients saņēmis: $ msg.dati ');
);
Dažas pēdējās rindas ir vienkārši funkcija, kurā klients sūta ziņojumu serverim. Mēs to savienosim ar pogu mūsu HTML failā, lai labāk izprastu, kā tas darbojas.
const sendMsg = () =>kontaktligzda.sūtīt ('Kā tas notiek!');
HTML faila sagatavošana
Visbeidzot, atveriet indeksu.HTML failu un pievienojiet atsauci savam klientam.js fails tajā. Manā gadījumā es vienkārši pievienošu šādas koda rindas:
Kā redzat zemāk esošajās rindās, src (skripta taga iekšpusē) attiecas uz klienta javascript failu. Funkcija sendMsg, kas tika izveidota klientā.js fails ir pievienots arī pogas onClick funkcijai.
Saliekot visu kopā
Tagad varat sākt pārbaudīt klienta un servera arhitektūru. Vispirms atveriet termināli un palaidiet šādu komandu, lai palaistu serveri:
$ mezgla serveris
Pēc servera palaišanas atveriet direktoriju, kurā atrodas jūsu indekss.HTML fails atrodas un veiciet dubultklikšķi uz tā, lai to atvērtu pārlūkprogrammā. Terminālā tiks parādīts šāds ziņojums, ka klients ir izveidojis savienojumu:
Varat arī pārbaudīt no servera klientam nosūtītās ziņas, nospiežot pogu ar peles labo pogu un pēc tam atverot Pārbaudiet logs. Šajā logā noklikšķiniet uz Konsole sadaļā, un jūs varēsiet redzēt no servera sūtītās ziņas.
Noklikšķinot uz pogas, gan serveris, gan klients varēs nosūtīt un saņemt ziņojumus viens otram un no otra.
Serveris:
Klients:
Voilà, jūsu WebSocket savienojums ir izveidots!
Secinājums
WebSocket protokols ir lielisks veids, kā nodibināt saziņu starp klientu un serveri. Šis protokols tiek izmantots vairākās jomās, tostarp vairāku spēlētāju pārlūka spēlēs, dažādu sociālo mediju platformu tērzēšanas sistēmās un pat sadarbības procesos starp kodētājiem.
