前端调用SSE接口
使用js的EventSource API
const source = new EventSource('/sse);
source.onmessage = function(event) {
const data = JSON.parse(event.data);
// 结束标识
if(data == '__stop__') {
source.close();
return;
}
document.getElementById('events').innerHTML += '<p>${data.message}</p>';
}
source.onerror = function(error) {
console.error('Error occurred:', error);
source.close();
}
使用fetchEventSource 插件
npm install --save @microsoft/fetch-event-source
import {fetchEventSource} from '@microsoft/fetch-event-source';
send() {
const params = {
'prompt': ''
};
const vm = this;
const ctrlAbout = new window.AbortController();
const {signal} = ctrlAbout;
fetchEventSource(Url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/event-stream',
'X-Requested-With': 'XMLHttpRequest'
},
body: JSON.stringify(params),
signal: ctrlAbout.signal, // AbortSignal
openWhenHidden: true, // 去u u喜爱哦visibilityCHange事件
onmessage(event){
console.loginfo(event.data);
//在这里操作流式数据
const message = JSON.parse(event.data);
vm.content += message.data;
// 保证打字输入时滚动条在最下方
vm.$nextTick(() => {
const contentEl = vm.$refs.content.$el;
contentEl.scrollTop = contentEl.scrollHeight - contentEl.clientHeight;
})
}，
onclose(e) {
//关闭流
//中断流式返回
ctrlAbout.abort();
},
onerror(error){
// 返回流报错
console.info(error);
// 中断流式返回
ctrlAbout.abort();
//直接抛出错误，避免反复调用
throw err;
}
})
}
