vue2使用event-source-polyfill建立流式传输对接ChatGPT
【代码】vue2使用event-source-polyfill建立流式传输对接ChatGPT。
·
- 安装依赖
cnpm install event-source-polyfill --save
- 组件中使用
import { EventSourcePolyfill } from "event-source-polyfill";
export default{
data(){
sse:"",
},
methods:{
// 建立长连接发送提问
chatqaAdd() {
var text = "";//接收返回的内容
var url="/createSse";//建立长连接的接口
const eventSource = new EventSourcePolyfill(url, {
headers: {
'Authorization': "token,根据需要传"
}
});
eventSource.onopen = (event) => {
console.log("开始输出后端返回值");
this.sse = event.target;
};
eventSource.onmessage = (event) => {
if (event.lastEventId == "[TOKENS]") {
//结束前会返回tokens
text = text+event.data
return;
}
if (event.data == "[DONE]") {
// 结束
return;
}
let json_data = JSON.parse(event.data);
if (json_data.content == null || json_data.content == "null") {
return;
}
text = text + json_data.content;
};
eventSource.onerror = (event) => {
console.log("服务连接异常请重试!");
if (event.readyState === EventSource.CLOSED) {
console.log("connection is closed");
} else {
console.log("Error occured11111", event);
}
event.target.close();
};
eventSource.addEventListener("message", (event) => {
console.log("Message id is " + event.lastEventId);
});
this.questionPost();
},
// api发送问题
questionPost() {
app.ajax.post(
"chatgpt/chat?userId=1",
{
msg: "问题",
sessionId: 1,//会话id
},
(data, rspMsg) => {
var questionTokens = data.question_tokens;//问题的tokents
},
(rspMsg, data) => {
this.$message.error("请求失败,请重试");
},
{}
);
},
//关闭
stopRequest(){
if (this.sse) {
this.sse._close();
}
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)