SocketIO服务端异常频繁发送事件，请求技术排查帮助

问题描述 #

我在Node.js和React中使用SocketIO实现后端数据实时展示，已成功建立连接并获取数据流，但服务端WebSocket发送的事件数量超出预期。服务端设置了5000ms间隔发送事件，但浏览器控制台显示发送间隔远快于预期，尝试将socket.on改为socket.once也未解决问题。

服务端代码 #

io.on('connection', function(socket) {
  console.log('Emitting')
  setInterval(function() {
    socket.emit('Echo', global.value);
  }, 5000);
});

客户端代码 #

const socket = io.connect('http://localhost:80/', {transports: ['websocket', 'polling', 'flashsocket']});

socket.on('connect', () => {
  console.log('Connected to the websocket server');
});
socket.on('disconnect', () => {
  console.log('Diconnected from the websocket server');
});

function App() {
  const [dataStream, setDataStream] = React.useState([
    { name: 0, x: 0, y: 0 },
    { name: 1, x: 1, y: 1 },
  ]);

  function appendData(dataPoint) {
    var prev = dataStream[dataStream.length - 1]
    if (dataStream.length > 10) {
      dataStream.reverse().pop()
      dataStream.reverse()
    }
    setDataStream(oldArray => [...oldArray, 
      { name: prev['name'] + 1, x: prev['x'] + 1, y: dataPoint} ]);
  }
    
  
  socket.once('Echo', (message) => {
    console.log("echo")
    appendData(message)
  });
}

问题原因分析 #

1. 服务端定时器堆积：每次新客户端连接，服务端都会创建一个新的setInterval定时器。如果客户端多次连接（页面刷新、自动重连），会积累多个定时器，每个都按5秒间隔发事件，导致客户端收到的事件频率翻倍。
2. 客户端监听重复绑定：socket.once只会监听一次事件，但App组件每次因setDataStream触发重渲染时，都会重新执行socket.once('Echo', ...)，新增一个一次性监听。多个监听同时触发，造成“事件频发”的错觉。
3. 直接修改state数组：appendData中直接对dataStream（state数组）执行reverse().pop()，属于修改原state的操作，会导致React状态管理混乱，触发不必要的组件重渲染，进一步加剧监听重复绑定问题。

解决方案 #

1. 服务端：清理定时器，避免重复创建 #

客户端断开连接时必须清除对应定时器，防止定时器堆积：

io.on('connection', function(socket) {
  console.log('Client connected');
  // 保存定时器引用
  const intervalId = setInterval(function() {
    socket.emit('Echo', global.value);
  }, 5000);

  // 客户端断开时清除定时器
  socket.on('disconnect', () => {
    clearInterval(intervalId);
    console.log('Client disconnected');
  });
});

2. 客户端：用useEffect管理Socket监听，避免重复绑定 #

React组件中，Socket监听必须放在useEffect中，设置正确依赖项确保只绑定一次，组件卸载时清除监听：

function App() {
  const [dataStream, setDataStream] = React.useState([
    { name: 0, x: 0, y: 0 },
    { name: 1, x: 1, y: 1 },
  ]);

  React.useEffect(() => {
    // 定义监听回调
    function handleEcho(message) {
      console.log("echo");
      appendData(message);
    }

    // 绑定监听
    socket.on('Echo', handleEcho);

    // 组件卸载时移除监听
    return () => {
      socket.off('Echo', handleEcho);
    };
  }, []); // 空依赖数组，确保只执行一次

  function appendData(dataPoint) {
    setDataStream(oldArray => {
      let newArray = [...oldArray];
      // 处理数组长度，不修改原数组
      if (newArray.length > 10) {
        newArray.shift(); // 直接移除第一个元素，比reverse操作更高效
      }
      const prev = newArray[newArray.length - 1];
      return [...newArray, { 
        name: prev.name + 1, 
        x: prev.x + 1, 
        y: dataPoint 
      }];
    });
  }

  // ... 组件其他渲染逻辑
}

关键优化点说明 #

• useEffect管理监听生命周期：通过cleanup函数在组件卸载时移除Socket监听，避免内存泄漏和重复绑定。
• 遵循React不可变状态原则：在appendData中通过oldArray参数获取最新状态，创建新数组进行操作，不直接修改原state。
• 优化数组操作：用shift()替代reverse().pop().reverse()，代码更简洁高效。

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