在DirectLine内嵌WebChat中获取会话ID实现刷新按钮的方法

嘿，我能帮你搞定这个WebChat刷新按钮和会话ID的问题！下面分两部分给你讲清楚怎么获取会话ID，以及如何内嵌WebChat实现刷新功能：

一、获取会话ID的两种常用方式 #

1. 通过DirectLine REST API获取 #

当你调用DirectLine的创建会话接口时，响应里会直接返回conversationId。比如用fetch发送请求：

const getConversationId = async () => {
  const response = await fetch('https://directline.botframework.com/v3/directline/conversations', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer YOUR_DIRECT_LINE_TOKEN',
      'Content-Type': 'application/json'
    }
  });
  const data = await response.json();
  const conversationId = data.conversationId; // 这里就是会话ID
  console.log('会话ID:', conversationId);
  return conversationId;
};

2. 通过WebChat的内置回调/状态获取 #

如果你是直接用WebChat的SDK（不管是React组件还是纯JS内嵌），可以在WebChat初始化时通过回调或者状态监听拿到会话ID：

• 纯JS内嵌场景：利用onDirectLineConnected回调，直接从DirectLine实例中获取
• React场景：订阅connectionStatus$流，当连接成功时（状态码为2），从DirectLine实例中提取conversationId

二、内嵌WebChat实现刷新按钮功能 #

当然可以通过内嵌WebChat实现！下面给你两种常见场景的代码示例：

纯JS内嵌WebChat示例 #

<!-- 页面元素 -->
<div id="webchat-container" role="main"></div>
<button id="refresh-btn" style="margin-bottom: 10px;">刷新会话</button>

<!-- 引入WebChat SDK -->
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script>
  let currentDirectLine;
  let currentConversationId;

  // 初始化WebChat的函数
  const initWebChat = () => {
    // 创建DirectLine实例
    const directLine = window.WebChat.createDirectLine({
      token: 'YOUR_DIRECT_LINE_TOKEN'
    });

    // 监听连接成功事件，获取会话ID
    const connectionSubscription = directLine.connectionStatus$.subscribe(status => {
      if (status === 2) { // 2代表已连接
        currentConversationId = directLine.conversationId;
        console.log('当前会话ID:', currentConversationId);
      }
    });

    // 渲染WebChat
    window.WebChat.renderWebChat(
      { directLine },
      document.getElementById('webchat-container')
    );

    // 保存当前DirectLine实例和订阅
    currentDirectLine = directLine;
    return connectionSubscription;
  };

  // 初始化首次会话
  let currentSubscription = initWebChat();

  // 刷新按钮点击事件
  document.getElementById('refresh-btn').addEventListener('click', async () => {
    // 1. 关闭当前会话和订阅
    if (currentDirectLine) {
      await currentDirectLine.endConversation();
      currentSubscription.unsubscribe();
    }

    // 2. 清空容器并重新初始化WebChat
    document.getElementById('webchat-container').innerHTML = '';
    currentSubscription = initWebChat();
  });
</script>

React组件场景示例 #

import React, { useState, useEffect } from 'react';
import WebChat from 'botframework-webchat';

const ChatWithRefresh = () => {
  const [directLine, setDirectLine] = useState(null);
  const [conversationId, setConversationId] = useState('');

  // 初始化WebChat
  useEffect(() => {
    const dl = window.WebChat.createDirectLine({
      token: 'YOUR_DIRECT_LINE_TOKEN'
    });
    setDirectLine(dl);

    // 监听连接状态，获取会话ID
    const subscription = dl.connectionStatus$.subscribe(status => {
      if (status === 2) {
        setConversationId(dl.conversationId);
      }
    });

    // 组件卸载时清理订阅
    return () => subscription.unsubscribe();
  }, []);

  // 刷新会话函数
  const handleRefresh = async () => {
    if (directLine) {
      // 关闭当前会话
      await directLine.endConversation();
      // 创建新的DirectLine实例并更新状态
      const newDl = window.WebChat.createDirectLine({
        token: 'YOUR_DIRECT_LINE_TOKEN'
      });
      setDirectLine(newDl);

      // 监听新会话的连接状态
      const newSubscription = newDl.connectionStatus$.subscribe(status => {
        if (status === 2) {
          setConversationId(newDl.conversationId);
        }
      });

      return () => newSubscription.unsubscribe();
    }
  };

  return (
    <div style={{ padding: '10px' }}>
      <button 
        onClick={handleRefresh} 
        disabled={!conversationId}
        style={{ marginBottom: '10px' }}
      >
        刷新会话
      </button>
      {directLine && <WebChat directLine={directLine} />}
    </div>
  );
};

export default ChatWithRefresh;

注意事项 #

• 如果你使用的是临时DirectLine token，刷新时可能需要重新获取新的token（避免token过期导致新会话创建失败）
• 调用endConversation可以确保旧会话被正确关闭，避免不必要的资源占用
• 会话ID在整个会话生命周期内是固定的，刷新后会生成新的会话ID

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