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

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用于将数据提供给客户端,客户端选择如何向用户提供此数据.