React: 永続的なデータとシームレスなセッションの確保

「私を覚えてください」機能は非常に便利な機能で、React と Express を使用して実装するのは比較的簡単です。 WebRTC チャット アプリケーションをセットアップする前の部分を続けて、Mongo がサポートする永続セッションと、データベースがサポートするオンライン ユーザーのリストを追加します。

＃＃＃セッション？

これまでセッションを使用したことがない場合、セッションはアプリケーションのアクティブ ユーザーをリアルタイムで追跡できるという点で Cookie に非常に似ています。セッションは実際には、アプリケーションからの要求/応答ヘッダーで送信される

session cookie を介して機能します。

つまり、Cookie とセッションは本質的に絡み合っています。すでに Cookie があるのに、なぜセッションが必要なのでしょうか?セッションでは、アプリケーションのサーバー部分で使用されるバックエンド ストレージを定義する機能も提供されます。これは、アプリが必要とするときにいつでもデータベースから情報を取得できることを意味します。

したがって、実際のチャット アプリケーションの例では、ユーザーのユーザー名を保存できるようになりました。また、アプリケーションを少し再構成すると、チャット履歴全体をログ用のデータベースに挿入することもできます。

次の例では、永続的なバックエンド ストレージとして Mongo データベースを使用します。これは、セッション ストレージに使用できるいくつかのオプションの 1 つであり、複数の Web サーバーを使用する大規模な運用セットアップに強くお勧めするもう 1 つのオプションは memcache です。

ドキュメントストレージ

Mongo は NoSQL ドキュメント ストレージ エンジンであり、人気のある MySQL のようなリレーショナル データ ストアではありません。以前に MySQL または同様のデータベースを使用したことがあり、Mongo の速度に慣れる必要がある場合、NoSQL は非常に簡単に始めることができ、それほど時間はかかりません。知っておくべき最大の違いは次のとおりです:

名前が示すように、NoSQL はクエリの実行に SQL を使用しません。代わりに、データはメソッド呼び出しを通じて抽象化されます。たとえば、
• db.collectionName.find() は SELECT * FROM table になります。
用語が異なります。MySQL にはテーブル、行、列がありますが、Mongo にはコレクション、ドキュメント、キーがあります。
データは JSON オブジェクトと同じように構造化されています。

Mongo をまだお持ちでない場合は、パッケージ マネージャーを通じてインストールしてください。たとえば、Linux ベースのディストリビューションの場合:

リーリー

Mongo をインストールした後、npm が提供する

mongoose モジュールを使用して、チャット アプリケーションに Mongo サポートを簡単に追加できます。次のコマンドを使用して mongoose をインストールします: リーリー

次に、アプリケーションに Mongo を追加しましょう。コード エディターを起動し、

app.js を開き、スクリプトの先頭を次のように設定します。 リーリー

require('mongoose') に mongoose を含めて、 mongoose.connect('mongodb://localhost:27017/chat') ;## を渡します。 ＃。

/chat

接続するデータベースの名前を定義します。 次に、開発目的で、デバッグをオンに設定することをお勧めします。

リーリー

最後に、エラー イベントのハンドラーを追加します:

リーリー

次に、次のコードを使用して接続のチェックを追加できます。

リーリー

mongoose

の使用方法は、db インスタンスが open イベントを受信すると、mongo 接続の実行に移ります。したがって、既存のコードをこの新しい mongo 接続にラップして使用する必要があります。 以下は、ユーザーがオンラインおよびオフラインのときに mongoose を追加し、行を挿入および削除する完全なコードのリストです。

リーリー

これが実際にどうなるかを確認するために、チャット アプリケーションを起動してみましょう。

npm start

を実行して開始します。 これで、ブラウザで通常どおりチャットに接続できるようになりました (デフォルトは http://localhost:3001)。

チャットに接続した後、新しいターミナル ウィンドウで

mongo chat

を開き、mongo cli を入力します。 リーリー ここに

mongo

ドキュメント レコードが保存されています。mongo プロンプトで db.users.count を実行すると、いつでもオンライン() になっているユーザーの数を確認できます。 リーリー セッションをアプリに追加する

Express を使用してアプリケーションを構築しているため、この部分は非常に単純で、開始するには

npm

からいくつかのモジュールをインストールするだけで済みます。 npm から

express-session

および connect-mongo パッケージを取得します: リーリー 次に、これらを

app.js

の先頭に含めます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar: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 サイトの他の関連記事を参照してください。