前端对接AI模型接口 实现ChatGPT流式数据并【实现打字效果】和【终止会话】

被动触发中~~~~~疯狂输出

让我们赶紧开始吧

1.首先，安装microsoft/fetch-event-source插件库。可以通过运行以下命令来安装：

npm install @microsoft/fetch-event-source

2.在Vue应用的入口文件（通常是main.js）中导入该插件库：

import { fetchEventSource } from '@microsoft/fetch-event-source'

3.创建一个Vue实例，并在该实例的生命周期钩子函数中使用fetchEventSource来监听流式数据：

这里只展示了部分代码片段！！！！仅供伙伴们参考哦

new Vue({
  created() {
    //这里只展示了部分代码片段！！！！仅供伙伴们参考哦
    const sseSendStream = (content) => {
      if (abortController) {
        abortController = null
      }
      abortController = new AbortController() //会话暂停控制器
      let url = 'https://api.coze.cn/v3/chat' //这里使用的是抖音扣子模型
      // 模型参数
      let params = {
        bot_id: '7405395880901427212',
        user_id: uuidv4(),
        stream: true,
        auto_save_history: true,
        additional_messages: [
          {
            role: 'user',
            content: content,
            content_type: 'text'
          }
        ]
      }
      fetchEventSource(url, {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'text/event-stream',
          Authorization: tokens
        },
        body: JSON.stringify(params),
        openWhenHidden: true,
        signal: abortController.signal,
        async onopen(response) {
          //建立连接的回调
          console.log('建立连接的回调', response)
        },
        onmessage(msg) {
          //接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
          if (msg.event == 'conversation.message.delta') {
            //进行连接正常的操作
            try {
              const dataObj = JSON.parse(msg.data)
              //实时返回流渲染效果
              if (sendIndex.value == 0) {
                sessionList[sessionList.length - 1] = dataObj
              } else {
                sessionList[sessionList.length - 1].content += dataObj.content
              }
              sendIndex.value = 2
              //if (dataObj.usage.output_tokens == 1) {
              //     dataObj.output.text = ''
              //    sessionList.value.push(dataObj)
              //}
              // setTimeout(() => {
              //     simulateGPTResponse(strings) //打字效果、方法请往下看
              // }, 1000)
            } catch (e) {}
          }
        },
        onclose() {
          console.log('停止了')
          //在这里可以写一些GPT停止后的一些操作
        },
        onerror(err) {
          //连接出现异常回调
          // 取消请求
          throw err
        }
      })
    }
  },
  // 其他Vue配置项
}).$mount('#app');

实现打字效果

各大模型返回的流式数据格式不一样，以下是根据通义千问大模型返回数据来实现打字效果

function simulateGPTResponse(strings) {
  if (timer) {
    clearTimeout(timer)
  }
    //sendIndex 当前打印字符所在长度
    //strings 模型返回参数；字符串并分割成数组
    // 如："你好啊"分割成["你","好","啊"]
  if (sendIndex.value < strings.length) {
    const char = strings[sendIndex.value++] //根据索引取分割数组中的项
    sessionList.value[sessionList.value.length - 1].output.text += char  //赋值
    timer = setTimeout(() => {    //打字速度
      simulateGPTResponse(strings)
    }, 50)
  }
}

4.利用AbortController实现（正在会话中）立即停止会话操作【避免入坑，此操作简单粗暴】

function stop() {
  abortController.abort()
}

到这里就结束了哟

希望这些步骤能帮助你在Vue应用中使用microsoft/fetch-event-source插件库接收GPT或其他大模型的流式数据。