通过 websockets 向聊天组件（react.js）添加消息

Posted 2023-02-16

【中文标题】通过 websockets 向聊天组件（react.js）添加消息

【英文标题】：Add message to chat component(react.js) via websockets

【发布时间】：2015-07-31 12:29:13

【问题描述】：

上下文：

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

问题

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

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

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

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

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

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

感谢您的帮助！ :)

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

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

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

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

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

【参考方案1】：

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

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

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

【讨论】：

谢谢！这正是我所做的！ 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();

【参考方案2】：

解决方案，在我的 Chat 课程中：

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