Websocket med Node.js

Webbapplikationer har förändrats och utvecklats, vilket gör användarnas behov annorlunda än när det första anslutningsprotokollet skapades på nätverket. Följaktligen protokollet HTTP har utvecklats under åren men har ännu inte nått en realtidsnivå, till exempel en anslutning TCP mellan två lag.
Dessa begränsningar, snarare än att skada utvecklare och användare, har blivit en källa till motivation och kreativitet och har skapat lösningar som gör att vi inte bara kan efterlikna ett överföringssystem i realtid, utan också genom HTTP gör det nästan naturligt.
WebsocketDet är här Websocket, ett relativt nytt protokoll som endast stöds av de mest moderna webbläsarna, vilket gör att vi kan ta bort HTTP från alla dess begränsningar och därmed kunna kommunicera effektivt genom rubriker SKAFFA SIG.
Websocket Det är fortfarande inne i en period av aktiv mognad så det är mycket möjligt att vi inte hittar det i nya lösningar, lyckligtvis i Node.js vi har redan några verktyg som gör att vi kan hantera dem utan att behöva lita på vår uppfinningsrikedom för att bygga verktyg på lägre nivå.
KravDetta är en avancerad handledning, så vi kommer först att kräva en funktionell installation av Node.js I vårt system kan vi ta en titt på denna handledning innan vi fortsätter att fördjupa oss i den. Dessutom behöver vi administratörsbehörighet för att kunna installera de bibliotek som vi ska använda. Vi måste känna till begreppen JavaScript till exempel ring tillbaka och anonyma funktioner. Slutligen måste vi ha en textredigerare som Sublim text som gör att vi kan skriva de olika koder som finns i exemplen.
För att börja skapa ett program som tillåter oss att använda Websockets Vi måste först bygga en liten struktur, detta är väldigt enkelt men nödvändigt, denna struktur kommer att bestå av:
1- En mapp där vi kommer att lagra filerna i vårt projekt.
2- En fil med namnet server.js, den här filen, som namnet indikerar, är servern genom vilken vi ska upprätta anslutningen i realtid med hjälp av Websockets.
3- En fil med namnet client.html, den här filen kommer att vara gränssnittet för att kommunicera med vår server via webbläsaren, det är nödvändigt att ha samma för att vi ska kunna skicka och ta emot motsvarande information.
Eftersom vi har definierat vår struktur nu kan vi börja ta några rader kod, för detta måste vi börja med att installera ett externt bibliotek som heter ws i vår miljö, eftersom det här är det som gör att vi kan använda det aktuella protokollet. För att installera detta bibliotek måste vi bara öppna vår konsol Node.js, finns vi i mappen där våra filer kommer att finnas och vi placerar följande kommando:

 npm installera ws

När vi kör det kan vi se följande resultat i vår kommandokonsol:

När vi har installerat biblioteket kan vi fortsätta vårt arbete, nu i vår fil server.js Vi måste skriva följande kod, låt oss först se vad den består av sedan förklarar vi den:

 var WSServer = require ('ws'). Server, wss = ny WSServer ({port: 8085}); wss.on ('anslutning', funktion (uttag) {socket.on ('meddelande', funktion (msg) {console.log ('Mottagen:', msg, '\ n', 'Från IP:', uttag. upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('Yes it works!');}}); socket.on ('close', function (code, desc) {console .log ('Offline:' + kod + '-' + desc);});});

Det första vi gör är att kräva biblioteket ws som vi just installerade och omedelbart i samma instruktion ring din klass Server, då skapar vi en instans med vilken vi ska skapa en server som körs på porten 8085Den här porten kan vara vad vi än har åtkomst till. I det här fallet används 8085 så att det inte finns någon konflikt med andra tjänster som för närvarande finns i denna testmiljö.
Eftersom vi har definierat vår instans nu kommer vi att tillämpa metoden.på () för anslutningshändelsen, sedan i ring tillbaka från det passerar vi ett objekt som kallas uttag, med detta kommer vi att ta emot meddelanden från klienten och vi har skrivit en rutin att om vi får ordet "Hallå" servern skickar tillbaka ett meddelande, där vi i sin tur också kommer att skriva ut något i kommandokonsolen. Slutligen, om vi stänger anslutningen kommer vi bara att ha ett meddelande på konsolen.
När vi väl har vår server är det dags att bygga vår klient, för den i filen client.html vi ska definiera en struktur där vi ska placera html -taggar och a JavaScript som fungerar som en länk till vår server. Låt oss se hur vår fil ser ut:

 Websockets klient Skicka

