用过chatgpt的同学都知道,chatgpt的文本是流式输出的,也就是有打字机的那种一个字一个字蹦出来的效果,这里不是前端控制的那种效果(前端拿到所有的文本,然后一个字一个字的渲染),而是我们真的一个字一个字的从服务端拿到然后立刻渲染后页面上,这里主要涉及到eventStream
那么如何实现呢?
let eventSource: EventSource
const send = () => {
eventSource = new EventSource('url')
eventSource.onmessage = function (event) {
if (event.data === '[DONE]') {
return stop()
}
const data = JSON.parse(event.data)
console.log(data.message)
}
}
const stop = () => {
eventSource.close()
}
send函数展示了如何建立连接,并接受由服务端推送过来的消息,stop函数展示了如何结束这个连接。