chatGPT前端流式输出js实现三种方法—fetch、SSE、websocket_Javascript

项目需要接入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);
	});
}