Phenquestions
Protokol WebSocket umožňuje obojstrannú komunikáciu medzi klientom a serverom. Tento proces je podobný spôsobu, akým prebiehajú hovory na vašom telefóne: najskôr vytvoríte spojenie a potom môžete začať komunikovať medzi sebou. Protokol WebSocket sa používa takmer všade - od hier v prehliadači pre viacerých hráčov po chatovacie aplikácie.
Tento článok ukazuje, ako vytvoriť protokol WebSocket a použiť ho na komunikáciu s viacerými používateľmi.
Predpoklady
Pred prechodom na proces vytvárania a používania protokolu WebSocket je potrebné najskôr nainštalovať niekoľko vecí, ktoré sú pre tento proces potrebné. Prvá vec, ktorú musíte nainštalovať, je Node.js, platforma na strane servera, ktorá prevádza programovací jazyk JavaScript do strojového kódu, ktorý vám umožňuje spúšťať JavaScript priamo vo vašom počítači. Inštalácia uzla.js, používatelia systému Windows môžu jednoducho prejsť na oficiálny uzol.js a kliknite na zelené tlačidlo LTS umiestnené v strede obrazovky.
Pre používateľov systémov Linux a macOS kliknite na ikonu K stiahnutiu v podhlavičke webovej stránky.
Po otvorení K stiahnutiu V tejto časti uvidíte inštalačné súbory pre všetky tri hlavné platformy. Vyberte balík, ktorý podporuje váš systém.
Spustite inštalátor dodávaný so stiahnutými súbormi a uzol.js bude nainštalovaný na vašom počítači. Ak chcete skontrolovať, či je program nainštalovaný, otvorte terminál a zadajte nasledujúci príkaz:
$ uzol -v
Po nainštalovaní Node.js, teraz máte prístup k rôznym modulom JavaScript, vďaka ktorým bude vaša práca z dlhodobého hľadiska efektívnejšia. Otvorte adresár, v ktorom chcete vytvoriť architektúru klienta a servera, otvorte terminál v tomto adresári a spustite nasledujúci príkaz:
$ npm init -y
Tento príkaz sa používa na vytvorenie balíka.súbor JSON, ktorý vám umožňuje nastaviť a nainštalovať iný Uzol.js balíčky. Nainštalujte balík protokolu WebSocket zadaním nasledujúceho príkazu do terminálu:
$ npm inštalácia ws
Vytvorte tri súbory s názvom index.html, klient.js a server.js. Ako je uvedené v názvoch, tieto súbory JavaScript sú architektúrou klienta a servera nášho protokolu WebSocket. Teraz môžeme konečne začať písať kód našich klientských a serverových aplikácií.
Vytvorenie servera WebSocket
Aby sme vytvorili server WebSocket, začneme napísaním kódu pre server. Otvor server.js súbor, ktorý ste vytvorili v textovom editore alebo IDE v predchádzajúcej časti, a zadajte nasledujúce riadky do súboru.
const WebSocket = require ('ws');const ws = nový WebSocket.Server (port: 8080);
konzola.log ("Server spustený");
ws.on ('connection', (wss) =>
konzola.denník („Pripojený nový klient“)
wss.poslať ('Vitajte na serveri!');
wss.on ('message', (message) =>
konzola.log ('Server prijaty: $ message');
wss.send ('Mám tvoju správu:' + správa);
);
);
Teraz si podrobnejšie vysvetlíme, čo jednotlivé riadky robia.
Vysvetlenie kódu
Ako už bolo spomenuté vyššie, v Node sú k dispozícii niektoré zabudované moduly.js, ktoré vám výrazne uľahčujú prácu. Na import týchto modulov použijeme vyžadovať kľúčové slovo.
const WebSocket = require ('ws');const ws = nový WebSocket.Server (port: 8080);
konzola.log ("Server spustený");
Prvý riadok sa používa na import uzla.js modul WebSocket. Pomocou tohto modulu v ďalšom riadku vytvoríme náš server WebSocket, ktorý načúva na porte 8080. The konzola.denník () linka je tu len preto, aby sme vedeli, že server sa spustil. Toto sa zobrazí vo vašom termináli, keď v termináli spustíte nasledujúci príkaz:
$ uzlový server
V ďalšom riadku nadväzujeme spojenie medzi serverom a klientom.
ws.on ('connection', (wss) =>konzola.denník („Pripojený nový klient“)
);
Po nadviazaní spojenia sa wss.linka send () odošle správu klientovi. V takom prípade sa zobrazí správa „Vitajte na serveri.“
wss.poslať ('Vitajte na serveri!');Nakoniec wss.on ('message') je pre server, aby prijal správu od klienta. Na potvrdenie server odošle túto správu späť klientovi v poslednom riadku.
wss.on ('message', (message) =>konzola.log ('Server prijaty: $ message');
wss.send ('Mám tvoju správu:' + správa);
);
Vytvorenie klienta WebSocket
Na strane klienta potrebujeme index.html súbor a klient.súbor js. Samozrejme, môžete jednoducho pridať obsah od klienta.súbor js do svojho indexu.html súbor, ale radšej ich nechám oddelené. Najprv sa pozrime na klienta.kód js. Otvorte súbor a do jeho vnútra zadajte nasledujúce riadky:
const socket = new WebSocket ('ws: // localhost: 8080');zásuvka.addEventListener ('open', () =>
konzola.log ('Pripojené k serveru!');
);
zásuvka.addEventListener ('message', (msg) =>
konzola.log ('Prijatý klient: $ msg.data ');
);
const sendMsg = () =>
zásuvka.poslať („Ako to ide, amigo!');
Vysvetlenie kódu
Ako so serverom.js, vytvoríme nový WebSocket, ktorý počúva port 8080, ktorý je viditeľný v localhost: 8080 časť kódu.
const socket = new WebSocket ('ws: // localhost: 8080');V ďalšom riadku, addEventListener prinúti vášho klienta počúvať všetky udalosti, ktoré sa práve dejú. V tomto prípade by išlo o vytvorenie a spustenie servera. Po nadviazaní spojenia klient odošle správu do terminálu.
zásuvka.addEventListener ('open', () =>konzola.log ('Pripojené k serveru!');
);
Klient opäť počúva všetky aktuálne prebiehajúce udalosti. Keď server pošle správu, klient ju dostane a potom správu zobrazí v termináli.
zásuvka.addEventListener ('message', (msg) =>konzola.log ('Prijatý klient: $ msg.data ');
);
Posledných pár riadkov je jednoducho funkcia, keď klient odosiela správu na server. Pripojíme to k tlačidlu v našom html súbore, aby sme lepšie pochopili, ako to funguje.
const sendMsg = () =>zásuvka.poslať („Ako to ide, amigo!');
Príprava súboru HTML
Nakoniec otvorte index.html súbor a pridajte odkaz na svojho klienta.js súbor v ňom. V mojom prípade jednoducho pridám nasledujúce riadky kódu:
Ako vidíte na riadkoch nižšie, src (vo vnútri značky skriptu) sa vzťahuje na súbor javascript klienta. Funkcia sendMsg, ktorá bola vytvorená v klientovi.súbor js, bol tiež pripojený k funkcii onClick tlačidla.
Dať všetko dokopy
Teraz môžete začať testovať architektúru klientov a serverov. Najskôr otvorte terminál a spustením nasledujúceho príkazu spustite server:
$ uzlový server
Po spustení servera otvorte adresár, v ktorom je váš index.súbor html je prítomný a dvojitým kliknutím ho otvoríte vo svojom prehliadači. V termináli sa zobrazí nasledujúca správa oznamujúca, že sa klient pripojil:
Môžete tiež skontrolovať správy odoslané zo servera klientovi stlačením pravého tlačidla myši a potom otvorením Skontrolujte okno. V tomto okne kliknite na ikonu Konzola a uvidíte správy odoslané zo servera.
Po kliknutí na toto tlačidlo bude server aj klient môcť odosielať a prijímať správy navzájom a od seba navzájom.
Server:
Zákazník:
Voilà, vaše pripojenie k sieti WebSocket bolo nadviazané!
Záver
Protokol WebSocket je vynikajúci spôsob nadviazania komunikácie medzi klientom a serverom. Tento protokol sa používa v niekoľkých oblastiach, vrátane hier pre viacerých hráčov, chatovacích systémov rôznych platforiem sociálnych médií a dokonca aj procesov spolupráce medzi kódovačmi.
