Socket通信问题：旧用户无法看到新用户，新用户可查看旧用户

问题现象 #

当新Socket连接后，新用户能够看到旧用户，但旧用户无法看到新用户。

截图说明 #

现有代码 #

后端代码 #

const users = []

socket.on("add-new-user", (data) => {
users.push(data);
socket.emit("users-list", users); });

前端代码 #

const [users, setUsers] = useState([]);

  useEffect(() => {
    socket.on("users-list", (data) => setUsers(data));
    console.log(users);
  }, [socket, users]);

  return (
    <div>
      {users.map((user) => (
        <p key={user.id}>{user.username}</p>
      ))}
    </div>
  );

问题原因及修复方案 #

后端问题 #

原代码中socket.emit("users-list", users)仅向当前新连接的客户端发送更新后的用户列表，在线旧用户不会收到该更新，因此无法看到新用户。

修复方法：改用io.emit向所有已连接客户端广播更新后的用户列表，确保新旧用户同步获取最新数据：

const users = []

socket.on("add-new-user", (data) => {
  users.push(data);
  // 向所有连接的客户端推送更新后的用户列表
  io.emit("users-list", users); 
});

注：确保io是Socket.IO的服务器实例（通常通过const io = require('socket.io')(server)创建）。

前端问题 #

原useEffect依赖数组包含users，会导致每次users状态更新时重复绑定socket监听，易引发冗余渲染或重复监听问题；同时缺少监听清理逻辑，可能造成内存泄漏。

修复后的前端代码：

const [users, setUsers] = useState([]);

useEffect(() => {
  const handleUsersUpdate = (data) => {
    setUsers(data);
    console.log(data); // 直接打印最新数据，避免读取旧state
  };
  
  socket.on("users-list", handleUsersUpdate);

  // 组件卸载时移除监听
  return () => {
    socket.off("users-list", handleUsersUpdate);
  };
}, [socket]); // 仅依赖socket，确保监听只绑定一次

return (
  <div>
    {users.map((user) => (
      <p key={user.id}>{user.username}</p>
    ))}
  </div>
);

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