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一样流式输出信息了。

结果如下：

已经可以完成流式输出信息了。