React中Socket.io客户端connected为true但无法发送事件的问题

我在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，但join和join-room事件并没有发送到服务器。不过如果在Main组件渲染前的页面就建立Socket连接，再到Main组件里发送事件就能正常送达服务器。

解决办法 #

1. 直接在connect回调内发送事件 #

React状态更新是异步的，你当前依赖socketConnected状态触发事件的逻辑，可能存在状态更新延迟导致的时序问题。直接在Socket实例的connect回调里发送事件，能保证事件在连接建立的第一时间被触发：

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);
    // 连接成功后立即发送事件
    s.emit("join", {data});
    s.emit("join-room", {data});
    console.log("已发送join和join-room事件");
  });
  setSocket(s);
  return () => {
    s.disconnect();
  };
}, []);

2. 全局复用Socket实例（推荐） #

如果在前一个页面建立连接能正常工作，说明服务器配置没问题，问题出在Main组件内的连接初始化时序。可以把Socket实例放到全局Context中，避免每个组件重复创建连接：

// 全局Socket Context
const SocketContext = createContext(null);

export const SocketProvider = ({children}) => {
  const [socket, setSocket] = useState(null);
  const [isConnected, setIsConnected] = useState(false);

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

  return (
    <SocketContext.Provider value={{socket, isConnected}}>
      {children}
    </SocketContext.Provider>
  );
};

// Main组件中使用全局Socket
const Main = () => {
  const {socket, isConnected} = useContext(SocketContext);

  useEffect(() => {
    if (!socket || !isConnected) return;
    socket.emit("join", {data});
    socket.emit("join-room", {data});
  }, [socket, isConnected]);

  // ...其他组件逻辑
};

3. 检查事件名称与服务器的一致性 #

确认前端发送的join、join-room事件名称，和服务器端监听的事件名称完全一致（大小写、拼写都不能错），这是容易忽略的细节。

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