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

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

让我们赶紧开始吧
1.首先，安装microsoft/fetch-event-source插件库。可以通过运行以下命令来安装：

1. npm install @microsoft/fetch-event-source

复制代码

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

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

复制代码

3.创建一个Vue实例，并在该实例的生命周期钩子函数中使用fetchEventSource来监听流式数据：
这里只展示了部分代码片断！！！！仅供伙伴们参考哦

1. new Vue({
2.   created() {
3.     //这里只展示了部分代码片段！！！！仅供伙伴们参考哦
4.     const sseSendStream = (content) => {
5.       if (abortController) {
6.         abortController = null
7.       }
8.       abortController = new AbortController() //会话暂停控制器
9.       let url = 'https://api.coze.cn/v3/chat' //这里使用的是抖音扣子模型
10.       // 模型参数
11.       let params = {
12.         bot_id: '7405395880901427212',
13.         user_id: uuidv4(),
14.         stream: true,
15.         auto_save_history: true,
16.         additional_messages: [
17.           {
18.             role: 'user',
19.             content: content,
20.             content_type: 'text'
21.           }
22.         ]
23.       }
24.       fetchEventSource(url, {
25.         method: 'post',
26.         headers: {
27.           'Content-Type': 'application/json',
28.           Accept: 'text/event-stream',
29.           Authorization: tokens
30.         },
31.         body: JSON.stringify(params),
32.         openWhenHidden: true,
33.         signal: abortController.signal,
34.         async onopen(response) {
35.           //建立连接的回调
36.           console.log('建立连接的回调', response)
37.         },
38.         onmessage(msg) {
39.           //接收一次数据段时回调，因为是流式返回，所以这个回调会被调用多次
40.           if (msg.event == 'conversation.message.delta') {
41.             //进行连接正常的操作
42.             try {
43.               const dataObj = JSON.parse(msg.data)
44.               //实时返回流渲染效果
45.               if (sendIndex.value == 0) {
46.                 sessionList[sessionList.length - 1] = dataObj
47.               } else {
48.                 sessionList[sessionList.length - 1].content += dataObj.content
49.               }
50.               sendIndex.value = 2
51.               //if (dataObj.usage.output_tokens == 1) {
52.               //     dataObj.output.text = ''
53.               //    sessionList.value.push(dataObj)
54.               //}
55.               // setTimeout(() => {
56.               //     simulateGPTResponse(strings) //打字效果、方法请往下看
57.               // }, 1000)
58.             } catch (e) {}
59.           }
60.         },
61.         onclose() {
62.           console.log('停止了')
63.           //在这里可以写一些GPT停止后的一些操作
64.         },
65.         onerror(err) {
66.           //连接出现异常回调
67.           // 取消请求
68.           throw err
69.         }
70.       })
71.     }
72.   },
73.   // 其他Vue配置项
74. }).$mount('#app');

复制代码

 实现打字效果

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

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

复制代码

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

1. function stop() {
2.   abortController.abort()
3. }

复制代码

到这里就结束了哟
渴望这些步骤能资助你在Vue应用中使用microsoft/fetch-event-source插件库接收GPT或其他大模子的流式数据。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。