Share
Avere una funzione "ricordami" è molto utile e l'implementazione con React ed Express è relativamente semplice. Continuando dalla nostra ultima parte in cui configuriamo un'applicazione di chat WebRTC, ora aggiungeremo le sessioni persistenti sostenute da Mongo e un elenco di utenti online supportato da database per una buona misura.
Se non hai mai utilizzato le sessioni, in breve sono simili ai cookie, in quelle sessioni puoi tenere traccia degli utenti attivi della tua applicazione in tempo reale. Le sessioni funzionano effettivamente tramite a cookie di sessione, che viene inviato nelle intestazioni di richiesta / risposta dalla tua app.
Quindi i cookie e le sessioni sono intrecciati per natura. Allora perché abbiamo bisogno di sessioni se abbiamo già i cookie? Inoltre, le sessioni ti danno la possibilità di definire lo spazio di archiviazione di back-end utilizzato dalla parte server dell'applicazione. Ciò significa che ogni volta che l'informazione è richiesta dalla tua app, può essere recuperata dal database.
Quindi, in un esempio di vita reale per la nostra applicazione di chat, ora possiamo memorizzare il nome utente dell'utente e, se riconfiguriamo la nostra app in qualche modo, inseriamo anche l'intera cronologia della chat nel database per la registrazione.
Nel prossimo esempio useremo un database Mongo per lo storage back-end persistente. Questa è una delle varie opzioni disponibili per l'archiviazione di sessione e un'altra che consiglio vivamente per le configurazioni di produzione su larga scala con più server Web è memcache.
Mongo è un motore di archiviazione di documenti NoSQL piuttosto che un data store relazionale come il popolare MySQL. NoSQL è davvero facile da capire se provieni da MySQL o database simili e devi metterti al passo con Mongo - non ti ci vorrà molto. Le maggiori differenze che dovresti sapere sono le seguenti:
Accentsconagua
db.collectionName.find () sarebbe un SELEZIONA * DA tabella.Se non hai ancora Mongo, installalo tramite il gestore dei pacchetti. Nelle distribuzioni basate su Linux, ad esempio:
bash $ sudo apt-get install mongodb
Una volta installato Mongo, possiamo facilmente aggiungere il supporto di Mongo alla nostra applicazione di chat con mangusta modulo disponibile da npm. Installare mangusta con il seguente:
bash $ npm install mongoose --save
Ora aggiungiamo un po 'di Mongo alla nostra app. Apri il tuo editor di codice e apri app.js e imposta la parte superiore del tuo script come segue.
"js // Configura i nostri servizi var PeerServer = require ('peer'). PeerServer, express = require ('express'), mongoose = require ('mongoose'), assert = require ('assert'), events = require ( './src/events.js'), app = express (), port = process.env.PORT || 3001;
// Connetti al database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: connection error:')); "
Includiamo mangusta con require ( 'mangusta') e quindi utilizzare la nostra connessione al database tramite mongoose.connect ( 'mongodb: // localhost: 27017 / chat');.
Il /Chiacchierare definisce il nome del database a cui ci stiamo connettendo.
Successivamente, a fini di sviluppo, ti consiglio di impostare il debug su on.
js mongoose.set ('debug', true);
Infine aggiungiamo un gestore per qualsiasi evento di errore:
js db.on ('error', console.error.bind (console, '# Mongo DB: connection error:'));
Successivamente puoi aggiungere il tuo assegno per la connessione con il seguente codice:
js db.once ('open', function (callback) console.log ("# Mongo DB: Connesso al server");
Il modo in cui mangusta è usato è quello una volta che il db istanza riceve il Aperto evento, entreremo in esecuzione per la nostra connessione mongo. Quindi avremo bisogno di avvolgere il nostro codice esistente in questa nuova connessione mongo per poterlo utilizzare.
Ecco un elenco completo dei codici con la mangusta aggiunta e inserendo le righe e cancellandole man mano che gli utenti arrivano online e vanno offline.
"js
// Configura i nostri servizi var PeerServer = require ('peer'). PeerServer, express = require ('express'), mongoose = require ('mongoose'), assert = require ('assert'), events = require ('. /src/events.js '), app = express (), port = process.env.PORT || 3001;
// Indica a express di utilizzare la directory 'src' app.use (express.static (__ dirname + '/ src'));
// Connetti al database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: connection error:'));
db.once ('open', function (callback)
console.log ("# Mongo DB: Connesso al server");
// Imposta il nostro schema utente var usersSchema = mongoose.Schema (username: String); var User = mongoose.model ('User', usersSchema);
// Configura il server http e il server PeerJS var expressServer = app.listen (porta); var io = require ('socket.io'). listen (expressServer); var peer = new PeerServer (port: 9000, percorso: '/ chat');
// Stampa alcuni output della console console.log ('#### - Server in esecuzione - ####'); console.log ('# Express: ascolto su porta', porta);
peer.on ('connection', function (id) io.emit (events.CONNECT, id); console.log ('# Connected:', id);
// Store Peer nel database var user = new User (username: id); user.save (function (err, user) if (err) return console.error (err); console.log ('# User' + id + 'salvato nel database');); );
peer.on ('disconnect', function (id) io.emit (events.DISCONNECT, id); console.log ('# Disconnected:', id);
// Rimuovi Peer dal database User.remove (username: id, function (err) if (err) return console.error (err));
);
);"
Per vedere come funziona, apriamo l'applicazione di chat. Corri inizio di npm per alzarsi.
Ora connettiti alla chat normalmente nel browser (predefinito su http: // localhost: 3001).
Una volta connesso alla chat, in una nuova finestra di terminale aperta chat di mongo per entrare nel mongo cli.
bash $ mongo chat Versione della shell MongoDB: 2.0.6 connessione a: chat> db.users.find () "username": "CameronLovesPigs", "_id": ObjectId ("5636e9d7bd4533d610040730"), "__v": 0
Qui hai il record del documento memorizzato all'interno del tuo mongo, e ora puoi sempre verificare quanti utenti sono online eseguendo il prompt di mongo db.users.count ().
bash> db.users.count () 3
Poiché abbiamo utilizzato Express per creare la nostra applicazione, questa parte è davvero piuttosto semplice e richiede solo l'installazione di un paio di moduli da npm per farci andare.
Ottenere la Express-session e connect-mongo pacchetti da npm:
bash $ npm installa express-session connect-mongo cookie-parser --save
Ora includile nella parte superiore di app.js:
js var PeerServer = require ('peer'). PeerServer, cookieParser = require ('cookie-parser'), express = require ('express'), session = require ('express-session'), mongoose = require ('mangusta '), MongoStore = require (' connect-mongo ') (sessione), // ...
Dopo aver impostato mongoose.connect puoi configurare le sessioni con express. Cambia il tuo codice al seguente; puoi specificare il tuo segreto stringa.
"js // Connetti al database mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: connection error:'));
app.use (cookieParser ()); app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, store: new MongoStore (mongooseConnection: db))) "
Qui un aspetto cruciale da notare è il saveUninitialized: true dentro l'ultimo app.use. Ciò garantirà che le sessioni vengano salvate.
Specifichiamo dove con il memorizzare proprietà, che abbiamo impostato su MongoStore istanza, specificando quale connessione usare tramite mongooseConnection e il nostro db oggetto.
Per memorizzare nella sessione, è necessario utilizzare express per la gestione della richiesta poiché è necessario accedere al valore della richiesta, ad esempio:
js // Avvia sessione persistente per l'utente app.use (funzione (req, res, next) req.session.username = id; req.session.save ();
Questo creerà il req.session.username variabile con il valore inserito dall'utente e salvato per dopo.
Successivamente, possiamo verificare questo valore con il nostro codice lato client e accedere automaticamente all'utente quando si aggiorna in modo che non vengano mai disconnessi dalla chat e che vengano automaticamente registrati come nome utente scelto.
È anche interessante notare che, poiché abbiamo sessioni supportate dal database, è che nel caso in cui gli sviluppatori cambino applicazione e ricarichino il back-end, gli utenti che hanno effettuato l'accesso ai loro client rimarranno loggati poiché l'archivio delle sessioni è ora persistente. Questa è una grande funzionalità per mantenere i tuoi utenti felici e connessi durante tutto lo sviluppo o se c'è una disconnessione da un client instabile.
Ora che abbiamo impostato la parte del cookie di sessione, lavoriamo per aggiungere il login persistente al nostro codice di front-end.
Finora abbiamo appena utilizzato la route predefinita fornita da Express per un'applicazione SPA e non definito alcuna gestione delle rotte per Express. Come accennato in precedenza, per accedere alla sessione sono necessarie le variabili di richiesta / risposta di Express.
Per prima cosa abbiamo bisogno di un percorso in modo che possiamo accedere al richiesta oggetto Express fornisce e lo visualizza a scopo di debug. Dentro la tua configurazione Express in /app.js, aggiungi quanto segue nella parte superiore del file, dopo la configurazione della sessione:
"js app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, store: new MongoStore (mongooseConnection: db)))
app.get ('/', function (req, res) res.sendFile (__ dirname + '/ src / index.html'); if (req.session.username == undefined) console.log ("# Username non impostato ancora in sessione "); else console.log (" # Username dalla sessione: "+ req.session.username);
); "
Ora abbiamo alcune registrazioni di base per vedere cosa sta succedendo con il nostro valore di sessione. Per impostarlo, dobbiamo configurare i percorsi getter e setter in questo modo:
"js // Salva il nome utente quando l'utente invia il nome utente set form app.post ('/ username', function (req, res) console.log (" # Username impostato su "+ req.body.username); req .session.username = req.body.username; req.session.save (); console.log ("# set di valori di sessione" + req.session.username); res.end (););
// Restituisce il valore della sessione quando il client controlla app.get ('/ username', function (req, res) console.log ("# Username check Client" + req.session.username); res.json (username : req.session.username)); "
Queste due rotte funzioneranno come get e set per la sessione username var. Ora con un po 'di JavaScript di base possiamo implementare l'autologin per la nostra app. Aprire src / App.js e cambiarlo come segue:
"js / * eventEmitter globale, eventi, io, peer * / / ** @jsx React.DOM * /
$ (function () 'use strict';
// Controlla il valore della sessione $ (document) .ready (function () $ .ajax (url: '/ username'). Done (function (data) console.log ("data loaded:" + data. username); if (data.username) initChat ($ ('# container') [0], data.username);););
// Imposta la sessione $ ('# connect-btn'). Click (function () var data = JSON.stringify (username: $ ('# username-input'). Val ()); $ .ajax (url: '/ username', metodo: "POST", data: data, contentType: 'application / json', dataType: 'json'););
// Inizializza la chat $ ('# connect-btn'). Click (function () initChat ($ ('# container') [0], $ ('# username-input'). Val ()); );
function initChat (container, username) var proxy = new ChatServer (); React.renderComponent (
window.onbeforeunload = function () return 'Sei sicuro di voler lasciare la chat?'; ;
);"
Con il $ .ajax Facilità di jQuery creiamo una richiesta per verificare il valore della variabile di sessione quando il documento diventa disponibile. Se è impostato, inizializziamo il componente React con il valore memorizzato, creando una funzione di autorizzazione per i nostri utenti.
Riattiva la chat di nuovo con inizio di npm e dai un'occhiata al tuo browser per vedere le sessioni di lavoro.
Ora hai visto quanto sia facile usare Mongoose in congiunzione con Express e impostare sessioni Express. Prendendo ulteriormente lo sviluppo dell'applicazione con React, il controller di visualizzazione collegato agli elementi supportati dal database creerà alcune applicazioni gravi.
Se vuoi fare un passo in avanti con React e vedere come i tuoi componenti possono comunicare internamente all'interno del framework React, questa guida dalla documentazione ufficiale è molto utile.
