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

Question

上下文:

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

问题

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

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

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

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

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

我想我必须找到一种方法来选择 React 组件(聊天实例)并更改其属性“消息”。怎么办？

感谢您的帮助! :)

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

• My ChatList 是一个全局变量，它接受一个聊天数组。
• 每个聊天都采用一组消息和一个表单。

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

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

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

Answer 1

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

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

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