最近在做一个chat相关的功能,然后由于接口返回特别特别慢,所以需要搞一个慢慢等待的效果,就是接口一个单词一个单词的返回,然后前端收到一个展示一个,提升用户体验。
看其他文档都说使用EventSource即可,就是传说中的sse【server-send-events】。记录下使用方法。
import { fetchEventSource } from '@microsoft/fetch-event-source'
getStream(payload: any, url: string) {
const token = access_token;
let that = this;
let headers: any = {
Authorization: `Bearer ${token}`,
};
if (url == 'content') {
headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`,
};
}
try {
this.fetchSource = fetchEventSource(
`${serviceUrl}/api/v1/${url}`,
{
method: 'POST',
headers: headers,
signal: this.ctrl.signal,
openWhenHidden: true,
body: url == 'summarize-content' ? JSON.stringify(payload) : payload,
async onopen(response) {
that.output = '';
if (
response.ok &&
response.headers.get('content-type') ===
'text/event-stream;charset=utf-8; charset=utf-8'
) {
// everything's good
console.log("everything's good");
} else if (
response.status >= 400 &&
response.status < 500 &&
response.status !== 429
) {
console.log('request error');
} else {
console.log('error');
}
},
async onmessage(event) {
if (event) {
const json_data = JSON.parse(event.data);
that.output += json_data.text;
that.outputSummary = marked(that.output);
that.scrollChatToBottom();
}
},
onerror(error) {
console.error('Error:', error);
},
async onclose() {
// if the server closes the connection unexpectedly, retry:
console.log('close');
},
}
);
} catch (err: any) {
if (err.name == 'AbortError') {
console.log('Aborted!');
} else {
console.log(err);
}
}
}
stopAI = () => {
this.ctrl.abort();
this.ctrl = new AbortController();
this.showStop = false;
};
// div滚动条自动滚动到最下面
scrollChatToBottom() {
this.cd.detectChanges();
var scrollingDiv = document.getElementById('outputDiv');
if (scrollingDiv) scrollingDiv.scrollTop = scrollingDiv.scrollHeight;
}