ReactJS集成PubNub聊天应用：消息重复发送问题排查

看起来你遇到的这个「消息发送次数逐次翻倍」的问题，我之前做类似项目时也碰到过，大概率是发送逻辑被重复执行或者PubNub实例/操作重复注册导致的，咱们一步步来排查解决：

核心问题分析 #

你描述的「第一条发1次、第二条发2次」这种规律，基本可以确定是每次触发发送时，实际执行了多次publish操作，而非显示层面的重复。和unsubscribe关系不大（unsubscribe主要解决重复接收消息的问题），不过组件卸载时的清理还是要做，先聚焦发送逻辑：

具体排查&修复步骤 #

1. 检查sendMessage方法，确保publish只执行一次 #

先确认你的sendMessage里有没有不小心多次调用this.pubnub.publish()，或者存在循环触发的逻辑。正确的发送逻辑应该是单次调用publish，比如：

sendMessage() {
  // 先获取要发送的消息内容
  const messageContent = this.state.messageText;
  if (!messageContent.trim()) return; // 空消息不发送

  // 确保这里只调用一次publish
  this.pubnub.publish({
    channel: "your-chat-channel", // 替换成你的频道名
    message: { text: messageContent }
  }, (status, response) => {
    if (status.error) {
      console.error("发送失败：", status);
    } else {
      console.log("消息已发送：", response);
      // 发送成功后清空输入框
      this.setState({ messageText: "" });
    }
  });
}

2. 确保PubNub实例是全局单例 #

你现在在constructor里初始化pubnub实例是正确的，绝对不要在render或者sendMessage里重复创建new PubNub(...)——如果每次发送都生成新的PubNub实例，就可能导致多次发送请求。

3. 避免重复绑定事件 #

如果你的发送按钮是这样写的：

<button onClick={() => this.sendMessage()}>发送</button>

建议改成直接绑定已处理好的方法：

<button onClick={this.sendMessage}>发送</button>

因为前者每次组件渲染都会创建新的匿名函数，虽然不会直接导致重复发送，但可能引发其他意外的重复执行问题（你已经在constructor里bind了方法，所以直接用this.sendMessage就好）。

4. 组件卸载时的清理（可选但推荐） #

虽然这不是你当前发送重复的原因，但为了避免后续出现重复接收消息的问题，一定要在组件卸载时执行unsubscribe和清理监听：

componentWillUnmount() {
  // 取消订阅频道
  this.pubnub.unsubscribe({
    channels: ["your-chat-channel"]
  });
  // 移除所有监听事件
  this.pubnub.removeAllListeners();
}

5. 排查是否存在多个组件实例 #

检查你的App组件是不是被重复渲染了（比如路由配置里重复定义、父组件多次渲染App），如果有多个App实例，每个实例的pubnub都会发送一次消息，自然会出现重复。

总结 #

你当前的问题核心是发送逻辑被重复执行，先从sendMessage内部的publish调用次数、PubNub实例唯一性入手排查。unsubscribe主要解决接收重复的问题，但做好组件卸载清理是React + PubNub开发的最佳实践。

内容的提问来源于stack exchange，提问作者IrfanAnwar