Chat în timp real cu Modulus și Node.js

În acest tutorial, vă voi arăta cum să implementați o aplicație de chat în timp real cu Node.js, Socket.IO și MongoDB, iar apoi vom implementa această aplicație împreună cu Modulus.

În primul rând, permiteți-mi să vă arăt aspectul final al aplicației pe care o vom avea la sfârșitul articolului.

Node.js va fi nucleul aplicației, cu Express ca MVC, MongoDB pentru baza de date și Socket.IO pentru comunicare în timp real. Când vom termina, vom implementa aplicația noastră la Modulus. Partea MongoDB există de fapt în modulul Modulus. 

1. Scenariu

1. John dorește să utilizeze aplicația noastră și o deschide în browser.
2. Pe prima pagină, selectează o poreclă în timpul chatului și se conectează la chat.
3. În zona de text scrie ceva și apasă Enter.
4. Textul este trimis la un serviciu RESTful (Express) și acest text este scris în MongoDB.
5. Înainte de a scrie în MongoDB, același text va fi difuzat utilizatorilor conectați în prezent la aplicația de chat.

După cum puteți vedea, aceasta este o aplicație foarte simplă, dar acoperă aproape totul pentru o aplicație web. Nu există niciun sistem de canale în această aplicație, dar puteți rula codul sursă și implementa modulul canal pentru practică.

2. Proiectarea de la zero

Voi încerca să explic mai întâi piesele mici ale proiectului și să le combinăm la sfârșit. Voi începe de la spate până la capătul din față. Deci, să începem cu obiectele de domeniu (modele MongoDB).

2.1. Model

Pentru abstractizarea bazei de date, vom folosi Mongoose. În acest proiect, avem un singur model numit Mesaj. Acest model de mesaj contine numai text, creeaza o data,și autor. Nu există un model pentru autor Utilizator, deoarece nu vom implementa pe deplin un sistem de înregistrare / autentificare a utilizatorilor. Va fi o pagină simplă de furnizare de porecle și acest pseudonim va fi salvat într-un modul cookie. Acest lucru va fi folosit în Mesaj model ca text în autor camp. Puteți vedea un exemplu de model JSON de mai jos:

text: "Bună, există vreun dezvoltator Full Stack aici?" autor: "john_the_full_stack", createDate: "2015.05.15"

Pentru a crea astfel de documente, puteți implementa un model folosind funcțiile Mongoose de mai jos:

var mongoose = necesită ('mongoose') var Mesaj = new mongoose.Schema (autor: String, mesaj: String, createDate: type: Date, default: Date.now); mongoose.model ('Message', Message)

Importați modulul Mongoose, definiți modelul cu câmpurile și atributele câmpului în format JSON și creați un model cu numele Mesaj. Acest model va fi inclus în paginile pe care doriți să le utilizați.

Poate aveți o întrebare despre motivul pentru care stocăm mesajul în baza de date, când transmitem deja acest mesaj utilizatorului în același canal. Este adevărat că nu trebuie să stocați mesaje de chat, dar am vrut doar să explic stratul de integrare a bazei de date. Oricum, vom folosi acest model în proiectul nostru în interiorul controlorilor. controlerele?

2.2. Controlor

Așa cum am spus mai devreme, vom folosi Express pentru partea MVC. Și Caici este reprezentat de Controlor. Pentru proiectele noastre, vor exista doar două puncte finale pentru mesagerie. Una dintre ele este pentru încărcarea mesajelor de chat recente, iar cea de-a doua este pentru manipularea mesajelor trimise în chat pentru a fi stocate în baza de date și apoi difuzarea în canal. 

... app.get ('/ chat', funcția (req, res) res.sendFile (__dirname + '/index.html');); app.get ('/ login', funcția (req, res) res.sendFile (__ dirname + '/login.html');); app.post ('/ messages', funcția (req, res, next) var mesaj = req.body.message; var autor = req.body.author; var mesajModel = nou Mesaj (); messageModel.author = author; () () (err, result) if (! err) Message.find ) sort ('- createDate' mesaje) io.emit ("mesaj", mesaje);)); res.send ("Mesaj expediat!"); altceva res.send ("Eroare tehnică a apărut!"); app.get ('/ messages', functie (req, res, next) Message.find ) sort ('- createDate'). json (mesaje););); ... 

