通过Directline通道连接Bot Service始终处于连接中状态的问题

问题诊断与解决方案 #

1. 修复useMemo的误用 #

你的代码中使用useMemo处理异步创建DirectLine对象的逻辑是错误的：useMemo的异步回调会返回Promise，而非实际的DirectLine对象，导致directLine状态存储的是无效的Promise实例。应改用useEffect处理token变化时的副作用逻辑：

// 替换原有的useMemo代码
useEffect(() => {
  if (token) {
    const newDirectLine = createDirectLine({ token });
    setDirectLine(newDirectLine);

    // 可选：监听连接状态用于调试
    const statusSubscription = newDirectLine.connectionStatus$.subscribe(status => {
      console.log('当前连接状态:', status);
      // 状态枚举：0=Connecting, 1=Online, 2=Offline, 3=Expired
    });

    return () => statusSubscription.unsubscribe();
  }
}, [token]);

2. 验证Token有效性 #

• 确认后端返回的是DirectLine Token，而非Azure Bot Service的DirectLine密钥（密钥仅用于生成Token，不能直接传入createDirectLine）。
• 可在浏览器控制台验证Token有效性：

  fetch('https://directline.botframework.com/v3/directline/tokens/validate', {
    headers: { 'Authorization': `Bearer ${yourToken}` }
  }).then(res => res.json()).then(console.log);
  

  返回{"valid": true}则说明Token有效。

3. 条件渲染ReactWebChat组件 #

确保仅在directLine有效时渲染组件，避免传入undefined导致连接异常：

{directLine && (
  <ReactWebChat
    directLine={directLine}
    role="main"
    className={"webchatMain"}
    styleOptions={styleOptions}
  />
)}

4. 排查网络与跨域问题 #

• 打开浏览器开发者工具的Network标签，检查是否有wss://directline.botframework.com/v3/directline/conversations/...的WebSocket请求：
  • 若请求返回401，说明Token无效或过期；
  • 若无WebSocket请求，说明DirectLine对象未正确创建。
• 确认前端域名与DirectLine服务之间的跨域限制已通过后端CORS配置或前端代理解决。

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