React中react-use-websocket发送Token后WebSocket连接立即断开问题

常见原因及修复方案 #

1. 认证消息格式不匹配服务端预期 #

FastAPI服务端可能要求特定格式的认证消息（比如JSON结构），如果客户端仅发送纯文本Token，服务端解析失败后会主动关闭连接。

检查WebSocketProvider中发送Token的代码，确保格式与服务端预期一致：

// 错误示例：发送纯文本Token
const sendAuthToken = () => {
  sendMessage(token);
};

// 正确示例：发送服务端需要的JSON格式
const sendAuthToken = () => {
  sendMessage(JSON.stringify({ type: 'auth', token: token }));
};

2. react-use-websocket连接配置不当 #

• 确认shouldReconnect未设为false，避免连接关闭后无法自动重连
• 检查reconnectInterval和reconnectAttempts参数，避免过快重试触发服务端限制
• 如果服务端指定了WebSocket子协议，确保protocols参数配置正确

示例合理配置：

const { sendMessage, lastMessage, readyState } = useWebSocket(WEBSOCKET_URL, {
  shouldReconnect: (closeEvent) => true,
  reconnectInterval: 3000,
  reconnectAttempts: 5,
  // 若服务端有指定子协议，添加对应配置
  // protocols: ['auth-protocol'],
});

3. 发送Token的时机错误 #

react-use-websocket的readyState分为4种状态：CONNECTING(0)、OPEN(1)、CLOSING(2)、CLOSED(3)。如果在连接未完全打开（readyState !== 1）时发送Token，消息会发送失败，服务端因未收到合法认证而关闭连接。

确保仅在连接处于OPEN状态时发送Token：

useEffect(() => {
  if (readyState === 1) {
    sendAuthToken();
  }
}, [readyState, sendAuthToken]);

4. Token本身无效 #

即便服务端“接收”了Token，也可能存在Token过期、签名错误等问题，导致服务端验证失败后关闭连接。建议在服务端添加Token验证结果日志，同时客户端确认发送的是最新有效Token。

5. WebSocket上下文传递异常 #

如果WebSocketProvider未正确传递sendMessage、readyState等核心方法，可能导致子组件误操作触发连接关闭。检查上下文创建与传递逻辑：

// WebSocketContext.js
const WebSocketContext = createContext();

// WebSocketProvider.jsx
export const WebSocketProvider = ({ children }) => {
  const { sendMessage, lastMessage, readyState } = useWebSocket(WEBSOCKET_URL, {
    // 配置项
  });

  const sendAuthToken = useCallback(() => {
    if (readyState === 1) {
      sendMessage(JSON.stringify({ auth: token }));
    }
  }, [sendMessage, readyState, token]);

  useEffect(() => {
    sendAuthToken();
  }, [sendAuthToken]);

  return (
    <WebSocketContext.Provider value={{ sendMessage, lastMessage, readyState }}>
      {children}
    </WebSocketContext.Provider>
  );
};

如需进一步排查，请提供以下代码 #

• WebSocketProvider的完整实现代码
• useWebSocket的全部配置参数
• 服务端处理WebSocket认证的核心逻辑片段

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