Delen HTML är ganska enkelt, vi har en texttypsinmatning och en skicka -knapp, samt en div kallad output som är vem som kommer att ta emot informationen från servern för att visa den för användaren. Det intressanta kommer i etiketten där det första vi gör är att skapa ett objekt av typen WebSocket och vi anger rutten där du måste hitta den, i vårt fall är det lokal värd: 8085 och så kan vi se att det vi gjorde i server.js. Vi länkar sedan våra sändnings-, text- och utmatningselement till variabler som vi kan använda.
Vad vi gör är att definiera var och en av metoderna som vi kan ta emot från servern, så varje gång vi skickar något kommer det att spelas in i vår produktion, allt tack vare metoden skicka (). Den andra metoden vi använder är onmessage () som bara aktiveras om vår server svarar och vi lägger till resultatet i vår HTML.
Slutligen använder vi metoderna onclose () Y onerror (), den första ger oss ett meddelande när anslutningen till Websocket stoppas eller stängs, och den andra informerar oss om något fel har inträffat. Med detta behöver vi bara starta servern i vår konsol och få vårt exempel att fungera, för detta använder vi följande kommando:

 nod server.js

Detta kommer att starta servern, men för att verifiera funktionen i vår kod måste vi köra vår client.html -fil i vår valda webbläsare och skriva något i textrutan och trycka på skicka -knappen, detta kommer att generera kommunikation med websocket och vi kan se svaret per konsol:

På bilden kan vi se hur kommandokonsolen skriver ut det mottagna meddelandet till och med registrerar IP -adressen från var den tar emot data, det var vad vi programmerade i vår fil server.js, där vi också indikerade att om vi fick ordet "Hej" skulle vi skicka ett svarsmeddelande som är precis vad vi ser i webbläsarfönstret i samma bild. Om vi ​​nu uppdaterar webbläsaren är anslutningen bruten, detta registreras också av vår applikation, låt oss se:

Slutligen om vi stänger anslutningen i vår konsol med CTRL + C För att stoppa servern, avfyrar vår webbläsare felhanteraren och där kommer vi att se ett nytt meddelande:

Om vi ​​har varit observatörer kan vi ha märkt något viktigt, utan att vid något tillfälle få svar har vi varit tvungna att uppdatera webbläsaren eller göra en begäran Ajax, allt har varit dubbelriktat direkt med WebSockets, detta är vad som kallas realtid.
Det vi har visat är ett av de mest rudimentära och manuella sätten som finns, men det fungerar för oss att veta hur arbetsflödet är, men den verkliga funktionaliteten redo för produktionsmiljöer uppnås med biblioteket socket.io, det här gör samma sak som vi gjorde i handledningen men i en mycket mer kompakt och mindre benägen för fel från utvecklaren, vilket gör att vi bara kan fokusera på applikationens logik och inte så mycket på den tekniska delen av den.
För installation socket.io vi måste bara göra en npm installera socket.io och med detta från förvaret kommer vi att ladda ner den senaste stabila versionen av biblioteket, vilket gör att vi kan starta vår utveckling.
Med detta har vi avslutat denna handledning, som vi har tagit ett viktigt steg inom Node.js genom att veta hur man använder Websockets, blir denna teknik viktigare för varje dag eftersom den hjälper oss att skapa applikationer som man aldrig tänkt på på nätet. Det är också viktigt att vi dokumenterar oss själva om protokollet eftersom det är ett sätt att förstå potentialen i vad vi kan uppnå helt enkelt genom att utveckla applikationer.