如何基于react-use-websocket延迟WebSocket初始连接至Token就绪？

核心思路是延迟WebSocket的初始连接，直到Redux中的Token存在后再触发，同时确保Token更新时URL能同步刷新。具体修改如下：

1. 修正URL生成函数的依赖 #

原代码中getSocketURL的依赖数组为空，导致accessToken更新时URL不会重新生成。需要将accessToken加入依赖数组，保证Token变化时URL能同步更新：

const accessToken = useSelector(state => state.auth.access.token);

const getSocketURL = useCallback(() => {
    if (!accessToken) return null; // Token不存在时返回null，不触发连接
    const url = new URL(`ws://${window.location.hostname}:8001/ws/commands`);
    url.searchParams.append('token', accessToken);
    console.log('URL', `${url}`);
    return `${url}`;
}, [accessToken]); // 加入accessToken作为依赖

2. 让useWebSocket仅在URL有效时连接 #

react-use-websocket会在第一个参数（URL）从null变为有效地址时自动触发连接。修改useWebSocket的调用，利用这一特性实现延迟初始化：

const { readyState, getWebSocket } = useWebSocket(getSocketURL(), {
    share: true,
    retryOnError: true,
    shouldReconnect: (e) => true,
    reconnectInterval: 4,
    reconnectAttempts: 2,
    onError: (e) => console.error('Error in websocket', e)
});

额外说明 #

• 当Token首次获取到或后续刷新时，getSocketURL会返回新的带Token的URL，useWebSocket会自动断开旧连接（如果存在）并建立新的认证连接。
• 如果需要更精细的控制（比如手动触发连接），可以结合useEffect监听accessToken的变化，调用getWebSocket()手动初始化，但上述方案已经能满足大部分场景需求。

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