Phenquestions
Protokol WebSocket umožňuje obousměrnou komunikaci mezi klientem a serverem. Tento proces je podobný způsobu, jakým probíhají hovory na vašem telefonu: nejprve navážete spojení a poté můžete zahájit vzájemnou komunikaci. Protokol WebSocket se používá téměř všude - od her v prohlížeči pro více hráčů po chatovací aplikace.
Tento článek ukazuje, jak vytvořit protokol WebSocket a použít jej ke komunikaci s více uživateli.
Předpoklady
Než přejdete k procesu vytváření a používání protokolu WebSocket, musíte nejprve nainstalovat několik věcí, které jsou pro tento proces vyžadovány. První věcí, kterou musíte nainstalovat, je Node.js, platforma na straně serveru, která převádí programovací jazyk JavaScript do strojového kódu, který umožňuje spouštět JavaScript přímo ve vašem počítači. Chcete-li nainstalovat uzel.js, uživatelé Windows mohou jednoduše přejít na oficiální uzel.js web a klikněte na zelené tlačítko LTS ve středu obrazovky.
U uživatelů systémů Linux a macOS klikněte na ikonu Soubory ke stažení v podhlavičce webu.
Po otevření Soubory ke stažení V této části uvidíte instalační soubory pro všechny tři hlavní platformy. Vyberte balíček, který váš systém podporuje.
Spusťte instalační program dodávaný se staženými soubory a uzel.js bude nainstalován na vašem počítači. Chcete-li zkontrolovat, zda byl program nainstalován, otevřete terminál a zadejte následující příkaz:
$ uzel -v
Po instalaci Node.js, nyní máte přístup k různým modulům JavaScriptu, které z dlouhodobého hlediska zefektivní vaši práci. Otevřete adresář, ve kterém chcete vytvořit architekturu klienta a serveru, otevřete terminál uvnitř tohoto adresáře a spusťte následující příkaz:
$ npm init -y
Tento příkaz se používá k vytvoření balíčku.soubor JSON, který vám umožňuje nastavit a nainstalovat jiný uzel.js balíčky. Nainstalujte balíček protokolu WebSocket vydáním následujícího příkazu v terminálu:
$ npm instalace ws
Vytvořte tři soubory, tzv index.html, klient.js a server.js. Jak je uvedeno v názvech, tyto soubory JavaScript jsou architekturou klienta a serveru našeho protokolu WebSocket. Nyní můžeme konečně začít psát kód našich klientských a serverových aplikací.
Vytvoření serveru WebSocket
Abychom vytvořili server WebSocket, začneme psaním kódu pro server. Otevři serveru.js soubor, který jste vytvořili v textovém editoru nebo IDE v předchozí části, a zadejte do něj následující řádky.
const WebSocket = require ('ws');const ws = nový WebSocket.Server (port: 8080);
řídicí panel.log ("Server spuštěn");
ws.on ('connection', (wss) =>
řídicí panel.log („Připojen nový klient“)
wss.send ('Vítejte na serveru!');
wss.on ('message', (message) =>
řídicí panel.log ('Server Received: $ message');
wss.send ('Got your Message:' + message);
);
);
Nyní podrobněji vysvětlíme, co jednotlivé řádky dělají.
Vysvětlení kódu
Jak již bylo zmíněno dříve, v Node jsou k dispozici některé vestavěné moduly.js, díky nimž je vaše práce mnohem jednodušší. K importu těchto modulů použijeme vyžadovat klíčové slovo.
const WebSocket = require ('ws');const ws = nový WebSocket.Server (port: 8080);
řídicí panel.log ("Server spuštěn");
První řádek se používá k importu uzlu.js WebSocket modul. Pomocí tohoto modulu v dalším řádku vytvoříme náš server WebSocket, který naslouchá na portu 8080. The řídicí panel.log () linka je tu jen proto, abychom věděli, že server byl spuštěn. Toto uvidíte uvnitř terminálu, když v terminálu spustíte následující příkaz:
$ uzel server
Na dalším řádku navazujeme spojení mezi serverem a klientem.
ws.on ('connection', (wss) =>řídicí panel.log („Připojen nový klient“)
);
Po navázání spojení se wss.send () line odešle zprávu klientovi. V tomto případě se zobrazí zpráva „Vítejte na serveru.“
wss.send ('Vítejte na serveru!');Nakonec wss.on ('message') je pro server, aby přijal zprávu od klienta. Pro potvrzení server odešle tuto zprávu zpět klientovi v posledním řádku.
wss.on ('message', (message) =>řídicí panel.log ('Server Received: $ message');
wss.send ('Got your Message:' + message);
);
Vytvoření klienta WebSocket
Na straně klienta potřebujeme index.html soubor a klient.soubor js. Samozřejmě můžete jednoduše přidat obsah od klienta.soubor js do vašeho indexu.html soubor, ale raději je nechám oddělené. Nejprve se podívejme na klienta.JS kód. Otevřete soubor a zadejte do něj následující řádky:
const socket = new WebSocket ('ws: // localhost: 8080');zásuvka.addEventListener ('open', () =>
řídicí panel.log ('Připojeno k serveru!');
);
zásuvka.addEventListener ('message', (msg) =>
řídicí panel.log ('Klient přijat: $ msg.data');
);
const sendMsg = () =>
zásuvka.poslat („Jak to jde, amigo!');
Vysvětlení kódu
Jako se serverem.js, vytvoříme nový WebSocket, který poslouchá port 8080, který je vidět na localhost: 8080 část kódu.
const socket = new WebSocket ('ws: // localhost: 8080');V dalším řádku, addEventListener přiměje vašeho klienta poslouchat všechny události, které se právě dějí. V tomto případě by to bylo vytvoření a spuštění serveru. Jakmile je spojení navázáno, klient odešle zprávu do terminálu.
zásuvka.addEventListener ('open', () =>řídicí panel.log ('Připojeno k serveru!');
);
Klient znovu poslouchá všechny aktuálně probíhající události. Když server odešle zprávu, klient ji přijme a poté zprávu zobrazí v terminálu.
zásuvka.addEventListener ('message', (msg) =>řídicí panel.log ('Klient přijat: $ msg.data');
);
Posledních několik řádků je jednoduše funkce, kdy klient odesílá zprávu na server. Propojíme to s tlačítkem v našem html souboru, abychom lépe porozuměli tomu, jak to funguje.
const sendMsg = () =>zásuvka.poslat („Jak to jde, amigo!');
Příprava souboru HTML
Nakonec otevřete index.html soubor a přidejte odkaz na svého klienta.JS soubor uvnitř. V mém případě jednoduše přidám následující řádky kódu:
Jak vidíte na řádcích níže, src (uvnitř značky skriptu) odkazuje na soubor javascript klienta. Funkce sendMsg, která byla vytvořena v klientovi.soubor js, byl také připojen k funkci onClick tlačítka.
Dáme všechno dohromady
Nyní můžete začít testovat architekturu klienta a serveru. Nejprve otevřete terminál a spuštěním následujícího příkazu spusťte server:
$ uzel server
Po spuštění serveru otevřete adresář, ve kterém je váš index.Soubor html je přítomen a poklepáním jej otevřete ve svém prohlížeči. V terminálu se zobrazí následující zpráva oznamující, že se klient připojil:
Můžete také zkontrolovat zprávy odeslané ze serveru klientovi stisknutím tlačítka pravého tlačítka a otevřením Kontrolovat okno. V tomto okně klikněte na Řídicí panel a uvidíte zprávy odeslané ze serveru.
Jakmile kliknete na tlačítko, server i klient budou moci odesílat a přijímat zprávy navzájem a od sebe navzájem.
Server:
Klient:
Vaše připojení k síti WebSocket bylo navázáno!
Závěr
Protokol WebSocket je vynikající způsob, jak navázat komunikaci mezi klientem a serverem. Tento protokol se používá v několika oblastech, včetně her pro více hráčů, chatovacích systémů různých platforem sociálních médií a dokonce i procesů spolupráce mezi kodéry.
