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);});
}

二、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.jseventsource.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只支持wswss开头的接口。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);
	});
}
  • 5
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又又爱拍照

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值