重要的事情前面说,如果你使用的是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一样流式输出信息了。
结果如下:
已经可以完成流式输出信息了。