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

embedded/2024/12/25 12:01:26/

一.问题背景

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

二.问题描述

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

三.问题原因

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

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

四.解决方案

1.转义字符

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

发送端(java):

接收端(angular):

2.其他

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


http://www.ppmy.cn/embedded/148607.html

相关文章

支付宝订单码支付

1.订单码支付,首先下载官方网站提供的sdk包到你的项目中。 2.选择控制器复制官方文档的获取二维码相关的代码示例。打开sdk包中v2的index.php文件,这个才是你选择语言的具体代码。 3.引用里面所需要的类文件,文件下载到你的项目中后&#xf…

网络下载ts流媒体

网络下载ts流媒体 查看下载排序合并 很多视频网站,尤其是微信小程序中的长视频无法获取到准确视频地址,只能抓取到.ts片段地址,下载后发现基本都是5~8秒时长。 例如: 我们需要将以上地址片段全部下载后排序后再合成新的长视频。 …

Redis——缓存雪崩

文章目录 1. 问题介绍2. 解决方案2.1 方案一:随机过期时间2.2 方案二:增强 Redis 集群的可用性2.3 方案三:多级缓存2.3.1 做法2.3.2 流程2.3.3 示例代码2.3.4 评价 2.4 方案四:限流 3. 总结 1. 问题介绍 缓存雪崩:大量…

UE5 物体自动跟随主角镜头转向

A、思路 Tick,设置物体世界旋转 旋转数值源于物体自身位置与玩家摄像机位置的差值 效果是物体自动转向,玩家镜头动,则物体也随之调整角度。 适合一些提示文字,如按键提示、帮助之类。 B、参考图

PHP医院安全(不良)事件管理系统源码,通过运用RCA分析工具,借助柏拉图、鱼骨图等分析工具,分析问题产生的根本原因

医院安全(不良)事件管理系统采用无责的、自愿的填报不良事件方式,有效地减轻医护人员的思想压力,实现以事件为主要对象,可以自动、及时、实际地反应医院的安全、不良、近失事件的情况,更好地掌握不良事件的…

Java 深拷贝全面解析

1. 引言 在 Java 编程中,对象之间的复制是一个常见的需求。根据复制的深度不同,我们可以将复制分为浅拷贝和深拷贝。本文将深入探讨 深拷贝(Deep Copy) 的概念、应用场景、具体实现方法及其优缺点,并提供一些实用的建…

项目开源能够带来什么?从中得到了什么?

开源软件项目的发展趋势和参与经验是一个多维度的话题,涉及技术进步、经济影响、社区动态以及个人成长等多个层面。以下是针对当前开源项目发展趋势的分析,以及参与开源项目时可能获得的经验和收获。 当前开源项目的发展趋势 技术领域的渗透加深&#x…

专业的内外网数据交换方案 可解决安全、效率、便捷3大问题

内外网数据交换是很多企业和行业都会面临的场景,既然隔离了内外网,重中之重就是要确保数据的安全性,其次在数据流转交换过程中,不能太繁琐复杂,需要让用户快速、便捷的进行数据交换。首先我们来看看,在进行…