使用Socket.io开发简易聊天系统时遭遇消息重复问题求助

嘿，我之前搭建Socket.io聊天系统时也踩过消息重复的坑，咱们从最常见的几个原因入手排查解决：

1. 客户端重复绑定消息监听事件 #

这是最常见的问题！如果你的client.js里把socket.on('chat message')的监听逻辑放在了myScript()函数里（或者每次提交表单时都会重新绑定），那每提交一次消息，就会多一个监听回调，后续收到消息时就会触发多次，导致消息重复显示。

正确的客户端写法： #

把监听事件放在页面初始化时只执行一次，不要放在提交函数里：

// client.js
// 页面加载完成后就建立连接，只执行一次
const socket = io();
const messagesList = document.getElementById('messages');
const sendForm = document.getElementById('form');
const messageInput = document.getElementById('m');

// 只绑定一次消息接收的监听，避免重复触发
socket.on('chat message', (msg) => {
  const messageItem = document.createElement('div');
  messageItem.textContent = msg;
  messagesList.appendChild(messageItem);
  // 自动滚动到最新消息
  window.scrollTo(0, document.body.scrollHeight);
});

// 表单提交的处理函数，只负责发送消息
function myScript() {
  const inputValue = messageInput.value.trim();
  if (!inputValue) return;
  
  socket.emit('chat message', inputValue);
  messageInput.value = '';
}

2. 服务器端重复发送消息 #

如果服务器端在收到消息后，同时执行了多次发送逻辑（比如既用io.emit发给所有人，又用socket.emit单独发给发送者），也会导致客户端收到重复消息。

正确的服务器写法： #

只需要一次发送逻辑即可，比如：

// 服务器端代码（Node.js）
const io = require('socket.io')(http); // 假设http是你的HTTP服务器实例

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    // 方案1：发给所有连接的客户端（包括发送者自己）
    io.emit('chat message', msg);
    
    // 方案2：如果想让发送者的消息自己本地显示，服务器只发给其他人
    // socket.broadcast.emit('chat message', msg);
  });
});

如果选方案2，客户端可以在发送消息时直接把自己的消息添加到列表里，避免等待服务器转发：

function myScript() {
  const inputValue = messageInput.value.trim();
  if (!inputValue) return;
  
  // 先把自己的消息添加到本地列表
  const myMessage = document.createElement('div');
  myMessage.textContent = `我: ${inputValue}`;
  messagesList.appendChild(myMessage);
  window.scrollTo(0, document.body.scrollHeight);
  
  // 再发给服务器，转发给其他用户
  socket.emit('chat message', `其他人: ${inputValue}`);
  messageInput.value = '';
}

3. 额外检查：表单提交的事件绑定 #

确认你的表单onsubmit只绑定了一次myScript()，没有重复绑定的情况（比如不小心在JS里又加了sendForm.addEventListener('submit', ...)），否则会触发多次发送逻辑。

先按上面的步骤排查，大概率能解决消息重复的问题～

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