「私を覚えてください」機能は非常に便利な機能で、React と Express を使用して実装するのは比較的簡単です。 WebRTC チャット アプリケーションをセットアップする前の部分を続けて、Mongo がサポートする永続セッションと、データベースがサポートするオンライン ユーザーのリストを追加します。
＃＃＃セッション？session cookie を介して機能します。
したがって、実際のチャット アプリケーションの例では、ユーザーのユーザー名を保存できるようになりました。また、アプリケーションを少し再構成すると、チャット履歴全体をログ用のデータベースに挿入することもできます。
次の例では、永続的なバックエンド ストレージとして Mongo データベースを使用します。これは、セッション ストレージに使用できるいくつかのオプションの 1 つであり、複数の Web サーバーを使用する大規模な運用セットアップに強くお勧めするもう 1 つのオプションは memcache です。
ドキュメントストレージ
は SELECT * FROM table になります。
リーリー
Mongo をインストールした後、npm が提供するmongoose モジュールを使用して、チャット アプリケーションに Mongo サポートを簡単に追加できます。次のコマンドを使用して mongoose をインストールします:
リーリー
app.js を開き、スクリプトの先頭を次のように設定します。
リーリー
require('mongoose') に mongoose を含めて、 mongoose.connect('mongodb://localhost:27017/chat') ;## を渡します。 ＃。
接続するデータベースの名前を定義します。
次に、開発目的で、デバッグをオンに設定することをお勧めします。
最後に、エラー イベントのハンドラーを追加します:
リーリー次に、次のコードを使用して接続のチェックを追加できます。
リーリー mongoose の使用方法は、db インスタンスが open イベントを受信すると、mongo 接続の実行に移ります。したがって、既存のコードをこの新しい mongo 接続にラップして使用する必要があります。
以下は、ユーザーがオンラインおよびオフラインのときに mongoose を追加し、行を挿入および削除する完全なコードのリストです。
これが実際にどうなるかを確認するために、チャット アプリケーションを起動してみましょう。
npm start を実行して開始します。
これで、ブラウザで通常どおりチャットに接続できるようになりました (デフォルトは http://localhost:3001)。
チャットに接続した後、新しいターミナル ウィンドウで
mongo chat を開き、mongo cli を入力します。
リーリー
ここに
ドキュメント レコードが保存されています。mongo プロンプトで db.users.count を実行すると、いつでもオンライン() になっているユーザーの数を確認できます。
リーリー
セッションをアプリに追加する
からいくつかのモジュールをインストールするだけで済みます。
npm から
および connect-mongo パッケージを取得します:
リーリー
次に、これらを
の先頭に含めます:
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">
var PeerServer = require('peer').PeerServer,
cookieParser = require('cookie-parser'),
express = require('express'),
session = require('express-session'),
mongoose = require('mongoose'),
MongoStore = require('connect-mongo')(session),
//...
</pre><div class="contentsignin">ログイン後にコピー</div></div>
<p>设置 <code class="inline">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 框架内部相互通信，官方文档中的这份指南非常有用。
以上がReact: 永続的なデータとシームレスなセッションの確保の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
