在不轮询更改的情况下响应服务器端渲染

Question

我正在尝试将现有的web应用程序从knocket转换为react js。

目前，应用程序建立了与服务器的websocket连接，并异步接收更新（可能有许多客户端会影响彼此的状态，例如聊天室）。

我的问题是，如果我在渲染服务器端，如何将更改推送到每个客户端？我才刚刚开始阅读服务器上的渲染，所以我可能误解了它的工作原理，但我相信：

客户端执行一个发送到服务器的操作，服务器用一个html片段进行响应，然后客户端将其替换到其DOM 中

如果应用程序的状态可以由服务器或另一个客户端更改，我还会被迫使用websockets/http轮询来显示这些更新吗？

否则，服务器是否有可能推送新的片段？

Answer 1

对于React，单向流通常是最好的方法。要实现这一点，我们应该使用事件发射器。

您可以使用websockets、SSE或轮询从服务器获取JSON（这无关紧要）。它们应该是信封格式的。这将是聊天应用程序的一个示例。

{
  "type": "new-message", 
  "payload": {
    "from": "someone",
    "to": "#some-channel",
    "time": 1415844019196
  }
}

当您从服务器获得此消息时，您会将其作为事件发出。

var handleMessage = function(envelope){
   myEventEmitter.emit(envelope.type, envelope.payload);
};

这是调度员的一种形式。它只是获取事件，并将其广播给任何感兴趣的人。通常，感兴趣的一方将是一个组件或一个商店（不断变化）。

var MessageList = React.createClass({
   componentDidMount: function(){
      myEventEmitter.on('new-message', this.handleNewMessage);
   },
   handleNewMessage: function(message){
      if (message.to === this.props.channel) {
          this.setState({messages: this.state.messages.concat(message)});
      }
   },
   componentWillUnmount: function(){
      myEventEmitter.removeListener(this.handleNewMessage);
   },
   ...
});

当用户提交消息时，您会发出一个"用户新消息"事件。实现handleMessage的代码的同一部分将侦听此事件，将消息发送到服务器，并发出一个新的消息事件，以便更新UI。

您还可以在代码的其他地方（而不是组件中）保留收到的消息列表，或者请求从服务器获取最近的消息。

从服务器发送html通常是一个非常糟糕、不灵活且无法实现的想法。AJAX用于向客户端获取数据，客户端选择如何将这些数据呈现给用户。

Answer 2

如果我在渲染服务器端，如何将更改推送到每个客户端？

好吧，你刚刚通过Sockets说的。

然而，这并不是真正的"最优"。你不会想每次都把标记往下推。如果客户没有模板，我建议你把它推送给他们，或者只是在页面中预加载它。当他们这样做的时候，只需向下推数据，让客户端呈现它

如果应用程序的状态可以由服务器或另一个客户端更改，我还会被迫使用websockets/http轮询来显示这些更新吗？

有一种替代WebSockets的方法，叫做服务器端事件。它有点像WebSockets，但它是单向的，仅限服务器->浏览器。浏览器监听服务器端内容的方式与通过WebSockets相同。然而，通过与服务器通信，您可以使用普通的旧AJAX或表单或其他任何东西。支持是有限的，但有聚乙烯填充物。

事实上，您可以对WebSockets做同样的事情，只需使用下线，但这将违背其目的。