socket.io 客户端显示已连接为 true，但仍然不发送任何事件

Question

我正在使用react 和socket.io 来促进客户端和服务器之间的websocket 通信。以下是我正在使用的代码。

const Main = () => {
  const [socket, setSocket] = useState();
  const [socketConnected, setSocketConnected] = useState(false);

  useEffect(() => {
     const baseUrl = import.meta.env.VITE_BACKEND_URL;
     const s = io(baseUrl, {
       withCredentials: true,
     });
     s.on("connect", () => {
       console.log("socket connected");
       setSocketConnected(s.connected);
     });
     setSocket(s);
     return () => {
       s.disconnect();
     };
   }, []);

  useEffect(() => {
     if (!socket || !socketConnected) return;
      socket.emit("join", {data});
      console.log("emitted join-room event");
      console.log(socket.connected);
      socket.emit("join-room", {
        data
      });
      console.log(socket.connected);
    }

  }, [socket, socketConnected])
}

即使我可以看到

socket.connected

为 true，此事件也不会发送到服务器

如果我尝试在上一页（即渲染

Main

组件的页面之前的页面）建立套接字连接，之后如果我从

Main

组件发送事件，则一切正常。事件被发送到服务器

Answer 1

好的，我正在具体说明什么对我有用。 一旦客户端收到来自服务器的“连接”事件，我就会监听来自服务器的“就绪”事件，服务器在连接成功时发出该事件。代码如下：-

// client code
s.on("connect", () => {
  console.log("socket connected");
  s.on('ready', () => {
    setSocketConnected(s.connected);   
  })
});

// server code
io.on("connection", (socket) => {
  socket.emit("ready");
}