SSE(Server-Sent Events)返回n ,前端接收数据时被错误的截断【如何避免SSE消息中的换行符或回车符被解释为事件消息的结束】

一.问题背景

前后端分离项目,前端使用angular框架,后端使用springboot框架。后端使用spring-boot-starter-webflux【后面会专门出一期文章详解】提供流式接口,前端使用sse.js【后面会专门出一期文章详解】调用后端接口。

二.问题描述

后端接口返回的数据中包含' '字符,而前端没有正确处理这些换行符,导致数据在 处被错误地截断, 之后的数据都没有显示在页面上。

三.问题原因

在Server-Sent Events(SSE)协议中,每条事件消息都是由事件名称、可选的数据字段以及一个或多个换行符( )或回车符( )组成的。**这些换行符或回车符标志着一条消息的结束和下一条消息的开始。**浏览器在接收到SSE流时,会根据这些换行符或回车符来分割和解析数据流,从而识别出单独的事件。

如果服务器发送的数据中包含了换行符或回车符,并且这些字符没有被适当地转义或包含在事件消息的适当位置,那么浏览器可能会错误地将它们解释为事件消息的结束。这意味着,如果数据本身包含了这些字符,它们应该被编码或转义,以防止浏览器误解。

四.解决方案

1.转义字符

确保发送的数据不包含 字符,或者如果需要发送包含换行符的数据,则需要进行适当的转义,例如发送前对 进行转义,替换为 (也可以是其他的字符),接收端在解析时再将其转换回 。

发送端(java):

接收端(angular):

2.其他

还有其他方法,但因为我只试了转义这一种方案,其他的方案,例如编码数据等,大家也可以自己试试。

相关推荐
JosieBook20 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
pusheng202520 小时前
算力时代的隐形防线:数据中心氢气安全挑战与技术突破
前端·安全
起名时在学Aiifox20 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript
2501_9418779821 小时前
从配置热更新到运行时自适应的互联网工程语法演进与多语言实践随笔分享
开发语言·前端·python
云上凯歌21 小时前
01 ruoyi-vue-pro框架架构剖析
前端·vue.js·架构
华仔啊1 天前
JavaScript 如何准确判断数据类型?5 种方法深度对比
前端·javascript
毕设十刻1 天前
基于Vue的迅读网上书城22f4d(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
程序员小寒1 天前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学1 天前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头1 天前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript