React.js使用Socket.io时客户端为何重复接收服务端响应？

客户端重复触发响应回调的核心原因是 testResponse事件监听器被重复注册。
从给出的服务端代码逻辑和现象可以确认：服务端仅收到一次test事件、仅触发一次房间广播，不存在重复发送响应的问题。问题完全出在客户端侧：你将client.on("testResponse", 回调)的注册逻辑写在了会被重复执行的代码段中（常见场景包括React/Vue组件重复渲染、副作用函数未配置清理逻辑、路由重复挂载组件、监听器注册逻辑放在点击事件等可多次触发的流程里），每执行一次注册逻辑就会给该事件多绑定一个回调函数，服务端单次推送的响应会依次触发所有已绑定的回调，最终表现为多次接收到对应事件。

根据自身业务场景选择对应方案即可：

• 注册监听器时配套解绑逻辑：如果是在组件生命周期、副作用函数中注册监听，要在逻辑销毁前主动移除已绑定的回调，避免监听器残留。React场景参考代码：

useEffect(() => {
  const handleTestResponse = () => {
    console.log("test response app");
  };
  client.on("testResponse", handleTestResponse);
  // 副作用重跑、组件卸载前清理已注册的监听器
  return () => client.off("testResponse", handleTestResponse);
}, [client]);

• 仅需要单次响应时使用once注册：如果这个监听逻辑只需要触发一次，直接使用Socket.io内置的once方法绑定事件，回调执行一次后会自动销毁，不会出现重复触发的问题：

client.once("testResponse", () => {
  console.log("test response app");
});

• 全局常驻监听器移到单次初始化逻辑中：如果是需要全局生效的常驻监听，不要写在业务交互、组件渲染这类会重复执行的逻辑块里，放到WebSocket客户端初始化完成后的逻辑段中，保证整个应用生命周期内只注册一次监听器。

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