前端对接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或其他大模型的流式数据。