前端对接AI模子接口 实现ChatGPT流式数据并【实现打字效果】和【终止会话】
https://i-blog.csdnimg.cn/direct/e93e500d40b940938d8ab6fe565d755e.jpeg被动触发中~~~~~疯狂输出
让我们赶紧开始吧
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 = dataObj
} else {
sessionList.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 //根据索引取分割数组中的项
sessionList.value.output.text += char//赋值
timer = setTimeout(() => { //打字速度
simulateGPTResponse(strings)
}, 50)
}
} 4.使用AbortController实现（正在会话中）立即停止会话操作【制止入坑，此操作简朴粗暴】
function stop() {
abortController.abort()
} 到这里就结束了哟
渴望这些步骤能资助你在Vue应用中使用microsoft/fetch-event-source插件库接收GPT或其他大模子的流式数据。
https://i-blog.csdnimg.cn/blog_migrate/6f6bea563ab9f306b05232a0c39c0684.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]