Reagieren: Gewährleistung persistenter Daten und nahtloser Sitzungen

Eine „Angemeldet bleiben“-Funktion ist eine sehr nützliche Funktion und lässt sich mit React und Express relativ einfach implementieren. Wir setzen unseren vorherigen Teil der Einrichtung einer WebRTC-Chat-Anwendung fort und werden nun zur Sicherheit Mongo-gestützte dauerhafte Sitzungen und eine datenbankgestützte Liste von Online-Benutzern hinzufügen.

Konversation?

Wenn Sie Sitzungen noch nie verwendet haben, sind sie Kurz gesagt Cookies sehr ähnlich, da Sitzungen es Ihnen ermöglichen, aktive Benutzer Ihrer Anwendung in Echtzeit zu verfolgen. Sitzungen funktionieren tatsächlich über 会话 cookie, ein Cookie, das in den Anfrage-/Antwort-Headern Ihrer Anwendung gesendet wird.

Cookies und Sitzungen sind also von Natur aus miteinander verknüpft. Warum brauchen wir eine Sitzung, wenn wir bereits Cookies haben? Sitzungen bieten Ihnen auch die Möglichkeit, den Backend-Speicher zu definieren, der vom Serverteil Ihrer Anwendung verwendet wird. Dies bedeutet, dass die Informationen jederzeit aus der Datenbank abgerufen werden können, wenn Ihre App sie benötigt.

In unserem realen Beispiel einer Chat-Anwendung können wir nun also den Benutzernamen des Benutzers speichern – und wenn wir unsere Anwendung etwas umkonfigurieren, auch den gesamten Chat-Verlauf zur Protokollierung in die Datenbank einfügen.

Im nächsten Beispiel verwenden wir die Mongo-Datenbank für den dauerhaften Backend-Speicher. Dies ist eine von mehreren verfügbaren Optionen für die Sitzungsspeicherung. Eine weitere Option, die ich für große Produktionskonfigurationen mit mehreren Webservern wärmstens empfehle, ist Memcache.

Dokumentenspeicher

Mongo ist eine NoSQL-Dokumentspeicher-Engine, kein relationaler Datenspeicher wie das beliebte MySQL. Wenn Sie bereits mit MySQL oder ähnlichen Datenbanken gearbeitet haben und sich mit Mongo vertraut machen möchten, ist der Einstieg in NoSQL wirklich einfach – es wird nicht lange dauern. Die größten Unterschiede, die Sie kennen sollten, sind folgende:

• Wie der Name schon sagt, verwendet NoSQL kein SQL zum Ausführen von Abfragen. Stattdessen werden Daten beispielsweise durch Methodenaufrufe abstrahiert. db.collectionName.find() 将是 SELECT * FROM table
Die Terminologie ist anders: In MySQL haben wir Tabellen, Zeilen und Spalten, während wir in Mongo Sammlungen, Dokumente und Schlüssel haben.
Die Daten sind genauso strukturiert wie JSON-Objekte.

Wenn Sie Mongo noch nicht haben, installieren Sie es über Ihren Paketmanager. Beispielsweise in Linux-basierten Distributionen:

$ sudo apt-get install mongodb

Nach der Installation von Mongo können wir

von npm verwenden: mongoose 模块轻松地将 Mongo 支持添加到我们的聊天应用程序中。使用以下命令安装 mongoose

$ npm install mongoose --save

Jetzt fügen wir unserer Anwendung etwas Mongo hinzu. Starten Sie den Code-Editor, öffnen Sie dann

und legen Sie den Anfang des Skripts wie folgt fest. app.js

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

Wir werden

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

Definieren Sie den Namen der Datenbank, mit der wir eine Verbindung herstellen möchten. /chat

Als nächstes empfehle ich für Entwicklungszwecke, das Debuggen einzuschalten.

mongoose.set('debug', true);

Schließlich fügen wir einen Handler für alle Fehlerereignisse hinzu:

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

Als nächstes können Sie mit dem folgenden Code eine Prüfung für die Verbindung hinzufügen:

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

Veranstaltung, an der wir teilnehmen werden, um unsere Mongo-Verbindung auszuführen. Daher müssen wir unseren vorhandenen Code in diese neue Mongo-Verbindung einbinden, um ihn verwenden zu können. mongoose 的使用方式是，一旦 db 实例收到 open

Nachfolgend finden Sie die vollständige Codeliste, die Mungo hinzufügt und Zeilen einfügt und löscht, wenn der Benutzer online und offline ist.

//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)});

  });

});

Um dies zu sehen, starten wir die Chat-Anwendung. Führen Sie einfach

aus, um zu beginnen. npm start

Die Verbindung zum Chat funktioniert jetzt ordnungsgemäß im Browser (standardmäßig http://localhost:3001).

Nachdem Sie eine Verbindung zum Chat hergestellt haben, öffnen Sie

die Mongo-CLI in einem neuen Terminalfenster. mongo chat

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

Hier ist Ihr

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

> db.users.count()
3

Fügen Sie Sitzungen zu unserer App hinzu

Da wir Express zum Erstellen unserer Anwendung verwenden, ist dieser Teil sehr einfach und erfordert nur die Installation einiger Module von

, um loszulegen. npm

Holen Sie sich das

Paket von npm: express-session 和 connect-mongo

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

Fügen Sie sie nun oben in

ein: 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 框架内部相互通信，官方文档中的这份指南非常有用。

Das obige ist der detaillierte Inhalt vonReagieren: Gewährleistung persistenter Daten und nahtloser Sitzungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!