如何使用 ReactJS 在客户端正确启动 socket.io 连接？

Question

嗨，我正在制作纸牌游戏，我已经能够将我的客户端连接到我的 socket.io 服务器，但问题是我的客户端在连接到服务器时发送了很多请求。
我在客户端使用 ReactJS，在服务器端使用 ExpressJS + socket.io。
在客户端：

const Room = () => {
  const dispatch = useAppDispatch();
  const params = useParams() as any;
  const user = useAppSelector(selectUser);
  const room = useAppSelector(selectRoom);
  const [socket] = useState<Socket<DefaultEventsMap, DefaultEventsMap>>(io('http://localhost:3000'));

  useEffect(() => {
    if (params.id) {
      dispatch(getRoom(params.id));
    }
    return () => { socket.disconnect(); };
  }, []);

  useEffect(() => {
    if (user.name && room.id) {
      socket.emit(JOIN_ROOM, {
        user: {
          name: user.name,
          money: user.money,
        },
        roomId: room.id,
        random_seat: room.random_seat,
        max_number_of_player: room.max_number_of_player,
      });
    }
    return () => {
      socket.emit(LEAVE_ROOM, {
        username: user.name,
        roomId: room.id,
      });
    };
  }, [user.name, room.id]);

而在服务器端：

const onConnection = (socket) => {
  roomHandler(io, socket, store);
  chatHandler(io, socket);
  socket.on('disconnect', function() {
    console.log("User has disconnected: " + socket.id)
  });
}

当我重新加载页面时，我看到这个日志：

User has disconnected: mxh8AqLWSvpB9IqtAAAs
User has disconnected: KefLTWmzHwt4yxi7AAAt
User has disconnected: cNyOJtqX4gLRlkSFAAAv
User has disconnected: hWjpCSx6-fypEcp1AAAu
User has disconnected: D407Grg1YgpLz6V-AAA2
User has disconnected: KN5gWEZSkI4tvqZ2AAA1
User has disconnected: 6QY_pzmugv7hQuZiAAA0
User has disconnected: nunKDWVRiishLsCbAAA3

因此，当我重新加载时，只有一个用户断开连接，但随之而来的是多个套接字连接。
我通过使用 useState 启动连接并将客户端套接字实例存储为状态，该状态作为道具传递，以便子组件可以使用它和 emits/listens 事件。
如果我在浏览器中打开我的网络选项卡，我还可以看到向我的服务器端发出的大量请求。
我在这里做错了什么？

Answer 1

每次此组件呈现时，它都会调用 io('url') 并创建一个新连接。相反，在 useEffect 中创建一次连接并保留一个引用。

const socket = useRef();

useEffect(() => {
  socket.current = io('url');
  return () => {
    socker.current.disconnect()
  };
}, []);

如何使用 ReactJS 在客户端正确启动 socket.io 连接？

How to correctly inititate socket.io connection on the client side with ReactJS?

javascript

websocket

node.js

socket.io

reactjs