6

我正在尝试将现有的 Web 应用程序从淘汰赛转换为 react js。

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

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

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

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

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

4

2 回答 2

7

使用 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 用于向客户端获取数据，客户端选择如何将这些数据呈现给用户。

于 2014-11-13T02:07:12.780 回答
0

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

好吧，你刚刚说过，通过套接字。

然而，这并不是真正的“最佳”。您不想每次都将标记向下推。如果客户没有模板，我建议您将模板推送给客户，或者只是将其预加载到页面中。当他们这样做时，只需将数据向下推送并让客户端呈现它。

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

WebSockets 有一个替代方案，称为服务器端事件。它有点像 WebSockets，但它是单向的，仅限服务器 -> 浏览器。浏览器以与通过 WebSockets 相同的方式侦听服务器端内容。但是，与服务器通信时，您可以使用普通的旧 AJAX 或表单或其他任何东西。支持有限，但有 polyfills。

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

于 2014-11-13T01:54:45.230 回答