Websocket s Node.js

Webové aplikace se mění a vyvíjejí, čímž se potřeby uživatelů liší od doby, kdy byl v síti vytvořen první protokol připojení. V důsledku toho protokol HTTP se v průběhu let vyvíjel, ale dosud nedosáhl úrovně reálného času, jako je spojení TCP mezi dvěma týmy.
Tato omezení, místo aby poškodila vývojáře a uživatele, se stala zdrojem motivace a kreativity a vytvářejí řešení, která nám umožňují nejen emulovat přenosový systém v reálném čase, ale také prostřednictvím HTTP udělejte to téměř nativně.
WebsocketTady je Websocket, relativně nový protokol, který podporují pouze nejmodernější prohlížeče, což nám umožňuje zbavit HTTP všech jeho omezení a být tak schopni efektivně komunikovat prostřednictvím záhlaví DOSTAT.
Websocket Je to stále v období aktivního zrání, takže je velmi možné, že jej v nových řešeních nenajdeme, naštěstí v Node.js již máme nějaké nástroje, které nám umožňují je zvládnout, aniž bychom se museli spoléhat na naši vynalézavost při vytváření nástrojů nižší úrovně.
PožadavkyToto je pokročilý návod, takže nejprve budeme požadovat funkční instalaci Node.js V našem systému se můžeme podívat na tento tutoriál, než se do něj budeme dále ponořit, navíc budeme potřebovat oprávnění správce, abychom mohli instalovat knihovny, které budeme používat. Musíme být obeznámeni s pojmy JavaScript například zpětné volání a anonymní funkce. Nakonec musíme mít podobný textový editor Vznešený text to nám umožňuje psát různé kódy, které jsou v příkladech.
Začít vytvářet aplikaci, která nám umožňuje používat Websockety Nejprve musíme postavit malou strukturu, je to velmi jednoduché, ale nezbytné, tato struktura bude sestávat z:
1- Složka, kam budeme ukládat soubory našeho projektu.
2- Soubor s názvem server.js, tento soubor, jak naznačuje jeho název, bude serverem, přes který se chystáme navázat spojení v reálném čase pomocí Websockety.
3- Soubor s názvem client.html„Tento soubor bude rozhraním pro komunikaci s naším serverem prostřednictvím prohlížeče, je nutné jej mít stejné, abychom mohli odesílat a přijímat odpovídající informace.
Protože máme nyní definovanou naši strukturu, můžeme začít brát několik řádků kódu, proto musíme začít instalací externí knihovny s názvem ws v našem prostředí, protože to je ten, který nám umožní použít daný protokol. K instalaci této knihovny stačí otevřít naši konzolu Node.js„Nacházíme se ve složce, kde budou naše soubory, a umístíme následující příkaz:

 npm nainstalovat ws

Když jej spustíme, můžeme v naší konzole příkazů vidět následující výsledek:

Jakmile nainstalujeme knihovnu, můžeme pokračovat v práci, nyní v našem souboru server.js Musíme napsat následující kód, nejprve se podívejme, z čeho se skládá, a poté jej vysvětlíme:

 var WSServer = require ('ws'). Server, wss = nový WSServer ({port: 8085}); wss.on ('connection', function (socket) {socket.on ('message', function (msg) {console.log ('Received:', msg, '\ n', 'From IP:', socket. upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('Yes it works!');}}); socket.on ('close', function (code, desc) {console .log ('Offline:' + kód + '-' + popis);});});

První věc, kterou děláme, je vyžadovat knihovnu ws že jsme právě nainstalovali a okamžitě ve stejné instrukci zavoláme vaši třídu Server, pak vytvoříme instanci, se kterou se chystáme vytvořit server, který běží na portu 8085Tento port může být jakýkoli, ke kterému máme přístup. V tomto případě se používá 8085, takže nedochází ke konfliktu s jinými službami, které jsou aktuálně v tomto testovacím prostředí.
Protože jsme nyní definovali naši instanci, použijeme tuto metodu.na () pro událost připojení, pak v zpětné volání od něj míjíme předmět zvaný zásuvkaTímto přijmeme zprávy od klienta a napíšeme rutinu, že pokud obdržíme slovo "Ahoj" server vrátí zprávu, kde zase také něco vytiskneme v příkazové konzole. Nakonec, pokud ukončíme připojení, budeme mít na konzole pouze jednu zprávu.
Jakmile máme náš server, je čas vytvořit klienta v souboru client.html definujeme strukturu, do které umístíme html tagy a JavaScript který bude fungovat jako odkaz na náš server. Podívejme se, jak náš soubor vypadá:

 Odeslání klienta Websockets