Primele și celelalte două controlere sunt doar pentru afișarea fișierelor HTML statice pentru paginile de chat și de conectare. Al treilea este pentru manipularea cererii de post la / mesajepunct final pentru crearea de mesaje noi. În acest controler, în primul rând corpul solicitării este convertit în modelul de mesaj și apoi acest model este salvat în baza de date utilizând funcția Mongoose Salvați. 

Nu mă voi arunca foarte mult în Mongoose - poți să te uiți la documentație pentru detalii suplimentare. Puteți oferi o funcție de retur pentru funcția de salvare pentru a verifica dacă există sau nu o problemă. Dacă se va reuși, am reținut ultimele cinci înregistrări sortate în ordine descrescătoare creeaza o data, și au transmis cinci mesaje clienților din canal. 

Bine, am terminat MC.Să trecem la Vedere parte.

2.3. Vedere

În general, în cadrul Express se poate utiliza un motor de șablon precum Jade, EJS, Handlebars etc. Cu toate acestea, avem o singură pagină și acesta este un mesaj de chat, așa că îl voi servi în mod static. De fapt, așa cum am spus mai sus, există încă două controlere pentru a servi această pagină statică HTML. Puteți vedea următoarele pentru a difuza o pagină HTML statică.

app.get ('/ chat', funcția (req, res) res.sendFile (__ dirname + '/ index.html');); app.get ('/ login', funcția (req, res) res.sendFile (__ dirname + '/login.html'););

Acest parametru pur și simplu utilizează index.html și login.html res.sendFile. Ambiiindex.html și login.html se află în același director ca server.js, de aceea am folosit __dirname înainte de numele fișierului HTML.

2.4. În față

În pagina front-end, am folosit Bootstrap și nu este nevoie să explic cum am reușit să fac asta. Pur și simplu, am legat o funcție de o casetă de text și de fiecare dată când apăsați pe introduce cheie sau Trimite , mesajul va fi trimis serviciului back-end. 

Această pagină are, de asemenea, un fișier Jake necesar de Socket.IO pentru a asculta canalul numit mesaj. Modulul Socket.IO este deja importat în spate, iar când folosiți acest modul în partea de server, acesta adaugă automat un punct final pentru servirea fișierului js Socket.IO, dar îl folosim pe cel care este servit din cdn . Ori de câte ori un mesaj nou apare pe acest canal, acesta va fi detectat automat și lista de mesaje va fi actualizată cu ultimele cinci mesaje.  

Există încă un cec în codul de mai sus: partea cookie. Dacă nu ați ales nicio porecla pentru chat, înseamnă că cookie-ul nu este setat pentru pseudonim și veți fi redirecționat automat la pagina de conectare. 

Dacă nu, ultimele cinci mesaje vor fi preluate printr-un simplu apel Ajax la / mesaje punct final. În același mod, ori de câte ori faceți clic pe Trimite sau apăsați butonul introduce , textul va fi preluat din caseta de text și porecla va fi preluată din cookie, iar aceste valori vor fi trimise serverului cu o solicitare de postare. Nu există nici o verificare strictă pentru porecla aici, pentru că am vrut să mă concentrez pe partea în timp real, nu pe partea de autentificare a utilizatorului.

După cum puteți vedea, structura generală a proiectului este foarte simplă. Să venim la partea de desfășurare. Așa cum am spus mai devreme, vom folosi Modulus, unul dintre cele mai bune PaaS pentru implementarea, scalarea și monitorizarea aplicației în limba pe care o alegeți. 

3. Implementarea

3.1. Cerințe preliminare

