Websocket cu Node.js

Aplicațiile web s-au schimbat și au evoluat, ceea ce face nevoile utilizatorilor diferite de momentul în care a fost creat primul protocol de conexiune în rețea. În consecință, protocolul HTTP a evoluat de-a lungul anilor, dar nu a atins încă un nivel în timp real, cum ar fi o conexiune TCP între două echipe.
Aceste limitări, mai degrabă decât să dăuneze dezvoltatorilor și utilizatorilor, au devenit o sursă de motivație și creativitate, generând soluții care ne permit nu numai să emulăm un sistem de transmisie în timp real, ci și prin HTTP fă-o aproape nativ.
WebsocketAcesta este locul unde Websocket, un protocol relativ nou, care este acceptat doar de cele mai moderne browsere, care ne permite să eliminăm HTTP de toate restricțiile sale și astfel să putem comunica eficient prin anteturi OBȚINE.
Websocket Este încă într-o perioadă de maturare activă, deci este foarte posibil să nu o găsim în soluții noi, din fericire în Node.js avem deja câteva instrumente care ne permit să le gestionăm fără a trebui să ne bazăm pe ingeniozitatea noastră pentru a construi instrumente de nivel inferior.
CerințeAcesta este un tutorial avansat, așa că vom solicita mai întâi o instalare funcțională a Node.js În sistemul nostru, putem arunca o privire asupra acestui tutorial înainte de a continua să aprofundăm în el, în plus, vom avea nevoie de permisiuni de administrator pentru a putea instala bibliotecile pe care le vom folosi. Trebuie să fim familiarizați cu conceptele de JavaScript de exemplu sună din nou și funcții anonime. În cele din urmă trebuie să avem un editor de text de genul Text sublim care ne permite să scriem diferitele coduri care sunt în exemple.
Pentru a începe să creăm o aplicație care ne permite să o folosim Websockets Mai întâi trebuie să construim o structură mică, aceasta este foarte simplă, dar necesară, această structură va consta din:
1- Un folder în care vom stoca fișierele proiectului nostru.
2- Un fișier numit server.js, acest fișier, așa cum indică numele său, va fi serverul prin care vom stabili conexiunea în timp real folosind Websockets.
3- Un fișier numit client.html, acest fișier va fi interfața pentru a comunica cu serverul nostru prin browser, este necesar să avem același lucru, astfel încât să putem trimite și primi informațiile corespunzătoare.
Deoarece avem structura definită acum putem începe să luăm câteva linii de cod, pentru aceasta trebuie să începem instalând o bibliotecă externă numită ws în mediul nostru, deoarece acesta este cel care ne va permite să folosim protocolul în cauză. Pentru a instala această bibliotecă trebuie doar să ne deschidem consola Node.js, suntem localizați în folderul în care vor fi fișierele noastre și plasăm următoarea comandă:

 npm instalați ws

Când îl executăm, putem vedea următorul rezultat în consola noastră de comandă:

