Share
NodeJS îmi dă posibilitatea de a scrie cod back-end în una dintre limbile mele favorite: JavaScript. Este tehnologia perfectă pentru crearea de aplicații în timp real. În acest tutorial, vă vom arăta cum să construiți o aplicație de chat web, folosind ExpressJS și Socket.io.
Apropo, daca doriti sa gasiti o solutie de chat gata utilizata folosind Node.js, aruncati o privire la Yahoo! Messenger node.JS BOT pe Envato Market.
Yahoo! Messenger node.JS BOT pe Envato Market Desigur, primul lucru pe care trebuie să-l faceți este să instalați NodeJS pe sistemul dvs. Dacă sunteți utilizator Windows sau Mac, puteți vizita nodejs.org și descărcați programul de instalare. Dacă preferați Linux, aș sugera să vă referiți la acest link. Deși nu voi trece mai multe detalii despre acest lucru, dacă întâmpinați probleme de instalare, mă bucur să vă ajut; lasati un comentariu sub acest post.
Odată ce ați instalat NodeJS, sunteți gata să configurați instrumentele necesare.
Continuând pe, într-un director gol, creați un package.json fișier cu următorul conținut.
"nume": "RealTimeWebChat", "versiune": "0.0.0", "descriere": "chat în timp real", "dependente" ultimul "," jad ":" cel mai recent "," autor ":" dezvoltator "
Prin utilizarea consolei (în fereastra de comandă Windows), navigați la dosarul dvs. și executați:
npm install
În câteva secunde, veți avea toate dependentele necesare descărcate la node_modules director.
Să începem cu un server simplu, care va difuza pagina HTML a aplicației și apoi vom continua cu biții mai interesanți: comunicarea în timp real. Creaza un index.js fișier cu următorul cod expresjs de bază:
Accentsconagua
var express = necesită ("expres"); var app = expres (); var port = 3700; app.get ("/", funcția (req, res) res.send ("Funcționează!");); app.listen (port); console.log ("Ascultarea pe port" + port); Mai sus, am creat o aplicație și am definit portul. Apoi, am înregistrat o rută, care, în acest caz, este o cerere simplă GET fără parametri. Deocamdată, manipulatorul rutei trimite pur și simplu un text clientului. În cele din urmă, desigur, în partea de jos, conducem serverul. Pentru a inițializa aplicația, executați din consola:
nod index.js
Serverul rulează, deci ar trebui să puteți deschide http://127.0.0.1:3700/ si vezi:
Functioneaza!
Acum, în loc de "Functioneaza" ar trebui să servească HTML. În loc de HTML pur, poate fi util să folosiți un motor de șablon. Jade este o alegere excelentă, care are o bună integrare cu ExpressJS. Aceasta este ceea ce folosesc de obicei în proiectele mele. Creați un director, numit TPL, și puneți următoarele page.jade fișier în el:
!!! html head title = "Chat în timp real" corp #content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; .field (stil = 'lățime: 350px;') input.send (tip = 'buton', valoare = 'trimite')
Sintaxa lui Jade nu este atât de complexă, dar, pentru un ghid complet, vă sugerez să vă referiți la jade-lang.com. Pentru a utiliza Jade cu ExpressJS, avem nevoie de următoarele setări.
app.set ("vizualizări", __dirname + '/ tpl'); app.set ("motor de vizualizare", "jad"); app.engine ("jade", cer ("jade"). express); app.get ("/", funcția (req, res) res.render ("pagina");); Acest cod informează Express în cazul în care sunt fișierele de șablon și ce motor de șabloane este folosit. Toate specifică funcția care va procesa codul șablonului. Odată ce totul este setat, putem folosi .face metodă a raspuns obiect, și pur și simplu trimite codul nostru Jade la utilizator.
Rezultatul nu este special în acest moment; nimic mai mult decât a div element (cel cu id conţinut), care va fi utilizat ca suport pentru mesajele de chat și două comenzi (câmpul de introducere și butonul), pe care îl vom folosi pentru a trimite mesajul.
Pentru că vom folosi un fișier JavaScript extern care va deține logica front-end, trebuie să informăm ExpressJS unde să căutăm astfel de resurse. Creați un director gol, public, și adăugați următoarea linie înainte de apelarea la .asculta metodă.
app.use (expres.static (__ dirname + '/ public'));
Până acum, bine; avem un server care răspunde cu succes cererilor GET. Acum, este timpul să adăugați Socket.io integrare. Schimbați această linie:
app.listen (port);
la:
var io = necesită ('socket.io'). asculta (app.listen (port)); Deasupra, am trecut serverul ExpressJS la Socket.io. De fapt, comunicarea noastră în timp real se va întâmpla în același port.
Mergând înainte, trebuie să scriem codul care va primi un mesaj de la client și să îl trimită tuturor celorlalți. Fiecare aplicație Socket.io începe cu un conexiune handler. Ar trebui să avem una:
io.sockets.on ('conexiune', functie (socket) socket.emit ('message', message: 'welcome to chat')); sockets.emit ("mesaj", date););); Obiectul, priză, care este transmisă handlerului dvs., este de fapt soclul clientului. Gândiți-vă la aceasta ca la o joncțiune între serverul dvs. și browserul utilizatorului. După o conexiune de succes, trimitem un mesaj Bine ati venit tipul de mesaj și, bineînțeles, să legeți un alt handler care va fi folosit ca receptor. Ca urmare, clientul trebuie să emită un mesaj cu numele, trimite, pe care o vom prinde. În continuare, transmitem pur și simplu datele trimise de utilizator către toate celelalte prize cu io.sockets.emit.
Cu codul de mai sus, back-end-ul nostru este gata să primească și să trimită mesaje către clienți. Să adăugăm un cod frontal.
Crea chat.js, și puneți-l în interiorul public directorul aplicației dvs. Inserați următorul cod:
window.onload = funcție () var mesaje = []; var socket = io.connect ("http: // localhost: 3700"); câmp var = document.getElementById ("câmp"); var trimiteButton = document.getElementById ("trimite"); var content = document.getElementById ("conținut"); socket.on ('mesaj', funcție (date) if (data.message) mesaje.push (data.message); var html = "; pentru (var i = 0; i Logica noastră este înfășurată într-un .onload handler doar pentru a vă asigura că toate marcajele și JavaScript-ul extern sunt încărcate complet. În următoarele câteva linii, vom crea o matrice, care va stoca toate mesajele, a priză obiect și câteva comenzi rapide pentru elementele noastre DOM. Din nou, similar cu back-end-ul, legăm o funcție, care va reacționa la activitatea socket-ului. În cazul nostru, acesta este un eveniment numit mesaj. Atunci când apare un astfel de eveniment, ne așteptăm să primim un obiect, date, cu proprietatea, mesaj. Adăugați acest mesaj la spațiul nostru de stocare și actualizați-l conţinut div. Am inclus, de asemenea, logica pentru trimiterea mesajului. Este destul de simplu, pur și simplu emite un mesaj cu numele, trimite.
Dacă vă deschideți http: // localhost: 3700, veți întâlni unele popup erori. Asta pentru că trebuie să ne actualizăm page.jade pentru a conține fișierele JavaScript necesare.
title title = Script script "chat în timp real" (src = '/ chat.js) (src =' / socket.io/socket.io.js ')
Observați că Socket.io gestionează livrarea socket.io.js. Nu trebuie să vă faceți griji cu privire la descărcarea manuală a acestui fișier.
Putem rula din nou serverul nostru nod index.js în consola și deschisă http: // localhost: 3700. Ar trebui să vedeți mesajul de întâmpinare. Desigur, dacă trimiteți ceva, ar trebui să apară în conținutul său div. Dacă doriți să vă asigurați că funcționează, deschideți o filă nouă (sau, mai bine, un browser nou) și încărcați aplicația. Lucrul minunat despre Socket.io este că funcționează chiar dacă opriți serverul NodeJS. Front-end-ul va continua să funcționeze. Odată ce serverul este încărcat din nou, chat-ul dvs. va fi bine prea.
În starea actuală, chat-ul nostru nu este perfect și necesită îmbunătățiri.
Prima schimbare pe care trebuie să o facem este identitatea mesajelor. În prezent, nu este clar care sunt mesajele trimise de către cine. Cel mai bun lucru este că nu trebuie să ne actualizăm codul NodeJS pentru a realiza acest lucru. Acest lucru se datorează faptului că serverul transmite pur și simplu date obiect. Deci, trebuie să adăugăm o proprietate nouă și să o citim mai târziu. Înainte de a face corecții chat.js, să adăugăm un nou intrare , unde utilizatorul își poate adăuga numele. În page.jade, schimba controale div:
.controale | Nume: intrare # nume (stil = 'lățime: 350px;') br intrare # câmp (stil = 'width: 350px;') input # send
În continuare, în code.js:
window.onload = funcție () var mesaje = []; var socket = io.connect ("http: // localhost: 3700"); câmp var = document.getElementById ("câmp"); var trimiteButton = document.getElementById ("trimite"); var content = document.getElementById ("conținut"); var nume = document.getElementById ("nume"); socket.on ("mesaj", funcție (date) if (data.message) mesaje.push (date); var html = "; pentru (var i = 0; i„; html + = mesaje [i] .message + '
„; content.innerHTML = html; altceva console.log ("Există o problemă:", date); ); sendButton.onclick = funcția () if (nume.value == "") alert ("Vă rugăm să introduceți numele!"); altceva var text = field.value; socket.emit ('trimite', message: text, username: name.value); ; Pentru a rezuma aceste modificări, am:
intrare campnume de utilizator proprietatea asupra obiectului, care este trimisă către serverDacă numărul mesajelor devine prea mare, utilizatorul va trebui să deruleze div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
Rețineți că soluția de mai sus nu va funcționa probabil în IE7 și mai jos, dar este în regulă: este timpul ca IE7 să dispară. Cu toate acestea, dacă doriți să asigurați asistență, nu ezitați să utilizați jQuery:
$ ( "# Conținut") scrollTop ($ ( "# conținut") [0] .scrollHeight.);
De asemenea, ar fi bine dacă câmpul de intrare este șters după trimiterea mesajului:
socket.emit ('trimite', message: text, username: name.value); field.value = ""; Problema finală plictisitoare este click-ul trimite buton de fiecare dată. Cu o atingere de jQuery, putem asculta când utilizatorul apasă introduce cheie.
$ (document) .ready (functie () $ ("# field"). Functia, Trimite mesaj, ar putea fi înregistrate, după cum urmează:
sendButton.onclick = sendMessage = funcția () ...;
Rețineți că aceasta nu este o bună practică, deoarece este înregistrată ca o funcție globală. Dar, pentru testul nostru mic, va fi bine.
NodeJS este o tehnologie extrem de utilă și ne oferă o mare putere și bucurie, mai ales atunci când luăm în considerare faptul că putem scrie un script JavaScript. După cum puteți vedea, cu doar câteva rânduri de cod, am reușit să scriem o aplicație de chat real-time în întregime. Destul de curat!
Doriți să aflați mai multe despre construirea de aplicații web cu ExpressJS? Te-am acoperit!
