Websocket s Node.js

Web aplikacije mijenjale su se i razvijale, pa se potrebe korisnika razlikuju od trenutka kada je na mreži izrađen prvi protokol povezivanja. Slijedom toga protokol HTTP razvila se godinama, ali još nije dosegla razinu stvarnog vremena, poput veze TCP između dva tima.
Ta su ograničenja, umjesto da naštete programerima i korisnicima, postala izvor motivacije i kreativnosti, stvarajući rješenja koja nam omogućuju ne samo oponašanje prijenosnog sustava u stvarnom vremenu, već i putem HTTP učiniti to gotovo izvorno.
WebsocketOvdje se nalazi Websocket, relativno novi protokol koji podržavaju samo najsuvremeniji preglednici, koji nam omogućuje da uklonimo sva ograničenja HTTP -a i na taj način možemo učinkovito komunicirati putem zaglavlja DOBITI.
Websocket Još je u razdoblju aktivnog sazrijevanja pa je vrlo moguće da ga nećemo pronaći u novim rješenjima, na sreću u Node.js već imamo neke alate koji nam omogućuju rukovanje bez potrebe da se oslanjamo na svoju domišljatost za izradu alata niže razine.
ZahtjeviOvo je napredni vodič, pa ćemo prvo zahtijevati funkcionalnu instalaciju Node.js U našem sustavu možemo pogledati ovaj vodič prije nego što nastavimo s njegovim detaljima. Dodatno će nam trebati administratorska dopuštenja da bismo mogli instalirati knjižnice koje ćemo koristiti. Moramo biti upoznati s pojmovima JavaScript na primjer uzvratiti poziv i anonimne funkcije. Konačno, moramo imati uređivač teksta poput Uzvišen tekst to nam omogućuje pisanje različitih kodova koji se nalaze u primjerima.
Za početak izrade aplikacije koja nam omogućuje korištenje Web -utičnice Prvo moramo izgraditi malu strukturu, ovo je vrlo jednostavno, ali potrebno, ova će se struktura sastojati od:
1- Mapa u koju ćemo pohraniti datoteke našeg projekta.
2- Datoteka pod nazivom server.js, ova će datoteka, kako joj naziv govori, biti poslužitelj putem kojeg ćemo uspostaviti vezu u stvarnom vremenu pomoću Web -utičnice.
3- Datoteka pod nazivom client.html, ova datoteka će biti sučelje za komunikaciju s našim poslužiteljem putem preglednika, potrebno ju je imati kako bismo mogli slati i primati odgovarajuće podatke.
Budući da smo sada definirali svoju strukturu, možemo početi uzimati nekoliko redaka koda, za to moramo početi instaliranjem vanjske knjižnice tzv. ws u našem okruženju, budući da će nam to omogućiti korištenje dotičnog protokola. Da bismo instalirali ovu biblioteku, samo moramo otvoriti našu konzolu Node.js, nalazimo se u mapi u kojoj će se nalaziti naše datoteke i postavljamo sljedeću naredbu:

 npm instalirati ws

Kad ga izvršimo, možemo vidjeti sljedeći rezultat na našoj naredbenoj konzoli:

Nakon što smo instalirali knjižnicu, možemo nastaviti s radom, sada u našoj datoteci server.js Moramo napisati sljedeći kod, prvo da vidimo od čega se sastoji, pa ćemo ga objasniti:

 var WSServer = zahtijevaju ('ws'). Poslužitelj, wss = novi WSServer ({port: 8085}); wss.on ('veza', funkcija (utičnica) {socket.on ('poruka', funkcija (poruka)) {console.log ('Primljeno:', poruka, '\ n', 'S IP -a:', utičnica. upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('Yes it works!');}}); socket.on ('close', function (code, desc) {console .log ('Van mreže:' + kôd + '-' + desc);});});

