node.js - react 和 Socket.io : Able to get initial data - but view doesn't update when a new post comes in

Question

不确定问题是否在于我的套接字设置方式 - 或者我是否错误地尝试使用 React 呈现数据。

我可以使用我的套接字成功地提取数据 - 但是当新数据发布到服务器时它不会实时更新状态。我的意图是让 React 中的状态自动呈现新数据，由于套接字连接，这些数据始终处于事件状态。

这是我的客户端应用程序，它从服务器获取消息并呈现它们:

var Chat = React.createClass({
  getInitialState: function() {
    return {
      messages: null
    }
  },
  componentWillMount: function(){
    var self = this;
    socket.emit('getMessages');
    socket.on('serverMessages', function (data) {
      self.setState({messages: data})
    });
  },
  render: function() {
    var messages = this.state.messages ? <MessageList messages={this.state.messages}/> : null
    return (
      <div className="jumbotron">
        { messages }
        <MessageForm submitMessage={this.submitMessage}/>
      </div>
      );
  }
});

为了以防万一，这是我发送数据的服务器代码:

io.on('connection', function (socket) {

  socket.on('getMessages', function (data) {
    Message.find(function(err, messages){
      socket.emit('serverMessages', messages);
    })
  });

});

Answer 1

截至目前，您“只是”在加载组件后从服务器获取数据。为了获得更“实时”的东西，您需要使用您定期指定的相同 emit 语句来 ping 服务器(这违背了使用 websockets 的意义，实际上，您可以使用 long-轮询)或让服务器定期向所有客户端发送新数据。

您可以执行以下任一操作:

A) 客户端:“轮询”信息[不理想]

注意:我最初把这个放在我的答案中是因为我看到 OP 在加载 Controller 时正在“轮询”。我没有点击这可能是因为 Controller 可能没有加载 websocket，所以在连接上发送数据在这里可能不起作用。我的错。

将 socket.emit('getMessages') 替换为将定期“轮询”websocket 以获取数据的内容:

setInterval(function () {
    socket.emit('getMessages')
}, 10000); /* Request data from the socket every 10 seconds */

或

B) 服务器端:发送可用的新数据。 [最佳方式]

通过客户数组跟踪所有客户，并在他们的 session 结束时从中删除他们。

var clients = [];

io.on('connection', function (socket) {
    clients.push(socket);

    socket.on('end', function () {
        // Could also splice the array below, but it still works.
        delete clients[clients.indexOf(socket)];
    });


    /* Previous logic for server goes here */
});

当您需要从数据库/数据存储中推送新消息时运行此代码:

for (var i in clients) {
    clients[i].emit('serverMessages', /* messages object */);
}