首页 前端知识 Vue (SSE)EventSource实现流式输出

Vue (SSE)EventSource实现流式输出

2024-08-23 20:08:23 前端知识 前端哥 619 382 我要收藏

        重要的事情前面说,如果你使用的是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一样流式输出信息了。

结果如下:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16686.html
标签
评论
发布的文章

HTML5 基本框架

2024-09-01 23:09:50

HTML5取消边框的方法

2024-09-01 23:09:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!