fetch 接收 chatgpt api 服务端推流 server sent event

/ 0评 / 0

在看chatgpt的演示时留意到ai会逐字回复,当时就好奇是什么做到的?只是前端效果吗?

后来打算接下openai的api,自己也做个chat,看到文档里有个参数可以启用服务端推流(Server Sent Event)才明白过来。

但前端怎么处理SSE呢?

查了一下有JS有 EventSource,但只支持GET请求,不行。

用fetch试了下,会返回一个ReadableStream。查了下资料,ReadableStream貌似可以实时转换接收到的数据,整理如下:

const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization':''
    },
    body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [],
        stream: true
    })
})
const reader = response.body.getReader()
const decoder = new TextDecoder()
let packed
while (!(packed = await reader.read()).done) {
    let result = decoder.decode(packed.value) // uint8array转字符串
    const lines = result.trim().split("\n\n") // 拆分返回的行
    for (let i in lines) {
        let line = lines[i].substring(6) // 去掉开头的 data:
        if (line === '[DONE]') { // 结束
            break
        }
        let data = JSON.parse(line)
        let delta = data['choices'][0]['delta']

        
        // 后面就是自己的业务逻辑了...
    }
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注