React : garantir des données persistantes et des sessions transparentes

Avoir une fonctionnalité « se souvenir de moi » est une fonctionnalité très utile et relativement facile à mettre en œuvre avec React et Express. Poursuivant notre partie précédente de configuration d'une application de chat WebRTC, nous allons maintenant ajouter des sessions persistantes soutenues par Mongo et une liste d'utilisateurs en ligne sauvegardée par base de données pour faire bonne mesure.

Conversation ?

Si vous n'avez jamais utilisé de sessions auparavant, en bref, elles sont très similaires aux cookies dans le sens où les sessions vous permettent de suivre les utilisateurs actifs de votre application en temps réel. Les sessions fonctionnent en réalité via 会话 cookie , un cookie envoyé dans les en-têtes de requête/réponse de votre application.

Les cookies et les sessions sont donc intrinsèquement liés. Pourquoi avons-nous besoin d'une session si nous avons déjà des cookies ? Les sessions vous offrent également la possibilité de définir le stockage backend utilisé par la partie serveur de votre application. Cela signifie que les informations peuvent être récupérées de la base de données chaque fois que votre application en a besoin.

Ainsi, dans notre exemple réel d'application de chat, nous pouvons désormais stocker le nom d'utilisateur de l'utilisateur - et si nous reconfigurons un peu notre application, également insérer l'intégralité de l'historique de discussion dans la base de données pour la journalisation.

Dans l'exemple suivant, nous utiliserons la base de données Mongo pour le stockage backend persistant. C'est l'une des nombreuses options disponibles pour le stockage de session. Une autre option que je recommande fortement pour les configurations de production à grande échelle avec plusieurs serveurs Web est Memcache.

Stockage de documents

Mongo est un moteur de stockage de documents NoSQL, pas un magasin de données relationnelles comme le populaire MySQL. Si vous avez déjà travaillé avec MySQL ou des bases de données similaires et que vous avez besoin de vous familiariser avec Mongo, NoSQL est vraiment facile à utiliser - cela ne vous prendra pas longtemps. Les plus grandes différences que vous devez connaître sont les suivantes :

• Comme son nom l'indique, NoSQL n'utilise pas SQL pour exécuter des requêtes. Au lieu de cela, les données sont extraites via des appels de méthode par exemple db.collectionName.find() 将是 SELECT * FROM table.
• La terminologie est différente : dans MySQL, nous avons des tables, des lignes et des colonnes, tandis que dans Mongo, nous avons des collections, des documents et des clés.
• Les données sont structurées, de la même manière que les objets JSON.

Si vous n'avez pas encore Mongo, installez-le via votre gestionnaire de paquets. Par exemple, dans les distributions basées sur Linux :

$ sudo apt-get install mongodb

Après avoir installé Mongo, nous pouvons utiliser mongoose 模块轻松地将 Mongo 支持添加到我们的聊天应用程序中。使用以下命令安装 mongoose fourni par npm :

$ npm install mongoose --save

Ajoutons maintenant du Mongo à notre application. Lancez l'éditeur de code, puis ouvrez app.js et définissez le haut du script comme suit.

//Configure our 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;

//Connect to the 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:'));

Nous le ferons mongoose 包含在 require('mongoose') 中，然后通过 mongoose.connect('mongodb:/ /本地主机:27017/chat');.

/chat Définissez le nom de la base de données à laquelle nous souhaitons nous connecter.

Ensuite, à des fins de développement, je recommande d'activer le débogage.

mongoose.set('debug', true);

Enfin, nous ajoutons un gestionnaire pour tout événement d'erreur :

db.on('error', console.error.bind(console, '# Mongo DB: connection error:'));

Ensuite, vous pouvez ajouter un chèque de connexion en utilisant le code suivant :

db.once('open', function (callback) {
  console.log("# Mongo DB:  Connected to server");
}

mongoose 的使用方式是，一旦 db 实例收到 open événement, nous entrerons pour exécuter notre connexion mongo. Par conséquent, nous devons intégrer notre code existant dans cette nouvelle connexion mongo pour l'utiliser.

Vous trouverez ci-dessous la liste complète des codes qui ajoutent de la mangouste et insèrent et suppriment des lignes lorsque l'utilisateur est en ligne et hors ligne.

//Configure our 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;

//Tell express to use the 'src' directory
app.use(express.static(__dirname + '/src'));

//Connect to the 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:  Connected to server");

  //Setup our User Schema
  var usersSchema = mongoose.Schema({username: String});
  var User = mongoose.model('User', usersSchema);

  //Configure the http server and PeerJS Server
  var expressServer = app.listen(port);
  var io = require('socket.io').listen(expressServer);
  var peer = new PeerServer({ port: 9000, path: '/chat' });

  //Print some console output
  console.log('#### -- Server Running -- ####');
  console.log('# Express:   Listening on port', port);

  peer.on('connection', function (id) {
    io.emit(events.CONNECT, id);
    console.log('# Connected: ', id);

    //Store Peer in database
    var user = new User({ username: id });
    user.save(function (err, user) {
      if (err) return console.error(err);
      console.log('# User '+ id + ' saved to database');
    });

  });

  peer.on('disconnect', function (id) {
    io.emit(events.DISCONNECT, id);
    console.log('# Disconnected: ', id);

    //Remove Peer from database
    User.remove({username: id}, function(err){ if(err) return console.error(err)});

  });

});

