React集成Socket.IO发送消息后消息数量持续翻倍问题咨询

问题根源 #

1. Socket事件监听器未清理，导致回调累积：useEffect每次执行（组件重新渲染、socket引用变化时）都会新增一个message事件的监听器，但从未移除旧的监听器。随着组件渲染次数增加，监听器数量持续累积，每次收到消息时所有累积的回调都会触发，因此消息打印次数逐次翻倍（2、4、6...）。
2. 首次发送时发送者收到消息，本质也是监听器重复绑定导致的重复打印，并非服务器错误发送。

解决方案 #

客户端：添加监听器清理逻辑 #

修改useEffect，在清理函数中移除对应的事件监听器，确保同一时刻只有一个回调在监听message事件：

useEffect(() => {
    // 单独定义回调函数，方便后续移除
    const handleMessage = (message) => {
        console.log(message);
    };

    socket.on('message', handleMessage);

    // 组件卸载或依赖更新时，移除监听器
    return () => {
        socket.off('message', handleMessage);
    };
}, [socket]);

可选优化：发送者本地同步消息 #

如果希望发送者立即看到自己发送的消息，无需等待服务器广播，可在发送时直接更新本地状态：

const sendMessage = () => {
    const newMsg = { message: inputValue, id: userId };
    // 发送消息到服务器
    socket.emit('chatMessage', newMsg);
    // 直接添加到本地消息列表
    setMessages(prev => [...prev, newMsg]);
};

服务器端：无需修改 #

你的服务器代码使用socket.broadcast.emit是正确的，它只会将消息推送给除发送者外的其他客户端，不会给发送者本身发消息。

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