Share
Node.js și Websockets sunt combinația perfectă pentru a scrie aplicații foarte rapide, fără întârziere, care pot trimite date către un număr mare de clienți. Deci, de ce nu începem să învățăm despre aceste două teme prin construirea unui serviciu de chat! Vom vedea cum să instalăm pachetele Node.js, să servească o pagină statică clientului cu un server web de bază și să configureze Socket.io pentru a comunica cu clientul.
Deci, de ce folosiți acest combo?
Există o mulțime de platforme care pot rula o aplicație de chat, dar prin alegerea Node.js nu trebuie să învățăm o limbă complet diferită, este doar JavaScript, dar server-side.
Node.js este o platformă construită pe timpul de executare JavaScript Chrome, pentru a face ușor de construit aplicații în JavaScript care rulează pe server. Node.js folosește un model de I / O non-blocat, bazat pe evenimente, ceea ce îl face perfect pentru construirea de aplicații în timp real.
Din ce în ce mai multe aplicații Node.js sunt scrise cu o comunicare în timp real. Un exemplu celebru este BrowserQuest de la Mozilla, un MMORPG scris integral în Node.js a cărui cod sursă a fost lansat pe Github.
Node.js vine cu un manager de pachete încorporat: npm. Îl vom folosi pentru a instala pachete care vor ajuta la accelerarea procesului nostru de dezvoltare a aplicațiilor.
Vom folosi trei pachete pentru acest tutorial: Jade, Express și Socket.io.
Caracteristica principală a aplicației noastre este comunicarea în timp real între client și server.
HTML5 introduce Websockets, dar este departe de a fi acceptat de toți utilizatorii, deci avem nevoie de o soluție de rezervă.
Socket.io este soluția noastră de rezervă: va testa compatibilitatea Websocket și dacă nu este acceptată va folosi Adobe Flash, AJAX sau iFrame.
În cele din urmă, suportă un set foarte mare de browsere:
De asemenea, oferă funcții foarte ușoare de comunicare între server și client, pe ambele părți.
Să începem prin instalarea celor trei pachete de care avem nevoie.
Npm ne permite să instalăm pachetele foarte rapid, folosind o singură linie, astfel încât mai întâi să mergeți în directorul dvs. și să descărcați npm pachetele necesare:
npm instalează expres jade socket.io
Acum, putem începe construirea serverului nostru pentru a servi pagina principală.
Vom salva întregul cod de server în a "server.js" fișier care va fi executat de Node.js.
Pentru a servi pagina noastră statică vom folosi Express, un pachet care simplifică întregul proces de trimitere a paginilor de pe server.
Deci, să includeți acest pachet în proiectul nostru și să porniți serverul:
Accentsconagua
var expres = cere ('expres'), app = express.createServer (); Apoi, trebuie să configurați Express pentru a servi pagina din vizualizările de repertoriu cu motorul de template-uri Jade pe care l-am instalat mai devreme.
Express utilizează în mod prestabilit un fișier de aspect, dar nu avem nevoie de el, deoarece vom servi doar o pagină, deci, în schimb, îl vom dezactiva.
Express poate servi, de asemenea, un repertoriu static la client ca un server web clasic, deci vom trimite un "public" care va conține toate fișierele noastre JavaScript, CSS și imagine.
app.set ("vizualizări", __dirname + '/ views); app.set ("motor de vizualizare", "jad"); app.set ("opțiuni de vizualizare", layout: false); app.configure (funcție () app.use (expres.static (__ dirname + '/ public'));); Apoi, să creăm două dosare în dosarul nostru de proiect numit "public" și „opinii“.
Acum trebuie doar să configuram Express pentru a servi a "Home.jade" fișier, pe care îl vom crea într-un moment, apoi setăm Express pentru a asculta un anumit port.
Voi folosi portul 3000 dar poți folosi orice ai prefera.
app.get ('/', funcția (req, res) res.render ('home.jade');); app.listen (3000); 
Node.js utilizează motoare template pentru a servi pagini web. Este util să trimiteți pagini dinamice și să le construiți mai repede.
În acest tutorial, vom folosi Jade. Sintaxa sa este foarte clară și suportă tot ceea ce avem nevoie.
"Jade este un motor de template-uri de înaltă performanță puternic influențat de Haml și implementat cu JavaScript pentru nod."
Acum, nu voi trece peste Jade în detaliu, dacă aveți nevoie de mai mult ajutor, puteți găsi foarte bine o documentație scrisă despre Gothub repo.
Am instalat Jade mai devreme, dar trebuie să-l includem în programul nostru server.js fișier cum am făcut pentru Express.
Prin convenție, includem bibliotecile noastre în partea de sus a fișierului nostru pentru a le folosi mai târziu, fără a trebui să verificăm dacă acestea sunt deja incluse. Deci plasați următorul cod în partea de sus a dvs. "server.js" fișier:
var jade = necesită ("jade"); Și asta completează configurația noastră Jade. Express este deja setat să utilizeze Jade cu fișierele noastre de vizualizare, pentru a trimite un răspuns HTML, trebuie doar să creăm acel fișier.
Dacă începem serverul nostru acum, acesta se va prăbuși deoarece cerem aplicației noastre să trimită o pagină care încă nu există.
Nu vom crea o pagină completă, ceva simplu, care are un titlu, un container pentru mesaje, o zonă de text, un buton de trimitere și un contor de utilizatori.
Mergeți și creați o "Home.jade" în interiorul paginii „opinii“ dosar cu următorul cod:
doctype 5 html titlu Titlul scriptului (src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') script (src = "/ socket.io/socket. io.js ") script (src =" script.js ") antetul div.container h1 O aplicație de chat cu intrare Node.js și Socket.io (tip = 'text') # buton pseudoInput # pseudoSet Set Pseudo div # chatEntries div # chatControlul de intrare (tip = 'text') # messageInput butonul # submit Trimite
"Jade este vorba de indentare"
Limba Jade este vorba despre indentare. După cum puteți vedea, nu este necesar să închidem containerele noastre, doar că este suficientă încadrarea copiilor containerului părinte.
De asemenea, folosim o perioadă "" și un semn de lire "#" pentru a indica clasa sau ID-ul elementului, la fel ca într-un fișier CSS.
De asemenea, facem legătura în trei scripturi din partea de sus a fișierului. Primul este jQuery de la Google CDN, urmând să avem scriptul Socket.io, care este servit automat de pachet, și în final un "script.js" fișier care va păstra toate funcțiile personalizate JS.
Socket.io este bazat pe eveniment, la fel ca nodul. Scopul său este de a face aplicații în timp real în fiecare browser și dispozitiv mobil, blurând liniile dintre aceste mecanisme de transport diferite. Este gratuit, în timp real, și JavaScript de 100%.
Ca și celelalte module, trebuie să-l includem în programul nostru server.js fişier. Vom lange, de asemenea, pe serverul nostru expres pentru a asculta conexiuni de la aceeași adresă și port.
var io = necesită ('socket.io'). asculta (app); Primul eveniment pe care îl vom folosi este evenimentul de conectare. Acesta este concediat atunci când un client încearcă să se conecteze la server; Socket.io creează un nou soclu pe care îl vom folosi pentru a primi sau a trimite mesaje către client.
Să începem prin inițializarea conexiunii:
io.sockets.on ("conexiune", funcție (socket) // celelalte evenimente ...); Această funcție are două argumente, primul este evenimentul, iar al doilea este funcția de apel invers, cu obiectul socket.
Folosind astfel de coduri, putem crea evenimente noi pe client și pe server cu Socket.io. Vom seta "Pseudo" eveniment și "mesaj" evenimentul următor.
Pentru a face acest lucru este foarte simplu, pur și simplu folosim aceeași sintaxă, dar de data aceasta cu noi priză obiect și nu cu "io.sockets" (cu un "s") obiect. Acest lucru ne permite să comunicăm în mod specific cu un singur client.
Deci, în interiorul funcției noastre de conectare, să adăugăm în "Pseudo" codul evenimentului.
socket.on ('setPseudo', funcție (date) socket.set ('pseudo', date);); Funcția de apel invers are un argument, acesta este datele de la client și în cazul nostru conține pseudo. Cu "a stabilit" funcția, atribuim o variabilă la soclu. Primul argument este numele acestei variabile, iar al doilea este valoarea.
Apoi, trebuie să adăugăm codul pentru "mesaj" eveniment. Acesta va primi pseudo-ul utilizatorului, va transmite un tablou tuturor clienților care conține mesajul pe care l-am primit, precum și pseudo-ul utilizatorului și îl vom înregistra în consola noastră.
socket.on ('mesaj', functie (mesaj) socket.get ('pseudo', functie (eroare, nume) mesaj ", date); console.log (" user "+ nume +" trimite acest mesaj: "+ mesaj);)); Aceasta completează configurația noastră de server. Dacă doriți, puteți merge și utilizați alte evenimente pentru a adăuga noi funcții în chat.
Lucru frumos despre Socket.io este că nu trebuie să ne facem griji cu privire la manipularea deconectării clienților. Când se deconectează, Socket.io nu va mai primi răspunsuri la mesajele "heartbeat" și va dezactiva sesiunea asociată cu clientul. Dacă a fost doar o deconectare temporară, clientul va reconecta și va continua sesiunea.
Acum că serverul nostru este configurat pentru a gestiona mesajele, avem nevoie de un client pentru a le trimite.
Partea client a Socket.io este aproape la fel ca server-side. De asemenea, funcționează cu evenimente personalizate și vom crea aceleași ca și pe server.
Deci, mai întâi, creați un "script.js" fișier în interiorul public pliant. Vom stoca toate funcțiile noastre în interiorul ei.
Mai întâi trebuie să pornim conexiunea socket.io între client și server. Acesta va fi stocat într-o variabilă, pe care o vom folosi mai târziu pentru a trimite sau primi date. Atunci când conexiunea nu este transmisă niciun argument, se va conecta automat la serverul care va difuza pagina.
Var socket = io.connect ();
Apoi, să creăm câteva funcții de ajutor pe care le vom avea nevoie mai târziu. Prima este o funcție simplă pentru a adăuga un mesaj pe ecran cu pseudo-ul utilizatorului.
funcția addMessage (msg, pseudo) $ ("# chatEntries") append (''+ pseudo +': '+ msg +'
„); Acest ajutor utilizează funcția append din jQuery pentru a adăuga o div la sfârșitul #chatEntries div.
Acum vom scrie o funcție pe care o putem apela când vrem să trimitem un nou mesaj.
funcția sentMessage () if ($ ('# messageInput') val ()! = "") socket.emit ('message', $ ('messageinput'). addMessage ($ ('# messageInput') val (), "Me", noua dată () toISOString (), true); $ ('# messageInput') val ("); În primul rând, verificăm că textarea noastră nu este goală, atunci trimitem un pachet numit "mesaj" la serverul care conține textul mesajului, îl imprimați pe ecran cu ajutorul mesajului nostru "AddMessage" și, în final, eliminăm tot textul din textarea.
Acum, când clientul deschide pagina, trebuie să setăm mai întâi pseudo-ul utilizatorului. Această funcție va trimite pseudo la server și va afișa butonul textarea și butonul de trimitere.
setPseudo () if ($ ("# pseudoInput")) val ()! = "") socket.emit ('setPseudo'; $ ( '# ChatControls') arată ().; $ ( '# PseudoInput') ascunde ().; $ ( '# PseudoSet') ascunde ().; În plus, ascundem comenzile de setare pseudo când este trimis către server.
Acum, așa cum am făcut și pe server, trebuie să ne asigurăm că putem primi mesaje primite și de data aceasta le vom imprima pe ecran. Vom folosi aceeași sintaxă, dar de data aceasta vom apela "AddMessage" funcţie.
socket.on ("mesaj", funcție (date) addMessage (date ['mesaj'], date ['pseudo']);); La fel ca în configurația serverului nostru, pachetul trimis clientului este o matrice care conține mesajul și pseudo. Așa că sunăm pe noi "AddMessage" funcția care transmite mesajul și pseudo-ul, pe care îl extragem din pachetul de date recepționat.
Acum trebuie doar să adăugăm funcția de inițializare care este declanșată odată ce pagina este încărcată complet.
$ ("# chatControls") () ($) ("# chatControls"). ) sentMessage (););); În primul rând, ascundem comenzile de chat înainte de a fi setat pseudo-ul și apoi am setat două ascultători de clicuri care ascultă clicurile pe cele două butoane de trimitere. Primul este pentru pseudo și al doilea este pentru mesaje.
Și asta împachetează scenariul nostru din partea clientului.
Acum avem un serviciu de chat activ. Pentru ao porni, trebuie doar să executați următoarea comandă:
nod server.js
În terminalul dvs. trebuie să primiți un mesaj de la Socket.io spunând că serverul este pornit. Pentru a vedea pagina dvs. mergeți la 127.0.0.1:3000 (sau portul pe care l-ați ales anterior).
Designul este foarte simplu, dar puteți adăuga cu ușurință într-o foaie de stil cu tranziții CSS3 pentru mesajele primite, sunete HTML5 sau Bootstrap de pe Twitter.
După cum puteți vedea, script-urile server și client sunt destul de similare: aceasta este puterea Node.js. Puteți crea o aplicație fără a trebui să scrieți codul de două ori.
În cele din urmă, poate ați observat că a fost nevoie de doar 25 de linii de cod în interiorul nostru server.js fișier pentru a crea o aplicație de chat funcțională, cu performanțe uimitoare. Este foarte scurt, dar funcționează foarte bine.
Acum, dacă sunteți interesat, am creat o aplicație de chat mai bună, cu un design bun, împreună cu câteva caracteristici suplimentare. Acesta este găzduit pe Nodester și codul sursă este pe Github.
Iată o previzualizare a acesteia.
Vă mulțumim pentru lectură.
