Vue+(SSE)EventSource实现流式输出过程
重要的事情前面说，如果你使用的是vue，那么为了可以流式输出，必须关闭下面这个东西，这是我踩坑2个小时发现的： compress: false，这个必须设置，不然接受服务端响应还是一大段内容返回。
下面介绍一下EventSource
EventSource是HTML5中的一个API，用于实现服务器端的事件驱动推送SSE（Server-Sent Events）。
它允许服务器实时地向客户端发送事件和数据，而不需要客户端不断地向服务器发起请求。
EventSource的特点和优势包括
- 1. 简单易用：使用EventSource只需要几行代码即可建立连接和监听事件。
- 2. 自动重连：EventSource会自动尝试重新连接服务器，即使网络断开或服务器重启，客户端也会自动恢复连接。
- 3. 单向通信：EventSource只支持服务器向客户端的单向通信，不支持客户端向服务器发送数据，因此更适合服务器主动推送信息给客户端。
- 4. 长连接：EventSource使用长连接，减少了频繁的请求和响应，降低了网络开销和服务器负载。
但是EventSource有一个缺点就是没法设置请求头信息和请求方式，EventSource只支持Get请求，我翻了一下CSDN找到了解决方案，使用FetchEventSource。
FetchEventSource 是一个 JavaScript 库，用于从服务器或其他源获取事件流数据。它是基于 Fetch API，提供了一种简单和灵活的方式来处理服务器发送的事件流数据。
使用 fetchEventSource，您可以设置一个事件回调函数，用于处理从服务器发送的事件。当服务器发送新的事件时，该回调函数将被触发，并且您可以在回调函数中执行相应的操作。
FetchEventSource 还提供了一些方法来管理事件流的连接状态，例如打开连接、关闭连接、重新连接等。它还支持设置请求头、查询参数等功能，以满足不同的需求。
现在我来介绍一下使用流程
1.安装库
npm install fetch-event-source
2.导入函数
import { fetchEventSource } from '@microsoft/fetch-event-source'3.创建请求连接(并支持设置请求头，请求方式)
this.eventSource = await fetchEventSource(url, {
// 这里设置请求头信息
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token')
},
})4.监听连接
5.监听服务端返回数据
6.监听服务端错误
7.监听服务端关闭
这里有个属性openWhenHidden: true 是指浏览器页签不处于活跃时仍然可以输出信息。
8.请求SSE
const urlWithUuid = `/api/map/houseproperty/createSse?uuid=${encodeURIComponent(uuid)}`
this.sseRequest(urlWithUuid) // 使用带有UUID的URL进行SSE请求至此，页面就可以像GPT一样流式输出信息了。
结果如下：
已经可以完成流式输出信息了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家分享了一个写给vue新手看的vue渲染页面教程，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，感兴趣的朋友们下面随着小编来一起学习学习吧。2017-09-09
这篇文章主要介绍了基于vue与element实现创建试卷相关功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
vue3+ts+element-plus 表单el-form取消回车默认提交
文章主要讲述了在使用Element UI的el-form和el-input组件时,按回车键导致页面刷新的问题,并提供了四种解决方法：阻止表单的默认提交事件、阻止keydown回车事件、在指定的el-input组件上阻止keydown回车事件以及在el-input中按特定组合键进行查找,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要给大家介绍了关于Vue3中watchEffect用途的相关资料, watch和watchEffect都是监听器,但在写法和使用上有所区别,本文进行了详细的介绍,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue与React的区别和优势对比，帮助大家更好的选择适合自己的前端框架，迷茫的同学可以进来参考下2020-12-12
下面小编就为大家分享一篇集成vue到jquery/bootstrap项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文中，我们主要介绍Cesium在Vue3运行环境的配置，及Cesium实例中控件的显隐设置，本项目基于pnpm安装，也可使用其他包管理器进行安装，如npm或yarn，本文通过示例代码对vue初始化Cesium地图相关知识介绍的非常详细，需要的朋友参考下吧2023-07-07
Vue如何解决子组件data从props中无法动态更新数据问题
这篇文章主要介绍了Vue如何解决子组件data从props中无法动态更新数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下2023-10-10
最新评论