Socket.io客户端接收服务端单次Emit事件时重复执行处理逻辑的问题分析与解决

这种重复触发事件处理逻辑的问题，我之前做Socket.io项目时也碰到过，核心原因几乎都是事件监听器被多次注册，咱们一步步拆解来看：

为什么会重复执行？ #

你客户端的socket.on("receive-message", ...)如果是写在React函数组件的顶层（或者没有正确控制执行时机），每次组件重新渲染（比如调用setMessages更新状态时，组件会重新渲染），就会再次调用socket.on，给同一个事件绑定一个新的处理函数。

举个例子：第一次渲染绑定1个监听器，第二次渲染又绑定1个，累计2个……当服务端emit一次事件时，所有绑定的处理函数都会执行一遍，次数越积越多，就出现了console.log输出近100次的情况。

怎么解决？ #

1. 用useEffect控制监听器只注册一次 #

在React中，把事件监听器的注册逻辑放到useEffect里，并且加上正确的依赖数组，确保只在组件挂载时注册一次，同时在组件卸载时移除监听器（避免内存泄漏）。

示例代码：

import { useEffect } from 'react';

// 假设socket是已经创建好的全局实例，或者用useRef保存的稳定实例
useEffect(() => {
  // 定义处理函数（抽出来方便后续移除）
  const handleReceiveMessages = (receivedMessages) => {
    console.log("received messages");
    setMessages(receivedMessages);
  };

  // 注册监听器
  socket.on("receive-message", handleReceiveMessages);

  // 清理函数：组件卸载/依赖更新时移除监听器
  return () => {
    socket.off("receive-message", handleReceiveMessages);
  };
}, [socket]); // 依赖socket实例，确保它稳定时才执行

2. 确保Socket实例唯一 #

如果你的socket实例是在组件内部创建的，一定要用useRef保存，避免每次渲染都创建新的socket连接（新连接也会重新绑定监听器）：

import { useEffect, useRef } from 'react';
import io from 'socket.io-client';

const ChatComponent = () => {
  const socketRef = useRef(null);
  const [messages, setMessages] = useState([]);
  const [nextID, setNextID] = useState(1);
  const [name, setName] = useState("Your Name");

  useEffect(() => {
    // 只创建一次socket连接
    socketRef.current = io("http://your-server-url");

    const handleReceiveMessages = (receivedMessages) => {
      console.log("received messages");
      setMessages(receivedMessages);
    };

    socketRef.current.on("receive-message", handleReceiveMessages);

    // 组件卸载时断开连接并清理监听器
    return () => {
      socketRef.current.off("receive-message", handleReceiveMessages);
      socketRef.current.disconnect();
    };
  }, []); // 空依赖数组，只执行一次

  // 你的addMessage逻辑
  const addMessage = (text) => {
    var newMessage = { id: nextID, from: name, message: text };
    socketRef.current.emit("send-message", newMessage);
    setNextID(nextID + 1);
    setMessages([...messages, newMessage]);
  };

  return <div>{/* 组件内容 */}</div>;
};

3. 排查其他事件绑定 #

检查你客户端其他的socket.on逻辑，比如连接事件（socket.on("connect", ...)），是否也存在重复绑定的情况，按照同样的方式处理即可。

4. 验证服务端是否单次emit #

虽然根据你的描述服务端应该是单次emit，但可以在服务端的broadcast.emit前加个日志确认：

socket.on("send-message", (message) => {
  messages = [...messages, message];
  console.log("准备广播消息集合，当前集合长度：", messages.length);
  socket.broadcast.emit("receive-message", messages);
});

如果日志只输出一次，那就确认问题完全在客户端的监听器重复注册上。

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