Ai对话框sse

    // 创建一个全局的AbortController实例，用于控制本次SSE请求

let controller = null;

// 一个标志，记录是否是用户主动中止

let isUserAbort = ref(false);

// 发起SSE聊天请求的函数

const startSSEChat = async (userInput) => {

  // 每次发起新请求前，先取消可能存在的旧请求

  if (controller) {

    controller.abort();

  }

  // 创建新的控制器

  controller = new AbortController();

  const signal = controller.signal;

  // 重置状态

  isUserAbort.value = false;

  currentAiReply.value = true;

  changeButton();

  try {

    const response = await fetch('/api/chat-stream', {

      method: 'POST',

      headers: { 'Content-Type': 'application/json' },

      body: JSON.stringify({ query: userInput }),

      signal: signal // 关键！传入中止信号

    });

    // 处理流式响应...

    const reader = response.body.getReader();

    const decoder = new TextDecoder();

    while (true) {

      const { done, value } = await reader.read();

      if (done) break;

      const chunk = decoder.decode(value);

      //  根据后端返回的标签信息，显示不同的内容

      if (isUserAbort.value) {

        reader.cancel(); // 取消读取器

        break;

      }

    }

  } catch (error) {

    if (error.name === 'AbortError') {

      console.log('请求已被用户中止');

    } else {

      console.error('请求出错:', error);

    }

  } finally {

    currentAiReply.value = false;

    changeButton();

  }

};

 

// 用户点击“停止”按钮时触发的函数

const handleStop = () => {

  isUserAbort.value = true;

  if (controller) {

    controller.abort(); // 关键！执行中止操作

  }

  // 紧接着，调用上报“终止状态”的后端接口

  reportStopToBackend();

};