前端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: {......}}