使用Socket.io与React构建在线用户列表的状态异常问题

核心问题 #

你刷新浏览器后自己的用户列表为空，根本原因是后端只给房间里的其他用户推送了在线用户列表，当前连接的用户（也就是你刷新的这个浏览器）没收到这个事件。看后端代码里的socket.in("public_chat").emit("online_users", onlineUsers)，socket.in()的作用是给房间内除当前socket以外的所有用户发消息，所以你自己的浏览器收不到更新。

具体修改步骤 #

1. 修复后端推送逻辑

把后端里的推送代码改成给整个房间的所有用户发（包括当前连接的用户）：

// 替换原来的 socket.in("public_chat").emit(...)
io.to("public_chat").emit("online_users", onlineUsers);

或者如果需要区分当前用户和其他用户，也可以单独给当前socket发一次：

// 先给自己发
socket.emit("online_users", onlineUsers);
// 再给其他用户发
socket.in("public_chat").emit("online_users", onlineUsers);

2. 修复前端useEffect的问题

你的第二个useEffect没有加依赖数组，会导致组件每次渲染都重复绑定socket.on("online_users")事件，不仅浪费资源还可能引发奇怪的问题。另外console.log(users)因为React setState是异步的，打印的会是旧值，直接打印参数里的onlineUsers才是最新的：

useEffect(() => {
  const handleOnlineUsers = (onlineUsers) => {
    setUsers(onlineUsers);
    console.log(onlineUsers); // 这里打印参数里的值才对
  };

  socket.on("online_users", handleOnlineUsers);

  // 组件卸载时移除监听，防止内存泄漏
  return () => {
    socket.off("online_users", handleOnlineUsers);
  };
}, [socket]); // 加依赖数组，只在socket变化时绑定一次

关于Redux的疑问 #

完全不需要用Redux这类全局状态工具。当前问题和状态管理无关，只是socket事件推送的逻辑问题。除非你后续有多个组件需要共享这个在线用户列表，那时候再考虑全局状态也不迟，现在组件内部用useState管理完全足够。

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