„Websocket“ su „Node.js“

Žiniatinklio programos keitėsi ir tobulėjo, todėl vartotojų poreikiai skiriasi nuo tada, kai tinkle buvo sukurtas pirmasis ryšio protokolas. Vadinasi, protokolas HTTP keitėsi bėgant metams, bet dar nepasiekė realaus laiko lygio, pavyzdžiui, ryšio TCP tarp dviejų komandų.
Šie apribojimai, o ne kenkti kūrėjams ir vartotojams, tapo motyvacijos ir kūrybiškumo šaltiniu, sukuriančiu sprendimus, leidžiančius ne tik imituoti perdavimo sistemą realiu laiku, bet ir per HTTP darykite tai beveik natūraliai.
„Websocket“Štai kur „Websocket“, palyginti naujas protokolas, kurį palaiko tik moderniausios naršyklės, o tai leidžia mums panaikinti visus HTTP apribojimus ir taip efektyviai bendrauti per antraštes GET.
„Websocket“ Tai vis dar aktyvaus brendimo laikotarpis, todėl labai tikėtina, kad jo nerasime naujuose sprendimuose, laimei, Node.js jau turime tam tikrų įrankių, leidžiančių juos tvarkyti, nesiremdami savo išradingumu kurdami žemesnio lygio įrankius.
ReikalavimaiTai yra pažangi pamoka, todėl pirmiausia mums reikės funkcinio diegimo Node.js Mūsų sistemoje galime pažvelgti į šią mokymo programą prieš tęsdami jos gilinimą, be to, mums reikės administratoriaus leidimų, kad galėtume įdiegti bibliotekas, kurias ketiname naudoti. Turime būti susipažinę su sąvokomis „JavaScript“ pavyzdžiui perskambink ir anonimines funkcijas. Galiausiai turime turėti tokį teksto redaktorių Aukščiausias tekstas tai leidžia mums parašyti įvairius pavyzdžiuose esančius kodus.
Norėdami pradėti kurti programą, kuri leidžia mums naudotis Žiniatinklio lizdai Pirmiausia turime sukurti nedidelę struktūrą, tai labai paprasta, bet būtina, šią struktūrą sudarys:
1- Aplankas, kuriame laikysime savo projekto failus.
2- Failas pavadinimu server.js, šis failas, kaip rodo jo pavadinimas, bus serveris, per kurį ketiname užmegzti ryšį realiuoju laiku naudojant Žiniatinklio lizdai.
3- Failas pavadinimu klientas.html, šis failas bus sąsaja, skirta bendrauti su mūsų serveriu per naršyklę, ją būtina turėti, kad galėtume siųsti ir gauti atitinkamą informaciją.
Kadangi mūsų struktūra yra apibrėžta dabar, galime pradėti rinkti kelias kodo eilutes, todėl pirmiausia turime įdiegti išorinę biblioteką, vadinamą ws mūsų aplinkoje, nes būtent tai leis mums naudoti aptariamą protokolą. Norėdami įdiegti šią biblioteką, mes tiesiog turime atidaryti konsolę Node.js, mes esame aplanke, kuriame bus mūsų failai, ir mes pateikiame šią komandą:

 npm įdiegti ws

Kai jį vykdome, savo komandų pulte galime pamatyti tokį rezultatą:

Įdiegę biblioteką, galime tęsti savo darbą, dabar savo faile server.js Turime parašyti šį kodą, pirmiausia pažiūrėkime, iš ko jis susideda, tada paaiškinsime:

 var WSServer = reikalauti ('ws'). Serveris, wss = naujas WSServer ({prievadas: 8085}); wss.on ('ryšys', funkcija (lizdas) {socket.on ('pranešimas', funkcija (msg) {console.log ('Gauta:', žinutė, '\ n', 'Iš IP:', lizdas). upgradeReq.connection.remoteAddress); if (msg === 'Hello') {socket.send ('Yes it works!');}}); socket.on ('close', function (code, desc) {console .log ('Neprisijungęs:' + kodas + '-' + aprašymas);});});

Pirmiausia reikia bibliotekos ws ką tik įdiegėme ir iškart toje pačioje instrukcijoje paskambiname jūsų klasei Serveris, tada sukuriame egzempliorių, su kuriuo ketiname sukurti serverį, kuris veikia uoste 8085Šis prievadas gali būti bet koks, prie kurio turime prieigą. Šiuo atveju naudojamas 8085, kad nebūtų konflikto su kitomis paslaugomis, kurios šiuo metu yra šioje bandymo aplinkoje.
Kadangi dabar apibrėžėme savo egzempliorių, taikysime metodą.ant () prisijungimo įvykiui, tada perskambink iš jo praeiname objektą, vadinamą lizdas, tai mes gausime žinutes iš kliento ir parašysime rutiną, kad jei gausime žodį "Sveiki" serveris grąžins pranešimą, kur savo ruožtu taip pat ką nors atspausdinsime komandų pulte. Galiausiai, jei uždarysime ryšį, konsolėje turėsime tik vieną pranešimą.
Kai turėsime savo serverį, laikas sukurti savo klientą faile klientas.html mes nustatysime struktūrą, kur įdėsime html žymas ir „JavaScript“ kuris veiks kaip nuoroda į mūsų serverį. Pažiūrėkime, kaip atrodo mūsų failas:

 „Websockets“ kliento pateikimas

