内容来自zvvq，别采集哟
拥有“记住我”功能是一个非常有用的功能，并且使用 React 和 Express 实现相对容易。继续我们设置 WebRTC 聊天应用程序的上一部分，我们现在将添加 Mongo 支持的持久会话和数据库支持的在线用户列表以进行良好的衡量。
zvvq好，好zvvq
会话？
如果您以前没有使用过会话，简而言之，它们与 cookie 非常相似，因为会话使您能够实时跟踪应用程序的活跃用户。会话实际上是通过 会话 cookie 工作的，该 cookie 在您的应用程序的请求/响应标头中发送。 内容来自samhan
因此 cookie 和会话本质上是交织在一起的。如果我们已经有了cookie，为什么还需要会话呢？会话还为您提供了定义应用程序的服务器部分使用的后端存储的能力。这意味着只要您的应用需要该信息，就可以从数据库中检索该信息。 内容来自zvvq
因此，在我们的聊天应用程序的现实示例中，我们现在可以存储用户的用户名 - 如果我们稍微重新配置我们的应用程序，还将整个聊天历史记录插入到数据库中进行记录。
在下一个示例中，我们将使用 Mongo 数据库进行持久后端存储。这是可用于会话存储的几个选项之一，对于具有多个 Web 服务器的大规模生产设置，我强烈推荐的另一个选项是 memcache。
zvvq.cn
文档存储
Mongo 是一个 NoSQL 文档存储引擎，而不是像流行的 MySQL 那样的关系数据存储。如果您以前使用过 MySQL 或类似数据库并且需要快速了解 Mongo，那么 NoSQL 真的很容易上手——这不会花费您很长时间。您应该了解的最大区别如下：
内容来自samhan666
顾名思义，NoSQL 不使用 SQL 来执行查询。相反，数据是通过方法调用来抽象的；例如 db.collectionName.find() 将是 SELECT * FROM table。 术语不同：在 MySQL 中，我们有表、行和列，而在 Mongo 中，有集合、文档和键。 数据是结构化的，与 JSON 对象相同。如果您还没有 Mongo，请通过包管理器安装它。例如，在基于 Linux 的发行版中： zvvq
1
$ sudo apt-get install mongodb
安装 Mongo 后，我们可以使用 npm 提供的 mongoose 模块轻松地将 Mongo 支持添加到我们的聊天应用程序中。使用以下命令安装 mongoose：
1 内容来自zvvq
$ npm install mongoose --save
现在让我们向我们的应用程序添加一些 Mongo。启动代码编辑器，然后打开 app.js 并将脚本的顶部设置如下。
1 zvvq
2
内容来自zvvq
3
4 zvvq
5 zvvq
6
7
内容来自zvvq
8 zvvq.cn
9 内容来自samhan666
10 zvvq
11
zvvq
12
13
zvvq.cn
14
15
内容来自samhan
16
//Configure our Services 内容来自zvvq，别采集哟
var PeerServer = require(peer).PeerServer, copyright zvvq
express = require(express),
本文来自zvvq
mongoose = require(mongoose),
zvvq
assert = require(assert), zvvq
events = require(./src/events.js),
app = express(), 内容来自samhan666
port = process.env.PORT || 3001;
//Connect to the database
内容来自zvvq
mongoose.connect(mongodb://localhost:27017/chat);
var db = mongoose.connection;
zvvq好，好zvvq
mongoose.set(debug, true);
内容来自samhan666
db.on(error, console.error.bind(console, # Mongo DB: connection error:));
我们将 mongoose 包含在 require(mongoose) 中，然后通过 mongoose.connect(mongodb:/ /本地主机:27017/chat);。 zvvq好，好zvvq
/chat 定义我们要连接的数据库的名称。 zvvq好，好zvvq
接下来，出于开发目的，我建议我们将调试设置为打开。
zvvq.cn
1
mongoose.set(debug, true);
最后我们为任何错误事件添加一个处理程序：
1 内容来自zvvq
db.on(error, console.error.bind(console, # Mongo DB: connection error:));
接下来，您可以使用以下代码添加对连接的检查：
1 copyright zvvq
2
3 本文来自zvvq
db.once(open, function (callback) { 内容来自samhan666
console.log("# Mongo DB: Connected to server"); 内容来自samhan666
}
内容来自samhan
mongoose 的使用方式是，一旦 db 实例收到 open 事件，我们就会进入执行我们的 mongo 连接。因此，我们需要将现有代码包装到这个新的 mongo 连接中才能使用它。 zvvq.cn
下面是完整的代码清单，其中添加了 mongoose，并在用户上线和离线时插入行和删除行。
本文来自zvvq
1 copyright zvvq
2 本文来自zvvq
3
4 zvvq.cn
5
copyright zvvq
6
7
8 本文来自zvvq
9 内容来自zvvq
10
11 内容来自zvvq，别采集哟
12 copyright zvvq
13
copyright zvvq
14 内容来自zvvq，别采集哟
15 zvvq.cn
16
17
copyright zvvq
18 内容来自samhan
19
内容来自zvvq，别采集哟
20
zvvq好，好zvvq
21
内容来自zvvq
22
copyright zvvq
23 zvvq好，好zvvq
24 zvvq.cn
25 内容来自samhan
26
内容来自zvvq
27 zvvq.cn
28
内容来自samhan666
29 内容来自samhan666
30 内容来自zvvq，别采集哟
31
内容来自samhan
32
本文来自zvvq
33 zvvq好，好zvvq
34 本文来自zvvq
35
内容来自zvvq，别采集哟
36 copyright zvvq
37 zvvq.cn
38
39
40
copyright zvvq
41
42
43
44 zvvq.cn
45
内容来自samhan666
46 zvvq.cn
47
48 内容来自zvvq
49
50 内容来自zvvq，别采集哟
51
52
内容来自zvvq，别采集哟
53
zvvq
54
55 内容来自samhan
56 zvvq
57 zvvq好，好zvvq
58 内容来自zvvq，别采集哟
59
本文来自zvvq
60
本文来自zvvq
//Configure our Services
zvvq
var PeerServer = require(peer).PeerServer,
内容来自samhan666
express = require(express), zvvq好，好zvvq
mongoose = require(mongoose),
zvvq
assert = require(assert),
events = require(./src/events.js),
app = express(), copyright zvvq
port = process.env.PORT || 3001; zvvq
//Tell express to use the src directory 本文来自zvvq
app.use(express.static(__dirname + /src));
//Connect to the database
内容来自samhan666
mongoose.connect(mongodb://localhost:27017/chat); zvvq.cn
var db = mongoose.connection;
mongoose.set(debug, true);
本文来自zvvq
db.on(error, console.error.bind(console, # Mongo DB: connection error:));
db.once(open, function (callback) {
内容来自zvvq，别采集哟
console.log("# Mongo DB: Connected to server");
//Setup our User Schema
zvvq好，好zvvq
var usersSchema = mongoose.Schema({username: String});
copyright zvvq
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 }); zvvq好，好zvvq
//Print some console output zvvq.cn
console.log(#### -- Server Running -- ####);
console.log(# Express: Listening on port, port);
peer.on(connection, function (id) { 内容来自zvvq，别采集哟
io.emit(events.CONNECT, id);
内容来自zvvq
console.log(# Connected: , id); copyright zvvq
//Store Peer in database 本文来自zvvq
var user = new User({ username: id }); copyright zvvq
user.save(function (err, user) { 本文来自zvvq
if (err) return console.error(err); copyright zvvq
console.log(# User + id + saved to database); 内容来自samhan666
}); 内容来自zvvq，别采集哟
});
copyright zvvq
peer.on(disconnect, function (id) { zvvq.cn
io.emit(events.DISCONNECT, id); 内容来自samhan666
console.log(# Disconnected: , id); 内容来自samhan
//Remove Peer from database copyright zvvq
User.remove({username: id}, function(err){ if(err) return console.error(err)}); 内容来自zvvq
}); copyright zvvq
}); 内容来自zvvq，别采集哟
要查看此效果，让我们启动聊天应用程序。只需运行 npm start 即可启动。
zvvq.cn
现在在浏览器中正常连接到聊天（默认为 http://localhost:3001）。 内容来自zvvq，别采集哟
连接到聊天后，在新的终端窗口中打开 mongo chat 进入 mongo cli。
1 内容来自zvvq
2 内容来自zvvq
3 内容来自zvvq
4
5 zvvq
$ mongo chat
内容来自samhan
MongoDB shell version: 2.0.6 内容来自zvvq，别采集哟
connecting to: chat copyright zvvq
> db.users.find()
{ "username" : "CameronLovesPigs", "_id" : ObjectId("5636e9d7bd4533d610040730"), "__v" : 0 } zvvq
这里您的 mongo 中存储了文档记录，现在您可以随时通过在 mongo 提示符下运行 db.users.count 来检查有多少用户在线()。
1
2
> db.users.count() 内容来自zvvq，别采集哟
3 本文来自zvvq
向我们的应用添加会话
因为我们使用 Express 来构建我们的应用程序，所以这部分非常简单，只需要安装 npm 中的几个模块即可开始。
copyright zvvq
从 npm 获取 express-session 和 connect-mongo 包：
zvvq
1
$ npm install express-session connect-mongo cookie-parser --save
内容来自zvvq
现在将它们包含在 app.js 的顶部： copyright zvvq
1
2
3
本文来自zvvq
4 内容来自zvvq
5
内容来自zvvq
6 zvvq好，好zvvq
7
内容来自zvvq，别采集哟
var PeerServer = require(peer).PeerServer,
内容来自samhan
cookieParser = require(cookie-parser),
express = require(express), zvvq好，好zvvq
session = require(express-session), zvvq.cn
mongoose = require(mongoose),
内容来自samhan666
MongoStore = require(connect-mongo)(session),
//... 内容来自samhan666
设置 mongoose.connect 后，您可以使用 Express 配置会话。将您的代码更改为以下内容；您可以指定自己的 secret 字符串。
内容来自zvvq，别采集哟
1
内容来自samhan
2 内容来自samhan
3 zvvq好，好zvvq
4 zvvq好，好zvvq
5
本文来自zvvq
6
本文来自zvvq
7
8 内容来自zvvq
9
10 内容来自zvvq
11
12
内容来自zvvq
13
内容来自samhan
14
15
//Connect to the database
内容来自zvvq，别采集哟
mongoose.connect(mongodb://localhost:27017/chat); copyright zvvq
var db = mongoose.connection; zvvq好，好zvvq
mongoose.set(debug, true);
zvvq好，好zvvq
db.on(error, console.error.bind(console, # Mongo DB: connection error:)); zvvq.cn
app.use(cookieParser()); 内容来自samhan666
app.use(session({ copyright zvvq
secret: supersecretstring12345!, 内容来自samhan666
saveUninitialized: true,
copyright zvvq
resave: true,
store: new MongoStore({ mongooseConnection: db })
内容来自zvvq，别采集哟
})) copyright zvvq
这里需要注意的一个关键设置是最后一个 app.use 中的 saveUninitialized: true 。这将确保保存会话。 内容来自samhan666
我们使用 store 属性指定位置，该属性设置为 MongoStore 实例，通过 mongooseConnection 和我们的 db 对象。 copyright zvvq
为了存储到会话中，我们需要使用express来处理请求，因为我们需要访问请求值，例如：
copyright zvvq
1
zvvq好，好zvvq
2 内容来自zvvq
3 copyright zvvq
4 zvvq好，好zvvq
//Start persistent session for user
app.use(function(req, res, next) { zvvq
req.session.username = id;
本文来自zvvq
req.session.save(); zvvq
这将使用用户输入的值创建 req.session.username 变量并保存以供稍后使用。 copyright zvvq
接下来，我们可以使用客户端代码检查此值，并在用户刷新时自动登录，这样他们就永远不会退出聊天并自动以其选择的用户名登录。
还值得注意的是，因为我们有数据库支持的会话，所以如果开发人员更改应用程序和后端重新加载，登录到其客户端的用户将保持登录状态，因为会话存储是现在执着。这是一个很棒的功能，可以让您的用户在开发过程中或在与不稳定的客户端断开连接时始终保持登录状态。 内容来自samhan
持久登录
现在我们已经设置了会话 cookie 部分，接下来让我们将持久登录添加到我们的前端代码中。
到目前为止，我们只是使用了 Express 为 SPA 应用程序提供的默认路由，并没有为 Express 定义任何路由处理。正如我之前提到的，要访问会话，您将需要 Express 的请求/响应变量。 内容来自samhan666
首先，我们需要一个路由，以便我们可以访问 Express 提供的 request 对象并显示它以进行调试。在 /app.js 中的 Express 配置内，在会话设置之后，在文件顶部附近添加以下内容：
内容来自zvvq，别采集哟
1
zvvq好，好zvvq
2 zvvq好，好zvvq
3
4 zvvq
5
zvvq
6
zvvq
7 内容来自samhan666
8
9
内容来自samhan666
10 本文来自zvvq
11 zvvq好，好zvvq
12
zvvq
13 本文来自zvvq
14 内容来自samhan666
15 内容来自zvvq
16
zvvq
app.use(session({
secret: supersecretstring12345!,
zvvq.cn
saveUninitialized: true,
resave: true,
store: new MongoStore({ mongooseConnection: db })
}))
本文来自zvvq
app.get(/, function (req, res) { zvvq好，好zvvq
res.sendFile(__dirname +/src/index.html); 内容来自samhan
if(req.session.username == undefined){
console.log("# Username not set in session yet"); zvvq好，好zvvq
} else { zvvq好，好zvvq
console.log("# Username from session: "+ req.session.username);
内容来自samhan
} 内容来自zvvq，别采集哟
});
现在我们有一些基本的日志记录来查看我们的会话值发生了什么。为了设置它，我们需要像这样配置 getter 和 setter 路由：
zvvq.cn
1 zvvq好，好zvvq
2
内容来自samhan666
3 内容来自samhan
4 内容来自zvvq，别采集哟
5 copyright zvvq
6 内容来自samhan666
7
8
copyright zvvq
9 内容来自zvvq
10 内容来自zvvq，别采集哟
11
zvvq好，好zvvq
12
copyright zvvq
13
本文来自zvvq
14
内容来自samhan666
//Save the username when the user posts the set username form
app.post(/username, function(req, res){ 内容来自zvvq
console.log("# Username set to "+ req.body.username); zvvq
req.session.username = req.body.username; 内容来自samhan
req.session.save();
console.log("# Session value set "+ req.session.username);
res.end();
}); zvvq.cn
//Return the session value when the client checks zvvq.cn
app.get(/username, function(req,res){
内容来自zvvq，别采集哟
console.log("# Client Username check "+ req.session.username); zvvq好，好zvvq
res.json({username: req.session.username}) 内容来自zvvq，别采集哟
}); 内容来自samhan666
这两条路由将用作用户名会话变量的获取和设置。现在，通过一些基本的 JavaScript，我们可以为我们的应用程序实现自动登录。打开src/App.js，修改如下：
1 内容来自samhan
2
3 内容来自samhan666
4 内容来自samhan666
5
本文来自zvvq
6 本文来自zvvq
7 内容来自zvvq，别采集哟
8
本文来自zvvq
9
10 内容来自zvvq，别采集哟
11 zvvq好，好zvvq
12
13 内容来自zvvq
14 本文来自zvvq
15
zvvq好，好zvvq
16
17 zvvq
18
19 zvvq好，好zvvq
20 copyright zvvq
21
copyright zvvq
22
zvvq好，好zvvq
23 内容来自samhan
24 内容来自samhan
25
内容来自zvvq，别采集哟
26
27
28
zvvq
29
30
zvvq好，好zvvq
31
32 内容来自samhan
33 zvvq.cn
34 本文来自zvvq
35
36 zvvq好，好zvvq
37 zvvq.cn
38
内容来自samhan666
39 本文来自zvvq
40 本文来自zvvq
41 本文来自zvvq
42 内容来自zvvq
43 内容来自samhan
44 copyright zvvq
/* global EventEmitter, events, io, Peer */
/ @jsx React.DOM */
zvvq
$(function () {
内容来自samhan666
use strict;
zvvq好，好zvvq
// Check for session value
$(document).ready(function(){
内容来自samhan666
$.ajax({ 内容来自samhan666
url: /username zvvq.cn
}).done(function (data) {
console.log("data loaded: " + data.username);
内容来自samhan
if(data.username) 内容来自zvvq
initChat($(#container)[0], data.username); copyright zvvq
}); zvvq
});
// Set the session
$(#connect-btn).click(function(){ 内容来自samhan
var data = JSON.stringify({username: $(#username-input).val()}); zvvq.cn
$.ajax({ url: /username, 内容来自samhan
method: "POST", zvvq.cn
data: data, zvvq好，好zvvq
contentType: application/json,
内容来自samhan
dataType: json 本文来自zvvq
});
内容来自zvvq，别采集哟
});
本文来自zvvq
// Initialize the chat
内容来自zvvq，别采集哟
$(#connect-btn).click(function () { 内容来自zvvq，别采集哟
initChat($(#container)[0], copyright zvvq
$(#username-input).val());
copyright zvvq
});
function initChat(container, username) {
var proxy = new ChatServer(); copyright zvvq
React.renderComponent(, container); 内容来自samhan
} 内容来自zvvq，别采集哟
window.onbeforeunload = function () { 内容来自samhan666
return Are you sure you want to leave the chat?; zvvq
};
}); 内容来自samhan666
使用 jQuery 的 $.ajax 工具，我们创建一个请求，以在 文档 可用时检查会话变量的值。如果设置了，我们就会使用存储的值初始化我们的 React 组件，从而为我们的用户提供自动登录功能。
内容来自zvvq，别采集哟
使用 npm start 再次启动聊天，并在浏览器中查看会话是否正常工作。 内容来自zvvq
结论
现在您已经看到将 Mongoose 与 Express 结合使用并设置 Express 会话是多么容易。使用 React 作为链接到数据库支持元素的视图控制器来进一步开发应用程序将创建一些重要的应用程序。 copyright zvvq
如果您想进一步了解 React 并了解组件如何在 React 框架内部相互通信，官方文档中的这份指南非常有用。
以上就是React：确保持久数据和无缝会话的详细内容，更多请关注其它相关文章！
内容来自zvvq，别采集哟