Question

我正在尝试将现有的网络应用程序从淘汰赛转换为反应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);
   },
   ...
});

当用户提交消息时，您将发出'user-new-message'事件。实现handleMessage的代码的相同部分将监听此事件，将消息发送到服务器，并发出新消息事件，以便可以更新UI。

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

从服务器发送HTML通常是一个非常糟糕，不灵活且无法理解的想法。 AJAX用于将数据提供给客户端，客户端选择如何向用户提供此数据。

Answer 2

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

嗯，你刚才通过Sockets说过。

然而，这并非真正“最佳”。你不希望每次都按下标记。我建议您将模板下载到客户端，如果他们没有，或者只是在页面中预加载它。当他们这样做时，只需将数据向下推，然后让客户端渲染它。

如果应用程序的状态可以由服务器或其他客户端更改，我是否仍会被迫使用websockets / http轮询来显示这些更新？

WebSockets还有一种称为服务器端事件的替代方案。它有点像WebSockets，但它是单向的，服务器 - ＆gt;仅浏览器。浏览器以与通过WebSockets相同的方式监听服务器端的内容。但是，将通信到服务器，您可以使用普通的旧AJAX或表单或其他任何东西。 Support is limited但是有polyfill。

事实上，你可以用WebSockets做同样的事情，只使用下线，但那会破坏它的目的。

在不轮询更改的情况下对服务器端呈现进行反应

2 个答案: