Loading... > @author: 郭瑞峰 > @createTime: 2023/09/07 > @updateTime: 2023/09/11 ## 前言 相信很多小伙伴已经用过`chatGPT`模型了，不知道有没有小伙伴好奇`chatGPT`一个一个蹦出的回答是怎么实现的 （~~估计就只有我这个闲人才注意到这个并较真~~） (⊙x⊙;) 当然，老规矩，先把`demo`放上来，方便大佬们直接琢磨。 [demo](https://github.com/xiaoxiaoxuan114-stduy/pseudo_streaming_request "demo") ## way1: 基于 fetch 单向请求 对应在`http://localhost:3303/fetch`中，1秒后页面开始“一个一个蹦出来”，很神奇吧，接下来听我细细唠叨(哔哔赖赖)。 `fetch`的`body.getReader`方法可以以流的方式逐个读取响应数据块，当`body.getReader().read().done`为`true`时，代表着数据传输完毕，可以结束当前请求。 如果你要看控制台的话，在“打字”状态下是看不见任何响应数据，只有等着请求完成后才能看见。  <center>完成响应前</center>  <center>完成响应后</center> 注意：这种单项请求只能用`fetch`完成，不能用`XMLHttpRequest`原因在于其`responseText`属性会在整个响应接收完毕后才返回完整的数据。 ## way2：基于 web-socket 双向消息推送 对应在`http://localhost:3303/socket`中，进入页面后会自动“蹦出来”，这个原理就很简单了，就是通过`web-socket`双向通信来进行，设置好**传输类型，心跳频率**就可以实现。 控制台`network`切换至`ws`就可以看见服务器端返回的消息。  ## way3：基于 SSE 服务器流式响应 简单说，它是基于`http`协议，让服务器能以**数据流**的方式传输给浏览器。([参考[1]](https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html "[1]")) 后端将响应头设置`text/event-stream`后就可以使用`http`协议传输**数据流**。不过请注意： * 后端传输流的时候需要按照这个数据类型传输，不然前端获取不了数据。 * 若设计`\n`换行符，请用与前端协商用其他方式代替传输，如用`\\n`字符串代替。 [参考[2]](https://juejin.cn/post/7238493216207192122 "参考[2]") ```javascript const sendMsg = `event:${event}\ndata:${data}\n\n` ``` 前端就需要`EventSource`来请求，代码如下： ```javascript const eventSource = new EventSource('目标地址') eventSource.addEventListener('message', ({ data }) => { console.log(data) }) eventSource.addEventListener('error', () => { console.log('连接异常') eventSource.close() }) eventSource.addEventListener('end', () => { console.log('流式响应结束') eventSource.close() }) ```  文献参考： [[1]](https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html "[1]")《Server-Sent Events 教程》，**阮一峰**老师 [[2]](https://juejin.cn/post/7238493216207192122 "参考[2]")《ChatGPT 流式响应背后的技术》，**A接拉起007**老师  最后修改：2024 年 11 月 27 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
1 条评论
文化符号解读精准，展现独特审美。