Část HTML je celkem jednoduchý, máme k dispozici textový vstup a tlačítko pro odeslání a také div nazývaný výstup, který bude přijímat informace ze serveru, aby je ukázal uživateli. Zajímavost přichází na štítku, kde první věcí, kterou uděláme, je vytvoření objektu typu WebSocket a uvedeme trasu, kde ji musíte najít, v našem případě je to localhost: 8085 a tak vidíme, že to, co jsme udělali v server.js. Poté propojíme naše odesílací, textové a výstupní prvky s proměnnými, které můžeme použít.
Poté definujeme každou z metod, které můžeme ze serveru přijímat, takže pokaždé, když něco pošleme, bude to zaznamenáno v našem výstupu, vše díky metodě poslat (). Další metodou, kterou používáme, je onmessage () který se aktivuje pouze v případě, že náš server odpoví a výsledek přidáme do našeho HTML.
Nakonec použijeme metody onclose () Y onerror (), první nám dává zprávu, když je spojení s Websocket je zastaven nebo zavřen a druhý nás informuje v případě, že došlo k nějaké chybě. S tímto musíme pouze spustit server v naší konzole a uvést náš příklad do provozu, k tomu použijeme následující příkaz:

 uzel server.js

Tím se spustí server, ale abychom ověřili funkčnost našeho kódu, musíme spustit soubor client.html v prohlížeči, který si vyberete, něco napsat do textového pole a stisknout tlačítko Odeslat, což vygeneruje komunikaci s webová zásuvka a můžeme vidět odpověď konzoly:

Na obrázku vidíme, jak příkazová konzole tiskne přijatou zprávu, dokonce registruje IP adresu, odkud přijímá data, to jsme naprogramovali v našem souboru server.js, kde jsme také naznačili, že pokud bychom obdrželi slovo „Dobrý den“, poslali bychom odpověď, což je přesně to, co vidíme v okně prohlížeče na stejném obrázku. Nyní, pokud obnovíme prohlížeč, je připojení přerušeno, je to také registrováno naší aplikací, podívejme se:

Nakonec uzavřeme připojení v naší konzole pomocí CTRL + C Chcete -li zastavit server, náš prohlížeč spustí obslužný program chyb a tam se zobrazí nová zpráva:

Pokud jsme byli pozorovateli, možná jsme si všimli něčeho důležitého, v žádném okamžiku jsme pro obdržení odpovědí museli aktualizovat prohlížeč nebo podat žádost Ajax, vše bylo obousměrné přímo s Webové zásuvkyTomu se říká skutečný čas.
To, co jsme ukázali, je jedním z nejzákladnějších a nejjednodušších způsobů, které existují, ale funguje to tak, že víme, jaký je pracovní postup, ale skutečné funkce připravené pro produkční prostředí lze dosáhnout pomocí knihovny socket.io, to dělá totéž, co jsme udělali v tutoriálu, ale v mnohem kompaktnějším a méně náchylném k chybám vývojáře, což nám umožňuje soustředit se pouze na logiku aplikace a ne tolik na její technickou část.
Pro instalaci socket.io prostě musíme udělat a npm install socket.io a tímto z úložiště stáhneme nejnovější stabilní verzi knihovny, která nám umožní zahájit náš vývoj.
Tímto jsme dokončili tento tutoriál, ve kterém jsme udělali důležitý krok Node.js tím, že víte, jak používat Websockety„Tato technologie je každým dnem stále důležitější, protože nám pomáhá vytvářet aplikace, o kterých se na webu nikdy neuvažovalo. Je také důležité, abychom se o protokolu dokumentovali, protože je to způsob, jak porozumět potenciálu toho, čeho můžeme dosáhnout jednoduše vývojem aplikací.