chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket
作者：又又爱拍照
项目需要接入chatgpt提供的api，后端返回流式的字符，前端接收并实时显示。在JavaScript中，使用Stream流通常指的是处理数据流的一种方式。Stream可以是可读的、可写的、或者既可读又可写的。它们允许数据被处理成块，而不是一次性处理整个数据集，这对于处理大量数据或者来自网络请求的数据非常有用。
一、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);});
}二、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
yarn add event-source-polyfill
在js文件中引入
import EventSource from 'event-source-polyfill';
引入方式二：eventsource
下载仓库：https://github.com/Yaffle/EventSource
注意：进入src文件下载所需eventsource.js或eventsource.min.js文件，引入时注意路径，如果是jsp文件用绝对路径
<script type="text/javascript" src="/path/eventsource.js"></script>
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);
};
}三、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);
});
}