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

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

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

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

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

javascript 复制代码
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即可。如下:

javascript 复制代码
devServer: {
        host: '0.0.0.0',
        port: 8081,
        compress: false, // 是否启动压缩 gzip
        https: false,
        open: true,
        proxy: {
				......
		}
 }
相关推荐
李昊哲小课17 分钟前
HTML 完整教程与实践
前端·html
GISer_Jing37 分钟前
React 18的createRoot与render全面对比
前端·react.js·前端框架
我叫汪枫39 分钟前
React Hooks原理深度解析与高级应用模式
前端·react.js·前端框架
我叫汪枫39 分钟前
深入探索React渲染原理与性能优化策略
前端·react.js·性能优化
阿智@111 小时前
推荐使用 pnpm 而不是 npm
前端·arcgis·npm
伍哥的传说1 小时前
QRCode React 完全指南:现代化二维码生成解决方案
前端·javascript·react.js·qrcode.react·react二维码生成·qrcodesvg·qrcodecanvas
IT_陈寒1 小时前
Vite 5.0 终极优化指南:7个配置技巧让你的构建速度提升200%
前端·人工智能·后端
listhi5201 小时前
Map对象在JavaScript循环中的使用
开发语言·前端·javascript
安卓开发者1 小时前
鸿蒙Next Web组件生命周期详解:从加载到销毁的全流程掌控
前端
我叫汪枫4 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端