通过websockets向聊天组件(react.js)添加消息

Question

上下文：

我正在开发一个RubyonRails应用程序，并开始使用React.js来管理我的javascript组件。我的应用程序提供了一个类似facebook的聊天：几个聊天显示在页面底部。

问题

我有一个聊天列表组件来呈现聊天。聊天是由消息和表单组成的。当提交此表单时，会向服务器发出AJAX调用以POST消息，并将消息添加到当前聊天中。

this.setState({messages: this.state.messages.concat([newMessage])});

然后，服务器向接收器广播Javascript代码。

这就是我被卡住的地方。如何将消息添加到正确的聊天中？如何选择我的React.js组件并更改其"道具"？当我不使用react时，我曾向其他用户广播此代码：

$("#chat-<%= chat.id %>").append("<%= message.content" %>);

我想我必须找到一种方法来选择React组件(聊天实例(并更改其属性"messages"。怎样

谢谢你的帮助！：(

编辑：我将添加更多信息，以防万一：

• 我的聊天列表是一个全局变量，它接受一系列聊天
• 每个聊天都有一个消息数组和一个表单

当我提交聊天表单时，它会将消息添加到聊天中(在本地，它还会将新消息发布到服务器(。当服务器接收到POST事件时，它可以向其他用户呈现javascript代码。

此代码应将消息添加到正确用户的正确聊天中。缺少两块：

1. 我不知道如何"选择"聊天
2. 我不知道如何将消息添加到此聊天的"消息"数组中

Answer 1

您需要让您的聊天组件侦听新消息的WebSocket事件，然后在收到消息时调用setState。

聊天室的标准方法是使用每个聊天室订阅的"频道"。这样，它只会听到来自它关心的对话的传入消息。

看看Socket.io及其制作聊天应用程序的示例。即使你不使用Socket.io，这个例子也很有说明性。

Answer 2

解决方案，在我的聊天类中：

componentDidMount: function(){
      this.props.privateChannel.bind('message.new', this.receiveMessage);
  },
receiveMessage: function(message) {
    if(message.user.id == this.props.recipient.id){
      this.setState({messages: this.state.messages.concat([message])});
      this.startBlink();
    }
},