前端SSE-EventSource message事件执行异常问题

news/2024/11/1 5:28:10/

前端SSE-EventSource message事件执行异常问题


前言: 最近项目中需要做一个消息中心-需要实现实时推送消息到客户端,之前一直都是使用WebSocket,但是最近了解到有比它更轻量化的方法可以达到相同的效果,就是SSE。但是与后端进行联调配合的时候遇到了一些很奇怪的问题,也是研究了很久才解决,特此记录。

问题:前端监听了message 事件,但是后端一直发送消息,前端并不能实时收到发送的每一条消息,只有在断开链接的那一次,会收到前面收到的所有消息,并且记录的是同一秒发送的。

前端代码如下:这里因为我们后端需要检验Token并且必须放到Header里面,所以前端这里用了一个库(@microsoft/fetch-event-source)来实现SSE

const token = getAuthent('token');fetchEventSource('/api/base-sse/create', {method: 'get',headers: {token},onopen(e) {console.log('open', e);},onmessage(e) {console.log('ffff', e);},onclose() {console.log('sse断开');// if the server closes the connection unexpectedly, retry:throw new RetriableError();}
});

解决方案:原因是因为我们使用webpack的时候,启用compress压缩,这导致与SSE的解析冲突了,所以无法实时获取,我们只需要将 compress 改为 false即可。如下:

devServer: {host: '0.0.0.0',port: 8081,compress: false, // 是否启动压缩 gziphttps: false,open: true,proxy: {......}}

http://www.ppmy.cn/news/1543501.html

相关文章

JAVA开发入门

Java 是一种广泛使用的面向对象编程语言,它以其“一次编写,到处运行”(Write Once, Run Anywhere, WORA)的特点而闻名。Java 被设计为能够在任何支持 Java 的平台上运行,这主要得益于 Java 虚拟机(JVM&…

图文展示如何在github上贡献合并请求

大致步骤为: 登录github -> 打开目标仓库 -> 点击fork按钮 -> 复制分叉出来的新仓库地址 -> 克隆到本地 -> 修改代码后提交 -> 网页上点击Contribute -> 弹窗里点击Open pull request -> 跳转出来的新页面里点击Create pull request 详细…

Spring Boot技术在校园社团管理中的高效应用

3系统分析 3.1可行性分析 通过对本校园社团信息管理系统实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本校园社团信息管理系统采用SSM框架,JAVA作…

数对的最大曼哈顿距离[ABC178E] Dist Max

[ABC178E] Dist Max 题面翻译 给定平面上 N N N 个点,求出所有点对间的最大曼哈顿距离。 题目描述 二次元平面上に $ N $ 個の点があり、$ i $ 番目の点の座標は $ (x_i,y_i) $ です。 同じ座標に複数の点があることもあります。 異なる二点間のマンハッタン距…

[前端面试]计算机网络

TCP/IP 与OSI TCP/IP TCP/IP 四层模型是一个分层网络通信模型, 它将网络通信过程分为四个层次,这四层分别是:网络接口层、互联网层、传输层和应用层。 网络接口层负责在计算机和网络硬件之间传输数据,负责在物理网络上发送和接…

ubuntu用户账号相关操作

用户账号相关 查看当前登录用户 可以使用 who 或 w 命令来查看当前登录到系统的用户。这些命令会列出当前登录用户的用户名以及登录的时间和终端信息。以下是示例: who或者 w这些命令的输出可能会像这样: user1 pts/0 2024-04-20 09:30 (:0) user…

git add你真的用明白了吗?你还在无脑git add .?进入暂存区啥意思?

git add 命令用于将文件的改动添加到暂存区(staging area),为下一次提交做好准备。简单来说,它标记了哪些文件或改动会被纳入下次 git commit 中。以下是 git add 的作用和使用场景: 1. 作用 git add 将指定文件或文…

贪心算法入门(一)

1.什么是贪心算法? 贪心算法是一种解决问题的策略,它将复杂的问题分解为若干个步骤,并在每一步都选择当前最优的解决方案,最终希望能得到全局最优解。这种策略的核心在于“最优”二字,意味着我们追求的是以最少的时间和…