从此
📄文章 #️⃣专题 🌐酷站 👨‍💻技术 📺 📱

🏠 » 📄文章 » 内容

 欢迎来访!

前端 fetch API + ReadableStream 模拟流式响应 SSE(Server-Sent Events) EventSource服务

🕗2024-12-09👁️5

ChatGPT 类似的模型服务(比如Vertex Gemini API),基本上都和 GPT API 一样使用 SSE(Server-Sent Events) 通信。

前端 EventSource API 调用 SSE 写死了 GET 请求,当需要使用 body 传递数据时就不太方便,这里使用 fetch 实现 POST 请求:

 
fetch("http://192.168.1.11:7860/chat", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ "prompt": "用小孩子能听懂的话讲清楚什么是微积分", "history": [] }), // 将数据作为请求体发送
})
.then((response) => {
const reader = response.body.getReader();
return new ReadableStream({
start(controller) {
function push() {
reader.read().then(({ value, done }) => {
if (done) {
controller.close();
return;
}
controller.enqueue(value);
push();
});
}
push();
},
});
})
.then((stream) => {
const textDecoder = new TextDecoder();
const readableStreamDefaultReader = stream.getReader();
function processStream() {
readableStreamDefaultReader.read().then(({ value, done }) => {
if (done) {
console.log('End of stream');
return;
}
console.log(textDecoder.decode(value));
processStream();
});
}
processStream();
})
.catch((error) => {
console.error(error);
});