Socket.IO后端向前端传递在线用户数问题求助

你遇到的问题出在两处细节上，直接修正就能实现在线用户数的实时同步：

问题1：后端socket.emit缺少事件名 #

Socket.IO的emit方法必须先指定事件名，再传递数据。你当前的代码只传了用户数字段，前端无法匹配到对应的监听事件。另外代码末尾多了一个多余的闭合大括号，也需要修正。

问题2：前端State变量名拼写错误 #

你定义的State变量是onlineStatus，但渲染和使用时写成了onlineStatue（少了字母s），导致数据无法正确渲染到页面。

修正后的后端代码 #

io.on("connection", (socket) => {
  console.log(`...User connected ${socket.id}`);

  // 用户连接时主动推送当前在线人数
  const countOnlineUser = socket.client.conn.server.clientsCount;
  socket.emit("countOnlineUser", countOnlineUser);

  // 若需要监听前端主动请求在线人数的事件，可保留以下逻辑
  // socket.on("requestOnlineCount", () => {
  //   const count = socket.client.conn.server.clientsCount;
  //   socket.emit("countOnlineUser", count);
  // });
});

修正后的前端代码 #

const [onlineStatus, setOnlineStatus] = useState(0);

useEffect(() => {
  socket.on("countOnlineUser", (countOnlineUser) => {
    setOnlineStatus(countOnlineUser);
  });

  // 可选：主动向后端请求在线人数
  // socket.emit("requestOnlineCount");

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    socket.off("countOnlineUser");
  };
}, [socket]);


return (
  <div>
    <div className="onlineStatusShowing">
      <p>There are {onlineStatus} people online.</p>
    </div>
  </div>
);

补充说明：

• 后端可选择在用户连接时主动推送在线人数，或等待前端发送请求后返回，两种逻辑都标注在代码中供你选择。
• 前端添加了组件卸载时的监听移除逻辑，避免不必要的内存泄漏。

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