开发chatgpt 之 SSE(Server-Sent Events) 发送POST请求 fetch的实现
之前写过一篇使用 SSE(Server-Sent Events)发送GET请求接受chatgpt Stream数据的文章:从零开始开发自己的chatgpt平台 之 SSE(Server-Sent Events)客户端和服务端在文章最后留了一个问题 SSE是通过get参数发送消息的,但是get是有限制的,因此这个方法并不好,那如何像openai一样让SSE发送POST请求呢?本文讲解如何使用fetc
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
如果有问题可以联系我**:https://gitee.com/xiaoyuren/gpt3
前言
之前写过一篇使用 SSE(Server-Sent Events)发送GET请求接受chatgpt Stream数据的文章:
如果没看过可以去看一下:
从零开始开发自己的chatgpt平台 之 SSE(Server-Sent Events)客户端和服务端
在文章最后留了一个问题 SSE是通过get参数发送消息的,但是get是有限制的,因此这个方法并
不好,那如何像openai一样让SSE发送POST 请求呢?本文讲解如何使用fetch实现。
一、fetch是什么?
fetch是JavaScript中一种用于发送网络请求的API。使用fetch,您可以发送HTTP请求(如GET、
POST、PUT、DELETE等),并处理响应。它返回一个Promise对象,允许您使用then()方法来处
理成功的响应或catch()方法来处理错误。
二、fetch 发送POST请求的示例
fetch('url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => {
// 处理返回的数据
console.log(data);
})
.catch(error => {
// 处理错误
console.error('请求失败:', error);
});
上面的示例比较简单就是使用fetch发送了一个POST请求,请求的内容也比较简单。然后输出返回
的内容,这样请求是正常的传输而不是流式传输,我们使用openai的参数 需要使用流式传输。我
们应该如何使用流式传输呢
三、fetch 使用流式传输
const reader = response.body.getReader();
let result = "";
while (true) {
const { done, value } = await reader.read();
if (done) break;
let result=new TextDecoder().decode(value)
console.log(result)
}
在上面的代码中,使用response.body.getReader()方法来获取一个可读取响应体数据的reader对象
的主要原因是为了支持流式(streaming)读取响应数据。当我们发送请求并获取响应时,响应体
数据可能会以分块(chunks)的形式传输,而不是一次性将整个响应体传输完毕。这种分块传输
对于处理大型响应或网络速度较慢的情况非常有用,它允许我们逐步处理响应数据,而不必等待整
个响应完成。reader对象提供了一个read()方法,它可以异步读取响应体的下一个分块数据。通过
使用await reader.read(),我们可以等待并获取下一个数据分块的内容。在代码中的循环中,我们
使用reader.read()读取数据分块使用reader对象进行流式读取可以提高效率和性能,特别是当处理
大量数据或网络延迟较高时。它允许我们逐步处理响应数据,减少内存占用和等待时间。
因此,使用getReader()来读取返回的内容是为了支持流式处理响应数据,使得代码更具灵活性和
效率。使用getReader读取流的字节流数据 然后再用TextDecoder将流数据解码为字符串。这样就实现了fetch发送POST 读取
返回流数据。
总结
通过上面的代码可以建立一个基于本地html的chatgpt客户端,如果是自己做平台不想暴漏key也可以让fetch链接自己的服务器,自己服务器在通过sse和客户端通讯就行了。上面代码没有主体数据部分,这部分可自行构造,和上面的示例一样格式即可。如果还有不明白的地方可以私信或者联系我
如果有问题可以联系我**:https://gitee.com/xiaoyuren/gpt3
更多推荐
所有评论(0)