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一样流式输出信息了。
结果如下：
已经可以完成流式输出信息了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。