消息重复显示问题：添加限制逻辑后消息完全无法显示

核心问题 #

你用全局变量messagees1加定时器的方式去重，本质是用全局锁拦截了2秒内的所有消息，而非针对单条重复消息去重——第一次触发回调后messagees1被设为1，接下来2秒内的所有合法消息都会被拦截，直接导致消息完全不显示。真正的需求应该是过滤重复的单条消息，而非全局限制消息接收。

正确解决方案：通过消息唯一ID去重 #

给每条消息分配唯一标识（优先由后端返回，后端未提供则前端自行生成），在添加消息时检查该标识是否已存在于消息列表中，仅当不存在时才添加。

修改后的代码示例

socket.on('messageReceived', (data) => {
  let newMessage = null;
  // 生成消息唯一ID（优先用后端返回的字段，无则前端生成）
  const messageId = data.messageId || `${Date.now()}-${Math.random().toString(36).slice(2)}`;

  // 判断消息归属，构造消息对象
  if (data.senderr === userName) {
    newMessage = { 
      senderName: 'you', 
      message: data.messagee, 
      id: messageId 
    };
  } else if (data.sendpartner === userName) {
    newMessage = { 
      senderName: partner, 
      message: data.messagee.trim(), 
      id: messageId 
    };
  }

  if (newMessage) {
    setChatMessages((prevMessages) => {
      // 检查是否为重复消息
      const hasDuplicate = prevMessages.some(msg => msg.id === newMessage.id);
      return hasDuplicate ? prevMessages : [...prevMessages, newMessage];
    });
  }
});

额外建议

• 优先协调后端在返回消息时带上全局唯一的messageId，这样去重逻辑的可靠性更高；
• 排查后端socket服务的messageReceived触发逻辑，确认是否存在重复推送同一条消息的问题，从根源减少重复情况。

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