Pour voir cela en effet, lançons l'application de chat. Courez simplement npm start pour commencer.

La connexion au chat fonctionne désormais correctement dans le navigateur (par défaut : http://localhost:3001).

Après vous être connecté au chat, ouvrez mongo chat dans le mongo cli dans une nouvelle fenêtre de terminal.

$ mongo chat
MongoDB shell version: 2.0.6
connecting to: chat
> db.users.find()
{ "username" : "CameronLovesPigs", "_id" : ObjectId("5636e9d7bd4533d610040730"), "__v" : 0 }

Voici votre mongo 中存储了文档记录，现在您可以随时通过在 mongo 提示符下运行 db.users.count 来检查有多少用户在线().

> db.users.count()
3

Ajouter des sessions à notre application

Puisque nous utilisons Express pour construire notre application, cette partie est très simple et ne nécessite que l'installation de quelques modules de npm pour commencer.

Obtenez le express-session 和 connect-mongo package de npm :

$ npm install express-session connect-mongo cookie-parser --save

Incluez-les maintenant en haut de app.js :

var PeerServer = require('peer').PeerServer,
    cookieParser = require('cookie-parser'),
    express = require('express'),
    session = require('express-session'),
    mongoose = require('mongoose'),
    MongoStore = require('connect-mongo')(session),
    //...

设置 mongoose.connect 后，您可以使用 Express 配置会话。将您的代码更改为以下内容；您可以指定自己的 secret 字符串。

//Connect to the 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 })
}))

这里需要注意的一个关键设置是最后一个 app.use 中的 saveUninitialized: true 。这将确保保存会话。

我们使用 store 属性指定位置，该属性设置为 MongoStore 实例，通过 mongooseConnection 和我们的 db 对象。

为了存储到会话中，我们需要使用express来处理请求，因为我们需要访问请求值，例如：

//Start persistent session for user
app.use(function(req, res, next) {
	req.session.username = id;
	req.session.save();

这将使用用户输入的值创建 req.session.username 变量并保存以供稍后使用。

接下来，我们可以使用客户端代码检查此值，并在用户刷新时自动登录，这样他们就永远不会退出聊天并自动以其选择的用户名登录。

还值得注意的是，因为我们有数据库支持的会话，所以如果开发人员更改应用程序和后端重新加载，登录到其客户端的用户将保持登录状态，因为会话存储是现在执着。这是一个很棒的功能，可以让您的用户在开发过程中或在与不稳定的客户端断开连接时始终保持登录状态。

持久登录

现在我们已经设置了会话 cookie 部分，接下来让我们将持久登录添加到我们的前端代码中。

到目前为止，我们只是使用了 Express 为 SPA 应用程序提供的默认路由，并没有为 Express 定义任何路由处理。正如我之前提到的，要访问会话，您将需要 Express 的请求/响应变量。

首先，我们需要一个路由，以便我们可以访问 Express 提供的 request 对象并显示它以进行调试。在 /app.js 中的 Express 配置内，在会话设置之后，在文件顶部附近添加以下内容：

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 not set in session yet");
  } else {
    console.log("# Username from session: "+ req.session.username);

  }
});

现在我们有一些基本的日志记录来查看我们的会话值发生了什么。为了设置它，我们需要像这样配置 getter 和 setter 路由：

//Save the username when the user posts the set username form
app.post('/username', function(req, res){
  console.log("# Username set to "+ req.body.username);
  req.session.username = req.body.username;
  req.session.save();
  console.log("# Session value set "+ req.session.username);
  res.end();
});

//Return the session value when the client checks
app.get('/username', function(req,res){
  console.log("# Client Username check "+ req.session.username);
  res.json({username: req.session.username})
});

这两条路由将用作用户名会话变量的获取和设置。现在，通过一些基本的 JavaScript，我们可以为我们的应用程序实现自动登录。打开src/App.js，修改如下：

/* global EventEmitter, events, io, Peer */
/** @jsx React.DOM */

$(function () {
  'use strict';

  // Check for session value
  $(document).ready(function(){
    $.ajax({
          url: '/username'
    }).done(function (data) {
      console.log("data loaded: " + data.username);
      if(data.username)
        initChat($('#container')[0], data.username);
    });
  });

  // Set the session
  $('#connect-btn').click(function(){
    var data = JSON.stringify({username: $('#username-input').val()});
    $.ajax({ url: '/username',
              method: "POST",
              data: data,
              contentType: 'application/json',
              dataType: 'json'
            });
  });

  // Initialize the chat
  $('#connect-btn').click(function () {
    initChat($('#container')[0],
      $('#username-input').val());
  });

  function initChat(container, username) {
    var proxy = new ChatServer();
    React.renderComponent(, container);
  }

  window.onbeforeunload = function () {
    return 'Are you sure you want to leave the chat?';
  };

});

使用 jQuery 的 $.ajax 工具，我们创建一个请求，以在 文档 可用时检查会话变量的值。如果设置了，我们就会使用存储的值初始化我们的 React 组件，从而为我们的用户提供自动登录功能。

使用 npm start 再次启动聊天，并在浏览器中查看会话是否正常工作。

结论

现在您已经看到将 Mongoose 与 Express 结合使用并设置 Express 会话是多么容易。使用 React 作为链接到数据库支持元素的视图控制器来进一步开发应用程序将创建一些重要的应用程序。

如果您想进一步了解 React 并了解组件如何在 React 框架内部相互通信，官方文档中的这份指南非常有用。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!