chatGPT流式输出前端实现fetch、SSE、websocket

一、fetch实现stream

fetch 本身不直接支持流式输出，但你可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 来实现类似的效果。

function streamOutput(msg) { // 发送 POST 请求 fetch('url', { method:"POST", body:JSON.stringify({ "content": msg}), timeout: 0, dataType:"text/event-stream", headers:{ "Content-Type":"application/json" }, }).then(response => { // 检查响应是否成功 if (!response.ok) { throw new Error('Network response was not ok'); } // 返回一个可读流 return response.body; }).then(body => { disableLoading(); const reader = body.getReader(); // 读取数据流 function read() { return reader.read().then(({ done, value }) => { // 检查是否读取完毕 if (done) { console.log('已传输完毕'); return; } // 处理每个数据块 console.log('收到的数据:', value); // 继续读取下一个数据块 read(); }); } // 开始读取数据流 read(); }).catch(error => {console.error('Fetch error:', error);}); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

二、SSE实现（只支持GET请求）

在 SSE 中，浏览器通过发送 HTTP GET 请求到服务器上特定的 SSE 端点（endpoint），然后服务器通过该连接发送事件（event）和相关数据到客户端，故SSE 主要使用 GET 请求。EventSource不支持发送请求头，如果需要发送请求头则要用EventSourcePolyfill。

在使用EventSourcePolyfill前需要引入 Server-Sent Events (SSE) 的 JavaScript 库。

引入方式一：npm或yarn

npm install event-source-polyfill

• 1

yarn add event-source-polyfill

• 1

在js文件中引入

import EventSource from 'event-source-polyfill';

• 1

引入方式二：
eventsource下载仓库：https://github.com/Yaffle/EventSource
注意：进入src文件下载所需eventsource.js或eventsource.min.js文件，引入时注意路径，如果是jsp文件用绝对路径

<script type="text/javascript" src="/path/eventsource.js"></script>

• 1

function streamOutput() { // 创建 EventSourcePolyfill连接，如果不需要发送请求头可以使用EventSource即可 const eventSource = new EventSourcePolyfill('url',{ headers:{ "Content-Type":"application/json" } }); // 处理 SSE 消息 eventSource.onmessage = function (event) { console.log('接收SSE的消息:', event.data); // 在这里处理接收到的流式数据 }; // 处理 SSE 连接打开事件 eventSource.onopen = function (event) { console.log('SSE连接完成:', event); }; // 处理 SSE 连接关闭事件 eventSource.onclose = function (event) { console.log('SSE连接关闭:', event); }; // 处理 SSE 错误事件 eventSource.onerror = function (error) { console.error('SSE EventSource error:', error); }; }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29

三、websocket实现（url必须为ws或wss开头的接口）

WebSocket 是一种全双工通信协议，允许客户端和服务器之间进行实时的双向通信，并且支持POST请求。但是值得注意的是WebSocket只支持ws或wss开头的接口。WebSocket 握手时并没有提供直接设置请求头的标准方法，它的握手阶段是由浏览器自动处理的，因此你不能直接在创建 WebSocket 连接时设置请求头，但可以通过通过 URL 参数传递的方式传递信息。

function streamOutput(msg) { const socket = new WebSocket('url'); // 连接打开时触发 socket.addEventListener('open', event => { console.log('WebSocket连接完成:', event); // 处理接收到的消息 socket.addEventListener('message', event => { console.log('接收消息:', event.data); // 在这里处理接收到的流式数据 }); }); // 连接关闭时触发 socket.addEventListener('close', event => { console.log('WebSocket连接关闭:', event); }); // 处理错误时触发 socket.addEventListener('error', error => { console.error('WebSocket error:', error); }); }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24