jHipster 之 webflux-前端用EventSource处理sse变成了批量处理而非实时处理

现象:

javascript 复制代码
const eventSource = new EventSource(API_URL5);
    eventSource.onmessage = streamEvent => {
      console.log('a message is come in--------->');
      const content = streamEvent.data;
      console.log('Received content: ' + content);
    };

前端用EventSource 处理webflux的sse,虽然后端每秒钟会生成一个字符串,但是前端并不是每秒中在控制台打印出后台输出的数据,而是等后台所有的输出完了,一起打印到控制台。这就改变了eventsource的初衷了。

貌似有一种缓冲机制,后经调查和后端没有关系,是jHipster开发环境中的前端代理服务器导致。

可能的原因:

  1. webpack devserver
  2. BrowserSyncPlugin
    他们可能使后端的返回加入了Content-Encoding: gzip 这个响应头,这样eventSource的处理收到了干扰。

因为是开发环境特有的问题,生产环境没有,所以暂时记录一下,以后有时间可以研究一下。重要的一点是,问题的原因是前端,jhipster后端没有问题。

相关推荐
Irene19911 小时前
ElementPlus 与成熟后台框架对比:vue-element-plus-admin、vue-pure-admin等
前端·ui·框架·vue3
尘中客5 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_6 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中6 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007476 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
前端大波6 小时前
Sentry 每日错误巡检自动化:设计思路与上手实战
前端·自动化·sentry
ZC跨境爬虫8 小时前
使用Claude Code开发校园交友平台前端UI全记录(含架构、坑点、登录逻辑及算法)
前端·ui·架构
慧一居士8 小时前
Vue项目中,何时使用布局、子组件嵌套、插槽 对应的使用场景,和完整的使用示例
前端·vue.js
Можно8 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app
M ? A8 小时前
解决 VuReact 中 ESLint 规则冲突的完整指南
前端·react.js·前端框架