Primul lucru care îmi vine în minte este să vă arăt cum să implementați, dar pentru o implementare reușită, avem nevoie de o bază de date de lucru. Să aruncăm o privire asupra modului de creare a unei baze de date pe Modulus și apoi să efectuăm implementarea. 

Accesați tabloul de bord Modulus după crearea unui cont. Apasă pe Baze de date meniul din partea stângă și faceți clic pe Creați baza de date. 

Completați câmpurile obligatorii în formularul pop-up, după cum urmează.

Când completați câmpurile obligatorii și dați clic pe Crea, acesta va crea o bază de date MongoDB pentru dvs. și veți vedea adresa URL a bazei de date pe ecran. Noi vom folosi MONI URI,copiați astfel URI.

În proiectul nostru, URI Mongo este extras din variabila de mediu MONGO_URI, și trebuie să setați acea variabilă de mediu în tabloul de bord. Accesați tabloul de bord, dați clic pe proiecte meniu, selectați proiectul din listă și faceți clic pe Administrare în meniul din stânga. În această pagină, veți vedea secțiunea variabile de mediu când defilați în jos pagina, după cum se arată mai jos.

Puteți să vă deplasați la Modulus în două moduri: 

• încărcarea fișierului ZIP de proiect utilizând tabloul de bord
• de la linia de comandă prin utilizarea modulului CLI Modulus

Voi continua cu opțiunea de linie de comandă, pentru că cealaltă este ușor de făcut. Mai întâi de toate, instalați Modulus CLI:

npm install -g modul

Accesați dosarul proiectului și efectuați următoarea comandă pentru a vă conecta la Modulus.

modul de conectare

Când executați comanda de mai sus, vi se va solicita să introduceți un nume de utilizator și o parolă:

Dacă ați creat un cont utilizând GitHub, puteți utiliza funcția --github opțiune.

modul de conectare - github

Acum sunteți conectat (ă) la Modulus și este timpul să creați un proiect. Utilizați următoarea comandă pentru a crea un proiect:

proiectul modulului crea "Chat în timp real"

Când executați această funcție, vi se va cere timpul de rulare. Selectați prima opțiune, care este Node.js, iar în al doilea rând veți fi întrebat pentru mărimea servomotorului și îl puteți păstra în mod implicit.

Am creat un proiect și de data aceasta vom implementa proiectul nostru actual către Modulus. Executați următoarea comandă pentru a trimite proiectul curent la Chat în timp real proiect pe partea Modulus.

modul de implementare

Acesta va implementa proiectul dvs. și veți primi adresa URL a proiectului de execuție la sfârșitul mesajului de implementare de succes:

Realtime Chat rulează la realtime-chat-46792.onmodulus.net

După cum puteți vedea, desfășurarea la Modulus este foarte ușoară! 

Modulul CLI are comenzi foarte utile pe care le puteți utiliza în timpul desfășurării proiectului sau în timpul rulării. De exemplu, în scopul de a coada coadă a proiectului dvs. de funcționare, puteți utiliza Modul de proiect coada coastelor, pentru a crea o bază de date MongoDB modulul mongo crea , pentru a seta o utilizare variabilă a mediului modulul env setat , etc. Puteți vedea o listă completă de comenzi utilizând ajutorul Modulus. 

Concluzie

Scopul principal al acestui tutorial a fost să vă arătăm cum să creați o aplicație de chat în timp real cu Node.js, Socket.IO și MongoDB. Pentru a derula un proiect în producție, Modulus este utilizat ca furnizor PaaS. Modulus are pași foarte simpli pentru implementare și are o bază de date internă (MongoDB) pentru proiectele noastre. În afară de aceasta, puteți utiliza instrumente foarte utile în tabloul de bord Modulus, cum ar fi Jurnale, Notificări, Auto-Scalare, Administrare baze de date și așa mai departe.

Pentru a vă înscrie pentru Modulus, faceți clic aici și obțineți un extra $ 10 exclusiv pentru a fi un cititor Tuts +. Utilizați codul promoțional ModulusChat10.

Pentru mai multe informații despre oferta întreprinderii Modulus, faceți clic aici.