Share
Având o funcție "aminteste-mă" este o caracteristică foarte utilă, implementarea cu React și Express este relativ ușoară. Continuând din ultima noastră parte în care am creat o aplicație de chat WebRTC, acum vom adăuga sesiuni persistente susținute de Mongo și o listă de utilizatori online bazată pe baze de date pentru o măsură bună.
Dacă nu ați mai utilizat sesiunile înainte, pe scurt acestea sunt destul de asemănătoare cu cookie-urile, deoarece sesiunile vă permit să urmăriți utilizatorii activi ai aplicației în timp real. Sesiunile lucrează de fapt prin intermediul unui serviciu sesiune cookie, care este trimis în antetele de cerere / răspuns din aplicația dvs..
Deci, cookie-urile și sesiunile sunt interconectate prin natura lor. Atunci de ce avem nevoie de sesiuni dacă avem deja cookie-uri? Ceea ce vă oferă în plus sesiunile este capacitatea de a defini stocarea back-end utilizată de partea server a aplicației dvs. Aceasta înseamnă că ori de câte ori informațiile solicită aplicația dvs., acestea pot fi preluate din baza de date.
Deci, într-un exemplu de viață reală pentru aplicația noastră de chat, acum putem stoca numele de utilizator al utilizatorului - și dacă am reconfigura aplicația noastră într-o anumită măsură, inserați întregul istoric de chat în baza de date pentru logare.
În acest exemplu vom folosi o bază de date Mongo pentru o stocare persistentă înapoi. Aceasta este una dintre mai multe opțiuni disponibile pentru stocarea sesiunii, iar un altul pe care îl recomand foarte mult pentru setările de producție la scară mai mare cu mai multe servere web este memcache.
Mongo este un motor de stocare a documentelor NoSQL, mai degrabă decât un magazin de date relaționale, cum ar fi popularul MySQL. NoSQL este cu adevărat ușor să-ți faci capul dacă vine din MySQL sau din baze de date similare și trebuie să ajungi la viteză cu Mongo - nu te va lua mult timp. Cele mai mari diferențe pe care trebuie să le știi sunt următoarele:
Accentsconagua
db.collectionName.find () ar fi a SELECT * FROM tabel.Dacă nu aveți încă Mongo, instalați-l prin intermediul managerului de pachete. În distribuțiile bazate pe Linux, de exemplu:
sudh apt-get install mongodb
Odată ce am instalat Mongo, putem adăuga cu ușurință asistență Mongo la aplicația noastră de chat cu mangustă modul disponibil de la npm. Instalare mangustă cu urmatoarele:
bash $ npm instalează mongoose - salvează
Acum, să adăugăm ceva Mongo în aplicația noastră. Activați editorul de cod și deschideți-l app.js și setați partea de sus a script-ului dvs. pentru a fi după cum urmează.
"js // Configurează serviciile noastre PeerServer = necesită ('peer'). PeerServer, express = solicită ('express'), mongoose = './src/events.js'), app = express (), port = process.env.PORT || 3001;
// Conectați-vă la baza de date mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ("depanare", adevărat);
db.on ("eroare", console.error.bind (consola, "# Mongo DB: eroare conexiune:")); "
Noi includem mangustă cu necesită ( 'mongoose') și apoi să folosim conexiunea bazei noastre de date prin mongoose.connect ( 'MongoDB: // localhost: 27017 / chat');.
/conversație definește numele bazei de date la care ne conectăm.
În continuare, în scopuri de dezvoltare, vă recomand să setați debugging-ul pe.
js mongoose.set ('debug', adevărat);
În cele din urmă, adăugăm un handler pentru orice evenimente de eroare:
js db.on ('eroare', console.error.bind (consola, '# Mongo DB: eroare conexiune:'));
În continuare puteți adăuga cecul pentru conexiunea cu următorul cod:
js db.once ("deschide", funcția (callback) console.log ("# Mongo DB: conectat la server");
În felul acesta mangustă este folosit este ca o dată pe db instanța primește deschis eveniment, vom intra în execuție pentru conexiunea noastră mongo. Așadar, va trebui să înfășurăm codul nostru existent în această nouă conexiune mongo pentru ao folosi.
Aici este o listă completă de coduri cu mongoose adăugate și inserarea de rânduri și ștergerea lor ca utilizatorii vin on-line și go offline.
„js
// Configurează serviciile noastre PeerServer = necesită ('peer'). PeerServer, express = necesită ('express'), mongoose = necesită ('mongoose'), assert = require ('assert') events = require. /src/events.js '), app = express (), port = process.env.PORT || 3001;
// Exprimați să utilizați directorul 'src' app.use (express.static (__ dirname + '/ src'));
// Conectați-vă la baza de date mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ("depanare", adevărat);
db.on ("eroare", console.error.bind (consola, "# Mongo DB: eroare conexiune: '));
db.once ('deschis', funcție (apel invers)
console.log ("# Mongo DB: conectat la server");
// Configurați utilizatorul nostru Schema var usersSchema = mongoose.Schema (username: String); var Utilizator = mongoose.model ('User', usersSchema);
// Configurați serverul http și serverul PeerJS var expressServer = app.listen (port); var io = cere ('socket.io'). asculta (expressServer); var peer = noul PeerServer (port: 9000, cale: '/ chat');
// Tipăriți consola de ieșire console.log ('#### - Server Running - ####'); console.log ('# Express: ascultare pe port', port);
peer.on ('conexiune', funcție (id) io.emit (evenimente.CONNECT, id); console.log ('# Connected:', id);
// Store Peer în baza de date var user = new User (username: id); user.save (funcția (err, user) if (err) return console.error (err); console.log ('# User' + id + 'salvat în baza de date'); );
peer.on ("deconectare", funcție (id) io.emit (evenimente.DISCONNECT, id); console.log ('# Disconnected:', id);
// Eliminați Peer din baza de date User.remove (username: id, funcția (err) if (err) return console.error (err));
);
);“
Pentru a vedea acest lucru, hai să lansăm aplicația de chat. Fugi npm start pentru a ajunge.
Acum, conectați-vă la chat ca normal în browser (implicit la adresa http: // localhost: 3001).
Odată ce v-ați conectat la chat, într-o nouă fereastră terminală deschisă chat mongo pentru a intra în mongo cli.
bash $ mongo chat versiune shell MongoDB: 2.0.6 conectare la: chat> db.users.find () "username": "CameronLovesPigs", "_id": ObjectId ("5636e9d7bd4533d610040730"), "__v"
Aici aveți documentul înregistrat în interiorul dvs. Mongo, iar acum puteți verifica întotdeauna câte utilizatori sunt online, prin rularea la promptul mongo db.users.count ().
bash> db.users.count () 3
Deoarece am folosit Express pentru a construi aplicația noastră, această parte este într-adevăr destul de simplă și necesită doar instalarea unui cuplu de module NPM să ne dăm drumul.
Obține Express-sesiune și conectați-Mongo pachete de la npm:
bash $ npm instalare expres-sesiune connect-mongo cookie-parser - salvați
Acum, includeți-le în partea de sus app.js:
js var PeerServer = necesita ('peer') PeerServer, cookieParser = necesita ('cookie-parser'), express = '), MongoStore = necesită (' connect-mongo ') (sesiune), // ...
După ce ați configurat mongoose.connect puteți configura sesiunile cu expresii. Modificați codul la următoarele; puteți specifica propria dvs. secret şir.
"js // Conectați-vă la baza de date mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ("depanare", adevărat);
db.on ("eroare", console.error.bind (consola, "# Mongo DB: eroare conexiune: '));
app.use (cookieParser ()); (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, stocare: new MongoStore (mongooseConnection: db)))
Aici este un moment crucial care trebuie luat în considerare saveUninitialized: true în ultimul app.use. Acest lucru va asigura că sesiunile sunt salvate.
Specificăm unde se află cu magazin proprietate, pe care am setat-o MongoStore exemplu, specificând care conexiune să folosească via mongooseConnection și al nostru db obiect.
Pentru a stoca în sesiune, trebuie să folosim expres pentru manipularea cererilor deoarece avem nevoie de acces la valoarea solicitării, de exemplu:
js // Începeți sesiunea persistentă pentru utilizatorul app.use (funcția (req, res, next) req.session.username = id; req.session.save ();
Aceasta va crea req.session.username variabilă cu valoarea introdusă de utilizator și salvarea acestuia pentru mai târziu.
Apoi, putem verifica această valoare cu codul nostru de pe partea clientului și vom înregistra în mod automat utilizatorul când se reîmprospătează, astfel încât să nu se deconecteze din chat și să fie conectat automat ca nume de utilizator ales.
De asemenea, interesant de observat, pentru că avem sesiuni bazate pe baze de date, este că, în cazul în care dezvoltatorii schimbă aplicația și reîncărcarea din back-end, utilizatorii conectați la clienții lor vor rămâne logați, deoarece magazinul de sesiuni este acum persistent. Aceasta este o caracteristică excelentă pentru a vă menține utilizatorii fericiți și pentru a vă conecta pe tot parcursul dezvoltării sau dacă există o deconectare de la un client instabil.
Acum, când avem parte de configurare a sesiunii de cookie-uri, să lucrăm la adăugarea datelor de conectare persistente la codul nostru de front-end.
Până în prezent, am folosit ruta prestabilită oferită de Express pentru o aplicație SPA și nu am definit niciun mod de rutare pentru Express. După cum am menționat anterior, pentru a avea acces la sesiune, veți avea nevoie de variabilele de solicitare / răspuns ale Express.
Mai întâi avem nevoie de o rută pentru a putea accesa cerere Obiect Express furnizează și îl afișează pentru depanare. În interiorul configurației Express în /app.js, adăugați următoarele în partea de sus a fișierului după configurarea sesiunii:
"js app.use (sesiune (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, magazin: new MongoStore (mongooseConnection: db
app.get ('/', funcția (req, res) res.sendFile (__dirname + '/ src / index.html'); nu este setat încă în sesiune "); altceva console.log (" # Nume de utilizator din sesiune: "+ req.session.username);
); "
Acum avem câteva înregistrări de bază pentru a vedea ce se întâmplă cu valoarea sesiunii noastre. Pentru a le seta, trebuie să configurăm rutele getter și setter cum ar fi:
"js // Salveaza numele de utilizator atunci cand utilizatorul posta numele de utilizator setat app.post ('/ username', function (req, res) console.log (" # User setat la "+ req.body.username); .session.username = req.body.username; req.session.save (); console.log ("# Setați valoarea sesiunii" + req.session.username); res.end (););
// returnați valoarea sesiunii atunci când clientul verifică app.get ('/ username', funcția (req, res) console.log ("# Client check user" + req.session.username); res.json : req.session.username); "
Aceste două rute vor funcționa ca primirea și setarea pentru sesiunea de nume de utilizator var. Acum, cu un pic de JavaScript de bază putem implementa autologin pentru aplicația noastră. Deschide src / App.js și modificați-l după cum urmează:
"js / * Global EventEmitter, evenimente, io, Peer * / / ** @jsx React.DOM * /
$ (funcția () 'utilizarea strictă';
// Verificați valoarea sesiunii $ (document) .ready (funcția () $ .ajax (url: '/ username'). numele de utilizator); if (nume de utilizator) initChat ($ ('container') [0], data.username);););
// Setați sesiunea $ ('# connect-btn') faceți clic pe (funcția () var data = JSON.stringify (username: $ (' (url: '/ username', metoda: 'POST', date: data, contentType: 'application / json', dataType: 'json'););
// Initializeaza chatul $ ('# connect-btn') click (function () initChat ($ ('container') [0], $ (' );
funcția initChat (container, nume de utilizator) var proxy = nou ChatServer (); React.renderComponent (
window.onbeforeunload = function () return 'Sigur vrei sa pleci din chat?'; ;
);“
Cu $ .ajax facilitatea de jQuery creăm o cerere de verificare a valorii variabilei de sesiune atunci când document devine disponibilă. Dacă este setat, inițializăm componenta noastră React cu valoarea stocată, rezultând o caracteristică autologin pentru utilizatorii noștri.
Activați din nou chat-ul cu npm start și aruncați o privire în browser pentru a vedea că sesiunile funcționează.
Acum ați văzut cât de ușor este să utilizați Mongoose împreună cu Express și să creați sesiuni Express. Luând în continuare dezvoltarea aplicațiilor dvs. cu React, deoarece controlerul de vizualizare legat de elementele bazate pe baze de date va crea câteva aplicații serioase.
Dacă doriți să faceți un pas mai departe cu React și să analizați modul în care componentele dvs. pot comunica unul cu altul în interiorul cadrului React, acest ghid din documentația oficială este foarte util.
