React 应用中使用 Socket.IO 时，用户在房间内被重复添加（同名不同 socketId），根本原因常是 React 18 严格模式下 useEffect 的开发期双调用机制导致 socket 连接与 JOIN 事件被触发两次。
react 应用中使用 socket.io 时，用户在房间内被重复添加（同名不同 socketid），根本原因常是 react 18 严格模式下 `useeffect` 的开发期双调用机制导致 socket 连接与 join 事件被触发两次。
在基于 React Hooks + Socket.IO 的实时协作应用（如在线代码编辑器）中，你可能会观察到：服务端 userSocketMap 正常映射，但客户端 clients 数组却出现同一用户名、两个不同 socketId 的条目。例如控制台输出类似：
client [
{ socketId: "abc123", username: "Alice" },
{ socketId: "def456", username: "Alice" }
]这并非服务端逻辑错误（如重复 socket.join() 或误发 JOINED），而是一个典型的客户端副作用管理陷阱。
? 根本原因：React 18 严格模式的开发期防护机制
自 React 18 起，<React.StrictMode> 在开发环境中会故意对 useEffect、useMemo、useState 初始化器等进行双次调用，用于提前暴露不纯副作用（如未清理的定时器、重复订阅、全局状态污染）。虽然这一机制对大多数场景透明，但它会直接影响 Socket.IO 的初始化流程：
- useEffect(() => { init(); }, []) 在开发模式下执行 两次；
- 每次执行都会：
- 创建一个新 socket 实例（initSocket()）；
- 绑定 ACTIONS.JOIN 事件；
- 发送一次 JOIN 请求；
- 导致服务端收到两条 JOIN 指令 → 为同一用户分配两个 socket ID → 客户端接收两次 JOINED 事件 → setclients(clients) 被覆盖为包含重复项的数组。
⚠️ 注意：此行为仅发生在开发环境（npm start），生产构建（npm run build && serve -s build）中不会出现。
✅ 正确解决方案：防抖式连接 + 单例 socket 管理
1. 禁用 StrictMode（临时验证，不推荐长期使用）
在 src/index.js 或 src/main.jsx 中移除 <StrictMode> 包裹，可立即验证是否为该问题：
// ❌ 不推荐长期使用：仅用于快速验证
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);若禁用后重复问题消失，则确认是 StrictMode 所致 —— 但应转向更健壮的修复方式。
2. 推荐方案：Socket 实例单例化 + useEffect 防重入
修改 initSocket 工具函数，确保全局唯一 socket 实例，并在组件内通过闭包或 ref 控制连接时机：
// src/socket.js
import { io } from 'socket.io-client';
let socketInstance = null;
export const initSocket = () => {
if (socketInstance) return socketInstance;
socketInstance = io('http://localhost:3001', {
reconnectionAttempts: 3,
timeout: 10000,
});
return socketInstance;
};
export const disconnectSocket = () => {
if (socketInstance) {
socketInstance.disconnect();
socketInstance = null;
}
};然后在组件中使用 useRef 确保 useEffect 内部只建立一次连接：
useEffect(() => {
// ✅ 使用 ref 防止 StrictMode 双初始化
const isMounted = { current: true };
const init = async () => {
const socket = initSocket();
socketRef.current = socket;
socket.on('connect_error', handleErrors);
socket.on('connect_failed', handleErrors);
// 关键：仅在首次挂载时发送 JOIN
if (isMounted.current) {
socket.emit(ACTIONS.JOIN, {
roomId,
username: location.state?.username,
});
}
socket.on(ACTIONS.JOINED, ({ clients, username, socketId }) => {
if (username !== location.state?.username) {
toast.success(`${username} joined the room`);
} else {
setUsernName(username);
}
setclients(clients); // 安全更新
});
socket.on(ACTIONS.DISCONNECTED, ({ socketId, username }) => {
toast.success(`${username} left the room`);
setclients((prev) => prev.filter((c) => c.socketId !== socketId));
});
};
init();
return () => {
isMounted.current = false;
// 清理监听器（非 disconnect！由 socket 管理层统一处理）
socketRef.current?.off(ACTIONS.JOINED);
socketRef.current?.off(ACTIONS.DISCONNECTED);
// ❌ 不在此处 disconnect —— 避免多组件竞争
};
}, []);? 提示：disconnectSocket() 应在路由跳转或登出时显式调用（如 useEffect 在 App 或 AuthProvider 中监听 auth 状态），而非每个页面组件卸载时调用，否则会导致其他页面 socket 失效。
3. 服务端增强：防御性校验（可选）
尽管客户端已解决，服务端增加轻量校验可提升鲁棒性：
// server.js
socket.on(ACTIONS.JOIN, ({ roomId, username }) => {
// 防止同一用户多次 JOIN 当前房间（开发期容错）
const existingSocketId = Object.keys(userSocketMap).find(
id => userSocketMap[id] === username && io.sockets.adapter.rooms.get(roomId)?.has(id)
);
if (existingSocketId) {
console.warn(`User ${username} already joined ${roomId} via ${existingSocketId}`);
return; // 忽略重复 JOIN
}
userSocketMap[socket.id] = username;
socket.join(roomId);
// ... rest unchanged
});? 总结与最佳实践
- ✅ 永远将 Socket 实例抽象为单例，避免组件内多次 initSocket()；
- ✅ 利用 useRef + isMounted 模式规避 StrictMode 副作用双触发；
- ✅ 不在 useEffect cleanup 中调用 socket.disconnect()，应由应用生命周期统一管理；
- ✅ 开发期遇到“奇怪的重复行为”，优先检查 StrictMode 影响；
- ✅ 生产环境无需担心此问题 —— React 仅在开发模式启用双渲染。
遵循以上模式，即可彻底解决 Socket.IO 用户重复加入问题，同时保持代码可维护性与跨环境一致性。
