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

Question

上下文：

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

问题

我有一个呈现聊天的 ChatList 组件。聊天由其消息和形式组成。提交此表单后，将向服务器发出 AJAX 调用以 POST 消息并将消息添加到当前聊天。

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

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

这就是我卡住的地方。如何将消息添加到正确的聊天中？我如何 select 我的 React.js 组件并更改它的 'props'？当我不使用 React 时，我曾经将这段代码广播给其他用户：

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

我想我必须想办法 select React 组件（聊天实例）并更改它的属性 "messages"。怎么样？

感谢您的帮助！ :)

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

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

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

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

我不知道如何 "select" 聊天。
我不知道如何将消息添加到此聊天的 "messages" 数组。

Answer 1

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

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

查看 Socket.io 及其制作聊天应用程序的示例。即使您不使用 Socket.io，该示例也是说明性的。

Answer 2

解决方法，在我的聊天中class：

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();
    }
},

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

Add message to chat component(react.js) via websockets

chat

ruby-on-rails

websocket

reactjs