React: 지속적인 데이터와 원활한 세션 보장

"기억하기" 기능은 매우 유용한 기능이며 React 및 Express를 사용하여 비교적 쉽게 구현할 수 있습니다. WebRTC 채팅 애플리케이션 설정의 이전 부분을 계속해서 이제 Mongo 지원 영구 세션과 데이터베이스 지원 온라인 사용자 목록을 추가하겠습니다.

대화?

이전에 세션을 사용해 본 적이 없다면 간단히 말해서 세션을 통해 애플리케이션의 활성 사용자를 실시간으로 추적할 수 있다는 점에서 세션은 쿠키와 매우 유사합니다. 세션은 실제로 애플리케이션의 요청/응답 헤더에 전송된 쿠키인 会话 cookie 를 통해 작동합니다.

그래서 쿠키와 세션은 본질적으로 서로 얽혀 있습니다. 이미 쿠키가 있는데 세션이 필요한 이유는 무엇입니까? 세션은 또한 애플리케이션의 서버 부분에서 사용되는 백엔드 스토리지를 정의하는 기능을 제공합니다. 즉, 앱에 필요할 때마다 데이터베이스에서 정보를 검색할 수 있습니다.

따라서 채팅 애플리케이션의 실제 예에서는 이제 사용자의 사용자 이름을 저장할 수 있습니다. 애플리케이션을 약간 재구성하면 로깅을 위해 전체 채팅 기록을 데이터베이스에 삽입할 수도 있습니다.

다음 예에서는 영구 백엔드 스토리지로 Mongo 데이터베이스를 사용합니다. 이는 세션 저장에 사용할 수 있는 여러 옵션 중 하나이며, 여러 웹 서버가 있는 대규모 프로덕션 설정에 강력히 권장하는 또 다른 옵션은 Memcache입니다.

문서 보관

Mongo는 널리 사용되는 MySQL과 같은 관계형 데이터 저장소가 아닌 NoSQL 문서 저장소 엔진입니다. 이전에 MySQL 또는 이와 유사한 데이터베이스를 사용해 본 적이 있고 Mongo를 빠르게 익혀야 하는 경우 NoSQL은 시작하기가 정말 쉽습니다. 오래 걸리지 않습니다. 알아야 할 가장 큰 차이점은 다음과 같습니다.

• 이름에서 알 수 있듯이 NoSQL은 SQL을 사용하여 쿼리를 실행하지 않습니다. 대신 데이터는 db.collectionName.find() 将是 SELECT * FROM table와 같은 메서드 호출을 통해 추상화됩니다.
• 용어가 다릅니다. MySQL에는 테이블, 행, 열이 있는 반면 Mongo에는 컬렉션, 문서 및 키가 있습니다.
• 데이터는 JSON 객체와 동일하게 구조화되어 있습니다.

아직 Mongo가 없다면 패키지 관리자를 통해 설치하세요. 예를 들어 Linux 기반 배포판에서는 다음과 같습니다.

으아악

Mongo를 설치한 후 npm에서 제공하는 mongoose 模块轻松地将 Mongo 支持添加到我们的聊天应用程序中。使用以下命令安装 mongoose를 사용할 수 있습니다.

으아악

이제 애플리케이션에 Mongo를 추가해 보겠습니다. 코드 편집기를 시작한 다음 app.js를 열고 스크립트 상단을 다음과 같이 설정합니다.

으아악

우리는 mongoose 包含在 require('mongoose') 中，然后通过 mongoose.connect('mongodb:/ /本地主机:27017/chat');할 것입니다.

/chat 연결하려는 데이터베이스의 이름을 정의합니다.

다음으로, 개발 목적으로 디버깅을 켜기로 설정하는 것이 좋습니다.

으아악

마지막으로 오류 이벤트에 대한 핸들러를 추가합니다:

으아악

다음으로 다음 코드를 사용하여 연결 확인을 추가할 수 있습니다.

으아악

mongoose 的使用方式是，一旦 db 实例收到 open 이벤트에 참여하여 몽고 연결을 실행하겠습니다. 따라서 이를 사용하려면 기존 코드를 이 새로운 mongo 연결로 래핑해야 합니다.

다음은 사용자가 온라인 및 오프라인일 때 몽구스를 추가하고 행을 삽입 및 삭제하는 전체 코드 목록입니다.

으아악

이 내용을 실제로 보려면 채팅 애플리케이션을 실행해 보겠습니다. npm start를 실행하여 시작하세요.

이제 브라우저에서 채팅 연결이 제대로 작동합니다(기본값은 http://localhost:3001).

채팅에 연결한 후 새 터미널 창에서 mongo cli를 mongo chat엽니다.

으아악

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

으아악

앱에 세션 추가

Express를 사용하여 애플리케이션을 구축하고 있으므로 이 부분은 매우 간단하며 시작하려면 npm에서 몇 가지 모듈만 설치하면 됩니다.

npm에서 express-session 和 connect-mongo 패키지를 받으세요:

으아악

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

위 내용은 React: 지속적인 데이터와 원활한 세션 보장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!