Odată ce am instalat biblioteca, ne putem continua munca, acum în fișierul nostru server.js Trebuie să scriem următorul cod, mai întâi să vedem în ce constă, apoi îl vom explica:

 var WSServer = require ('ws'). Server, wss = WSServer nou ({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:' + cod + '-' + desc);});});

Primul lucru pe care îl facem este să solicităm biblioteca ws pe care tocmai l-am instalat și imediat în aceeași instrucțiune sunăm la clasa dvs. Server, apoi creăm o instanță cu care vom crea un server care rulează pe port 8085Acest port poate fi orice avem acces. În acest caz, 8085 este utilizat astfel încât să nu existe niciun conflict cu alte servicii care se află în prezent în acest mediu de testare.
Deoarece ne-am definit instanța acum, vom aplica metoda.pe () pentru evenimentul de conectare, apoi în sună din nou de la el trecem un obiect numit priză, cu aceasta vom primi mesajele de la client și am scris o rutină care dacă primim cuvântul "Buna ziua" serverul va returna un mesaj, unde la rândul său vom imprima și ceva în consola de comandă. În cele din urmă, dacă închidem conexiunea, vom avea un singur mesaj pe consolă.
Odată ce avem serverul nostru, este timpul să ne construim clientul, pentru el în fișier client.html vom defini o structură în care vom plasa etichete html și a JavaScript care va funcționa ca o legătură către serverul nostru. Să vedem cum arată fișierul nostru:

 Websockets Client Submit

Partea HTML este destul de simplu, avem o introducere de tip text și un buton de trimitere, precum și un div numită ieșire care este cine va primi informațiile de la server pentru a le arăta utilizatorului. Interesantul apare în etichetă, unde primul lucru pe care îl facem este să creăm un obiect de acest tip WebSocket și indicăm ruta unde trebuie să o găsiți, în cazul nostru este localhost: 8085 și astfel putem vedea că ceea ce am făcut în server.js. Apoi conectăm elementele noastre de trimitere, text și ieșire la variabilele pe care le putem folosi.
Apoi, ceea ce facem este să definim fiecare dintre metodele pe care le putem primi de la server, astfel încât de fiecare dată când trimitem ceva, acesta va fi înregistrat în rezultatul nostru, totul datorită metodei send (). Cealaltă metodă pe care o folosim este onmessage () care este activat numai dacă serverul nostru răspunde și adăugăm rezultatul în HTML.
În cele din urmă, folosim metodele onclose () Da onerror (), primul ne dă un mesaj când legătura cu Websocket este oprit sau închis, iar al doilea ne informează în cazul în care a apărut o eroare. Cu aceasta, trebuie doar să pornim serverul în consola noastră și să punem exemplul la lucru, pentru aceasta folosim următoarea comandă:

 nod server.js

Aceasta va porni serverul, dar pentru a verifica funcționalitatea codului nostru, trebuie să executăm fișierul client.html în browserul ales și să scriem ceva în caseta de text și să apăsăm butonul de trimitere, acest lucru va genera comunicare cu websocket și putem vedea răspunsul prin consolă:

În imagine putem vedea cum consola de comandă tipărește mesajul primit chiar înregistrează adresa IP de unde primește datele, asta am programat în fișierul nostru server.js, unde am indicat, de asemenea, că, dacă primim cuvântul „Bună ziua”, vom trimite un mesaj de răspuns care este exact ceea ce vedem în fereastra browserului din aceeași imagine. Acum, dacă actualizăm browserul, conexiunea este întreruptă, aceasta este înregistrată și de aplicația noastră, să vedem:

În cele din urmă, dacă închidem conexiunea din consola noastră cu CTRL + C Pentru a opri serverul, browserul nostru declanșează gestionarul de erori și acolo vom vedea un nou mesaj:

Dacă am fost observatori, este posibil să fi observat ceva important, în niciun moment pentru a primi răspunsuri nu a trebuit să reîmprospătăm browserul sau să facem o solicitare Ajax, totul a fost bidirecțional direct cu WebSockets, aceasta este ceea ce se numește timp real.
Ceea ce am arătat este una dintre cele mai rudimentare și manuale modalități care există, totuși funcționează pentru noi să știm cum este fluxul de lucru, dar funcționalitatea reală pregătită pentru mediile de producție este realizată cu biblioteca socket.io, acest lucru face același lucru pe care l-am făcut în tutorial, dar într-un mod mult mai compact și mai puțin predispus la erori de către dezvoltator, ceea ce ne permite să ne concentrăm doar pe logica aplicației și nu atât pe partea tehnică a acesteia.
Pentru instalare socket.io trebuie doar să facem un npm instalați socket.io și cu aceasta din depozit vom descărca cea mai recentă versiune stabilă a bibliotecii, care ne va permite să începem dezvoltarea noastră.
Cu aceasta am terminat acest tutorial, cu care am făcut un pas important în interior Node.js prin știința utilizării Websockets, această tehnologie devine din ce în ce mai importantă în fiecare zi, deoarece ne ajută să creăm aplicații care nu au fost niciodată gândite pe web. De asemenea, este important să ne documentăm despre protocol, deoarece este un mod de a înțelege potențialul a ceea ce putem realiza pur și simplu prin dezvoltarea de aplicații.