Dalis HTML yra gana paprasta, mes turime teksto tipo įvestį ir pateikimo mygtuką, taip pat a div vadinama išvestimi, kuri gaus informaciją iš serverio ir parodys ją vartotojui. Įdomus dalykas yra etiketėje, kur pirmiausia mes sukuriame tokio tipo objektą „WebSocket“ ir nurodome maršrutą, kuriame jūs turite jį rasti, mūsų atveju tai yra vietinis šeimininkas: 8085 ir todėl galime pamatyti, ką padarėme server.js. Tada susiejame siuntimo, teksto ir išvesties elementus su kintamaisiais, kuriuos galime naudoti.
Tada mes apibrėžiame kiekvieną metodą, kurį galime gauti iš serverio, todėl kiekvieną kartą, kai ką nors siunčiame, jis bus įrašytas į mūsų išvestį, visų metodo dėka siųsti (). Kitas mūsų naudojamas metodas yra pranešimas () kuris suaktyvinamas tik tuo atveju, jei mūsų serveris reaguoja ir rezultatą įtraukiame į savo HTML.
Galiausiai mes naudojame metodus arti () Y klaida (), pirmasis suteikia mums pranešimą, kai ryšys su „Websocket“ yra sustabdytas arba uždarytas, o antrasis informuoja mus, jei įvyko klaida. Turime tik paleisti serverį savo konsolėje ir pritaikyti savo pavyzdį, tam naudojame šią komandą:

 mazgas serveris.js

Tai paleis serverį, tačiau norėdami patikrinti savo kodo funkcionalumą, turime paleisti savo client.html failą pasirinktoje naršyklėje, parašyti ką nors teksto laukelyje ir paspausti siuntimo mygtuką, taip bus užmegztas ryšys su interneto lizdas ir mes galime pamatyti konsolės atsakymą:

Paveikslėlyje matome, kaip komandų konsolė spausdina gautą pranešimą, netgi užregistruoja IP adresą, iš kurio ji gauna duomenis, tai mes užprogramavome savo faile server.js, kur taip pat nurodėme, kad gavę žodį „Labas“, atsiųsime atsakymo pranešimą, kurį matome naršyklės lange tame pačiame paveikslėlyje. Dabar, jei atnaujiname naršyklę, ryšys nutrūksta, tai taip pat užregistruoja mūsų programa, pažiūrėkime:

Galiausiai, jei uždarome ryšį savo konsolėje su CTRL + C Norėdami sustabdyti serverį, mūsų naršyklė suaktyvina klaidų tvarkytoją ir ten pamatysime naują pranešimą:

Jei buvome stebėtojai, galbūt pastebėjome ką nors svarbaus, niekada neturėjome atnaujinti naršyklės ar pateikti užklausos, kad gautume atsakymus Ajax, viskas buvo dvikryptis tiesiogiai „WebSockets“, tai vadinama realiuoju laiku.
Tai, ką mes parodėme, yra vienas iš elementariausių ir rankinių egzistavimo būdų, tačiau mums naudinga žinoti, kokia yra darbo eiga, tačiau tikrasis funkcionalumas, paruoštas gamybinei aplinkai, pasiekiamas naudojant biblioteką lizdas.io, tai daro tą patį, ką mes padarėme pamokoje, tačiau kur kas kompaktiškesnis ir mažiau linkęs į kūrėjo klaidas, o tai leidžia mums sutelkti dėmesį tik į programos logiką, o ne tiek į techninę jos dalį.
Įdiegimui lizdas.io mes tiesiog turime padaryti a npm įdiegti lizdą.io ir tai atlikę iš saugyklos atsisiųsime naujausią stabilią bibliotekos versiją, kuri leis mums pradėti kurti.
Tuo baigėme šią pamoką, su kuria žengėme svarbų žingsnį Node.js žinant kaip naudotis Žiniatinklio lizdai, ši technologija tampa vis svarbesnė kiekvieną dieną, nes padeda mums kurti programas, apie kurias niekada nebuvo pagalvota žiniatinklyje. Taip pat svarbu, kad mes dokumentuotume apie protokolą, nes tai yra būdas suprasti, ką galime pasiekti tiesiog kurdami programas.