Socket.io聊天室存入数据库的历史消息加入房间时重复渲染问题排查

问题根因及修复方案 #

1. 服务端消息发送范围错误 #

当前服务端给房间全量用户推送历史消息的逻辑不合理：你使用io.to(room).emit('room_data', chats)会给房间内所有在线用户都推送历史消息，不仅新加入的用户会收到，已经在房间内的老用户也会收到全量历史，导致重复渲染。
同时你这里存在冗余数据库查询：前面已经用await Room.findOne查询过一次房间存在，不需要再重复查询数据库，直接用已经查到的roomInDB关联查询聊天记录即可，可以减少数据库请求。
修复方法：将推送对象改为仅当前加入房间的socket即可：

// 省略前面逻辑
} else {
    roomInDB.populate('chats').exec((err, chats) => {
        // 只给当前刚加入的用户发历史，不要发给全房间
        socket.emit('room_data', chats);
    })
}

2. 客户端渲染前未清空消息容器 #

displayMessage方法使用的是appendChild追加消息节点，如果之前消息容器内已有残留内容，新加载的历史消息会直接追加在原有内容后面，出现重复。
修复方法：在遍历历史消息调用displayMessage之前，先清空消息容器：

// 收到room_data事件后先清空容器，再渲染
document.getElementById("messages").innerHTML = '';
chats.forEach(chat => {
  // 此处为你原有的渲染逻辑
  displayMessage(chat, senderClass)
})

3. 客户端Socket事件重复注册 #

如果客户端每次进入房间页面时，都会重新注册一次room_data事件监听，没有移除旧的监听，就会导致一次room_data事件触发多次回调，同一条消息被多次渲染。
修复方法：

• 方案1：只在应用初始化时注册一次room_data监听，不要重复绑定
• 方案2：离开房间/销毁页面时，手动移除事件监听：

// 监听写法参考，离开页面时调用off移除
const handleRoomData = (chats) => { /* 你的渲染逻辑 */ }
socket.on('room_data', handleRoomData)
// 页面卸载/退出房间时执行
socket.off('room_data', handleRoomData)

4. 避免重复触发加入房间事件 #

检查客户端逻辑，是否存在重复触发join-room事件的情况（比如加入按钮重复点击、路由切换重复触发），可以加状态锁防止重复请求。

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