Prvo što trebamo učiniti je zahtijevati knjižnicu ws koju smo upravo instalirali i odmah u istoj uputi nazovite vaš razred Poslužitelj, tada stvaramo instancu s kojom ćemo stvoriti poslužitelj koji radi na portu 8085Ovaj priključak može biti ono čemu imamo pristup. U ovom slučaju koristi se 8085 kako ne bi došlo do sukoba s drugim uslugama koje su trenutno u ovom testnom okruženju.
Budući da smo definirali našu instancu, primijenit ćemo metodu.na () za događaj povezivanja, zatim u uzvratiti poziv s njega prolazimo objekt zvan utičnica, s ovim ćemo primiti poruke od klijenta i napisali smo rutinu da ako primimo riječ "Zdravo" poslužitelj će vratiti poruku, gdje ćemo zauzvrat i nešto ispisati u naredbenoj konzoli. Konačno, ako prekinemo vezu, imat ćemo samo jednu poruku na konzoli.
Nakon što dobijemo naš poslužitelj, vrijeme je za izgradnju našeg klijenta, za njega u datoteci client.html definirat ćemo strukturu u koju ćemo postaviti html oznake i a JavaScript koji će funkcionirati kao veza na naš poslužitelj. Pogledajmo kako izgleda naša datoteka:

 Predlaganje klijenta Websockets

Dio HTML je vrlo jednostavan, imamo unos vrste teksta i gumb za slanje, kao i a div naziva izlaz koji je taj koji će primiti informacije od poslužitelja kako bi ih pokazao korisniku. Zanimljivost dolazi u oznaci gdje prvo što napravimo je stvoriti objekt tipa WebSocket i označavamo rutu na kojoj ga morate pronaći, u našem slučaju to je localhost: 8085 i tako možemo vidjeti da smo ono što smo učinili u server.js. Zatim povezujemo naše elemente za slanje, tekst i izlaz s varijablama koje možemo koristiti.
Zatim definiramo svaku od metoda koje možemo primiti od poslužitelja, pa će svaki put kad nešto pošaljemo biti zabilježeno u našem izlazu, sve zahvaljujući metodi poslati (). Druga metoda koju koristimo je poruka () koji se aktivira samo ako naš poslužitelj odgovori i dodamo rezultat u naš HTML.
Na kraju koristimo metode onclose () Y onerror (), prvi nam daje poruku kada se poveže s Websocket je zaustavljen ili zatvoren, a drugi nas obavještava u slučaju greške. S tim, moramo samo pokrenuti poslužitelj na našoj konzoli i staviti naš primjer u rad, za to koristimo sljedeću naredbu:

 čvor server.js

Ovo će pokrenuti poslužitelj, ali da bismo provjerili funkcionalnost našeg koda, moramo izvršiti datoteku client.html u našem pregledniku po izboru i upisati nešto u okvir za tekst te pritisnuti gumb za slanje, to će generirati komunikaciju sa websocket a odgovor možemo vidjeti po konzoli:

Na slici možemo vidjeti kako naredbena konzola ispisuje primljenu poruku, čak i registrira IP adresu odakle prima podatke, to smo programirali u našoj datoteci server.js, gdje smo također naznačili da ćemo, ako primimo riječ "Hello", poslati poruku odgovora koja je upravo ono što vidimo u prozoru preglednika na istoj slici. Ako osvježimo preglednik, veza je prekinuta, to je registrirala i naša aplikacija, da vidimo:

Konačno, prekinemo vezu u našoj konzoli s CTRL + C Kako bi zaustavili poslužitelj, naš preglednik aktivira rukovatelj pogreškama i tamo ćemo vidjeti novu poruku:

Ako smo bili promatrači, možda smo primijetili nešto važno, niti u jednom trenutku za primanje odgovora nismo morali osvježiti preglednik ili podnijeti zahtjev Ajax, sve je izravno dvosmjerno WebSockets, to je ono što se zove realno vrijeme.
Ono što smo pokazali jedan je od najosnovnijih i ručnih načina koji postoje, međutim nama je važno znati kakav je tijek rada, ali stvarna funkcionalnost spremna za proizvodna okruženja postiže se knjižnicom utičnica.io, ovo čini istu stvar koju smo učinili u vodiču, ali u mnogo kompaktnijem i manje sklonom greškama programera, što nam omogućuje da se usredotočimo samo na logiku aplikacije, a ne toliko na njezin tehnički dio.
Za instalaciju utičnica.io samo moramo učiniti a npm instalirajte socket.io i ovim ćemo iz spremišta preuzeti najnoviju stabilnu verziju knjižnice, što će nam omogućiti početak razvoja.
Ovime smo završili ovaj vodič s kojim smo napravili važan korak Node.js znajući kako koristiti Web -utičnice, ova tehnologija svakim danom postaje sve važnija jer nam pomaže u stvaranju aplikacija o kojima se nikad nije razmišljalo na webu. Također je važno da se dokumentiramo o protokolu jer je to način razumijevanja potencijala onoga što možemo postići jednostavnim razvojem aplikacija.