Share
Avoir une fonction «se souvenir de moi» est une fonctionnalité très utile, et sa mise en œuvre avec React et Express est relativement facile. Dans la suite de notre dernière partie, où nous avons configuré une application de discussion WebRTC, nous allons maintenant ajouter des sessions persistantes reposant sur Mongo et une liste d’utilisateurs en ligne sauvegardée sur une base de données..
Si vous n'avez jamais utilisé de sessions auparavant, elles sont en gros assez similaires aux cookies, dans la mesure où elles vous permettent de suivre en temps réel les utilisateurs actifs de votre application. Les sessions fonctionnent réellement via un cookie de session, qui est envoyé dans les en-têtes de requête / réponse de votre application.
Les cookies et les sessions sont donc intimement liés. Alors pourquoi avons-nous besoin de sessions si nous avons déjà des cookies? En outre, les sessions vous permettent de définir le stockage principal utilisé par la partie serveur de votre application. Cela signifie que chaque fois que les informations requises par votre application sont disponibles, elles peuvent être extraites de la base de données..
Ainsi, dans un exemple concret de notre application de chat, nous pouvons maintenant stocker le nom d'utilisateur de l'utilisateur. Si nous reconfigurons quelque peu notre application, insérons également l'historique complet du chat dans la base de données pour la journalisation..
Dans cet exemple, nous allons utiliser une base de données Mongo pour le stockage principal persistant. Il s'agit de l'une des nombreuses options disponibles pour le stockage de session. Une autre méthode que je recommande vivement pour les installations de production à grande échelle avec plusieurs serveurs Web est memcache..
Mongo est un moteur de stockage de documents NoSQL plutôt qu'un magasin de données relationnel tel que le populaire MySQL. NoSQL est vraiment facile à comprendre, si vous venez de MySQL ou de bases de données similaires et que vous devez vous familiariser avec Mongo, cela ne vous prendra pas longtemps. Les plus grandes différences que vous devriez connaître sont les suivantes:
Accentsconagua
db.collectionName.find () serait un SELECT * FROM table.Si vous n’avez pas encore Mongo, veuillez l’installer via votre gestionnaire de paquets. Dans les distributions basées sur Linux, par exemple:
bash $ sudo apt-get install mongodb
Une fois que Mongo est installé, nous pouvons facilement ajouter le support Mongo à notre application de chat avec le mangouste module disponible à partir de npm. Installer mangouste avec ce qui suit:
bash $ npm installer mangouste --save
Ajoutons maintenant un peu de Mongo à notre application. Lancez votre éditeur de code et ouvrez app.js et définissez le haut de votre script comme suit.
"js // Configurez nos services 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;
// Connectez-vous à la base de données mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# Mongo DB: erreur de connexion:')); "
Nous incluons mangouste avec require ('mangouste') puis utiliser notre connexion de base de données via mongoose.connect ('mongodb: // localhost: 27017 / chat');.
le /bavarder définit le nom de la base de données à laquelle nous nous connectons.
Ensuite, à des fins de développement, je vous recommande de définir le débogage sur.
js mongoose.set ('debug', true);
Enfin, nous ajoutons un gestionnaire pour tous les événements d'erreur:
js db.on ('error', console.error.bind (console, '# Mongo DB: erreur de connexion:'));
Ensuite, vous pouvez ajouter votre chèque pour la connexion avec le code suivant:
js db.once ('open', fonction (rappel) console.log ("# Base de données Mongo: connecté au serveur");
La façon dont mangouste est utilisé est que, une fois la db l'instance reçoit le ouvrir événement, nous entrerons en exécution pour notre connexion mongo. Nous allons donc devoir intégrer notre code existant dans cette nouvelle connexion Mongo afin de l'utiliser.
Voici une liste complète des codes avec la mangouste ajoutée, l'insertion de lignes et leur suppression lorsque les utilisateurs se connectent et se déconnectent..
"js
// Configurer nos services 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;
// Dites à Express d'utiliser le répertoire 'src' app.use (express.static (__ nom de répertoire + '/ src'));
// Connectez-vous à la base de données mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# DB Mongo: erreur de connexion:'));
db.once ('open', fonction (rappel)
console.log (“# Mongo DB: Connecté au serveur”);
// Configurer notre schéma utilisateur var usersSchema = mongoose.Schema (username: String); var User = mongoose.model ('User', usersSchema);
// Configurer le serveur http et le serveur PeerJS var expressServer = app.listen (port); var io = require ('socket.io'). listen (expressServer); var peer = new PeerServer (port: 9000, chemin: '/ chat');
// Imprimer une sortie de la console console.log ('#### - Serveur en cours d'exécution - ####'); console.log ('# Express: écoute sur le port', port);
peer.on ('connexion', fonction (id) io.emit (events.CONNECT, id); console.log ('# connecté:', id);
// Store Peer dans la base de données var user = new User (username: id); user.save (function (err, utilisateur) if (err) renvoie console.error (err); console.log ('# utilisateur' + id + 'enregistré dans la base de données');); );
peer.on ('disconnect', function (id) io.emit (events.DISCONNECT, id); console.log ('# # déconnecté:', id);
// Supprime l'homologue de la base de données User.remove (username: id, function (err) if (err) return console.error (err));
);
); "
Pour que cela fonctionne, lançons l'application de chat. Juste courir npm start se lever.
Maintenant, connectez-vous au chat normalement dans le navigateur (par défaut à http: // localhost: 3001).
Une fois que vous êtes connecté à votre chat, ouvrez une nouvelle fenêtre de terminal mongo chat entrer dans le mongo cli.
bash $ mongo chat Version du shell MongoDB: 2.0.6 connexion à: chat> db.users.find () "username": "CameronLovesPigs", "_id": ObjectId ("5636e9d7bd4533d610040730"), "__v": 0
Ici, vous avez la fiche de document stockée dans votre mongo, et maintenant vous pouvez toujours vérifier combien d'utilisateurs sont en ligne en exécutant à l'invite de mongo db.users.count ().
bash> db.users.count () 3
Parce que nous avons utilisé Express pour construire notre application, cette partie est très simple et ne nécessite que l’installation de quelques modules à partir de npm nous faire partir.
Obtenir le session express et connect-mongo paquets à partir de npm:
bash $ npm installer express-session connect-mongo cookie-parser --save
Maintenant, incluez-les dans le haut de app.js:
js var PeerServer = require ('peer'). PeerServer, cookieParser = require ('analyseur de cookie'), express = require ('express'), session = require ('express-session'), mongoose = require ('mongoose '), MongoStore = require (' connect-mongo ') (session), //…
Après avoir mis en place mongoose.connect vous pouvez configurer des sessions avec express. Modifiez votre code comme suit: vous pouvez spécifier votre propre secret chaîne.
"js // Connexion à la base de données mongoose.connect ('mongodb: // localhost: 27017 / chat'); var db = mongoose.connection;
mongoose.set ('debug', true);
db.on ('error', console.error.bind (console, '# DB Mongo: erreur de connexion:'));
app.use (cookieParser ()); app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, store: new MongoStore (mongooseConnection: db))) "
Voici un paramètre crucial à noter est le saveUninitialized: true dans le dernier app.use. Cela garantira que les sessions sont enregistrées.
Nous précisons où avec le le magasin propriété, que nous avons mis à la MongoStore exemple, en spécifiant quelle connexion utiliser via Connexion mongoose et notre db objet.
Pour stocker dans la session, nous devons utiliser express pour le traitement de la requête, car nous avons besoin d'accéder à la valeur de la requête, par exemple:
js // Démarrer la session persistante pour l'utilisateur app.use (fonction (req, res, suivante) req.session.nomutilisateur = id; req.session.save ();
Cela va créer le req.session.username variable avec la valeur entrée par l'utilisateur et la sauvegarder pour plus tard.
Ensuite, nous pouvons vérifier cette valeur avec notre code côté client et connecter automatiquement l'utilisateur lorsqu'il s'actualise afin qu'il ne soit jamais déconnecté du chat et qu'il soit automatiquement connecté avec le nom d'utilisateur choisi..
Il est également intéressant de noter que, étant donné que nous avons des sessions sauvegardées dans la base de données, le fait que les développeurs changent l’application et le rechargement du back-end, les utilisateurs connectés à leurs clients le resteront car le magasin de session est maintenant permanent. Il s'agit d'une fonctionnalité intéressante pour garder vos utilisateurs satisfaits et connectés tout au long de votre développement ou en cas de déconnexion d'un client instable..
Maintenant que la partie cookie de session est configurée, travaillons à l’ajout d’un login persistant à notre code frontal..
Jusqu'à présent, nous venons d'utiliser la route par défaut fournie par Express pour une application SPA et nous n'avons défini aucune gestion de route pour Express. Comme je l'ai déjà mentionné, pour accéder à la session, vous aurez besoin des variables de requête / réponse d'Express..
Nous avons d’abord besoin d’une route pour accéder au demande object Express le fournit et l'affiche à des fins de débogage. Dans votre configuration Express en /app.js, ajoutez ce qui suit près du haut du fichier, après l’installation de la session:
"js app.use (session (secret: 'supersecretstring12345!', saveUninitialized: true, resave: true, magasin: new MongoStore (mongooseConnection: db))))
app.get ('/', fonction (req, res) res.sendFile (__ nomrépertoire + '/ src / index.html'); if (req.session.nomutilisateur == non défini) console.log (“# nomutilisateur pas encore défini dans la session ”); else console.log (“ # Nom d'utilisateur de la session: “+ req.session.username);
); "
Nous avons maintenant quelques informations de base pour voir ce qui se passe avec notre valeur de session. Pour le configurer, nous devons configurer les routes getter et setter de la manière suivante:
"js // Sauvegarde le nom d'utilisateur lorsque l'utilisateur poste le nom d'utilisateur défini sous la forme app.post ('/ nom d'utilisateur', fonction (req, res) console.log (“ # nom d'utilisateur défini sur “+ req.body.username); req .session.username = req.body.username; req.session.save (); console.log (“# Valeur de la session définie“ + req.session.username); res.end (););
// Renvoie la valeur de la session lorsque le client vérifie app.get ('/ nom d'utilisateur', fonction (req, res) console.log (“# Vérification du nom d'utilisateur du client“ + req.session.username); res.json (nom d'utilisateur : req.session.username)); "
Ces deux routes fonctionneront comme get et définies pour la session nom d'utilisateur var. Maintenant, avec un peu de JavaScript de base, nous pouvons implémenter la connexion automatique pour notre application. S'ouvrir src / App.js et changez-le comme suit:
"js / * global EventEmitter, événements, io, Peer * / / ** @jsx React.DOM * /
$ (function () 'use strict';
// Vérifie la valeur de la session $ (document) .ready (function () $ .ajax (url: '/ nom_utilisateur'). Done (fonction (données) console.log («données chargées:« + données. nom d'utilisateur); if (nomdonnées.utilisateur) initChat ($ ('# conteneur') [0], nomdonnées.us);););
// Définit la session $ ('# connect-btn'). Click (function () var data = JSON.stringify (nom_utilisateur: $ ('# username-input').) ($ .Ajax (url: '/ nom d'utilisateur', méthode: “POST”, données: data, type de contenu: 'application / json', type de données: 'json'););
// Initialise le chat $ ('# connect-btn'). Click (function () initChat ($ ('# conteneur') [0], $ ('# username-input'). Val ()) )
function initChat (conteneur, nom d'utilisateur) var proxy = new ChatServer (); React.renderComponent (
window.onbeforeunload = function () return 'Êtes-vous sûr de vouloir quitter le chat?'; ;
); "
Avec le $ .ajax installation de jQuery nous créons une demande pour vérifier la valeur de la variable de session lorsque le document devient disponible. Si cette option est définie, nous initialisons ensuite notre composant React avec la valeur stockée, ce qui crée une fonctionnalité de connexion automatique pour nos utilisateurs..
Relancez le chat avec npm start et regardez dans votre navigateur pour voir les séances de travail.
Vous avez maintenant constaté à quel point il est facile d’utiliser Mongoose en conjonction avec Express et de configurer des sessions Express. Poursuivant le développement de vos applications avec React en tant que contrôleur de vue lié à des éléments sauvegardés dans une base de données créera des applications sérieuses.
Si vous souhaitez aller plus loin avec React et voir comment vos composants peuvent communiquer entre eux en interne dans le cadre de React, ce guide de la documentation officielle est très utile..
