讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript中SSE在面对后端分块传输(ChunkedEncoding)时EventSource是怎么自动进行分帧解析的

夜宇大大_3752

夜宇大大_3752

发布时间:2026-07-20 18:12:48

|

453人浏览过

|

来源于php中文网

原创

EventSource 不依赖 Transfer-Encoding: chunked,仅依据 Content-Type: text/event-stream 和 SSE 协议规范解析数据流;其分帧基于换行符与字段语法,由浏览器自动处理 chunked 解码,服务端只需正确输出 SSE 格式文本并及时 flush。

javascript中sse在面对后端分块传输(chunkedencoding)时eventsource是怎么自动进行分帧解析的

EventSource 不依赖 Transfer-Encoding: chunked,它只认响应头 Content-Type: text/event-stream,并按 SSE 协议规范解析数据流,与底层是否用 chunked 编码无关。

EventSource 的分帧逻辑不关心 chunked 编码

Chunked 是 HTTP 层的传输编码机制,用于解决“响应体长度未知”时的数据分段发送问题;而 EventSource 工作在应用层,它接收的是已由浏览器网络栈解码后的完整字节流(即 chunked 已被自动还原为原始字节)。浏览器内部会先完成 chunked 解包,再把连续、无分块标记的纯文本交给 EventSource 解析。

换句话说:chunked 只影响 TCP 包怎么发、HTTP 怎么传,不影响 EventSource 看到的内容。只要后端返回正确的 SSE 响应头和格式,EventSource 就能正常工作。

SSE 分帧依据是换行符和字段语法,不是 chunk 边界

EventSource 按照 W3C SSE 规范 逐行读取响应体,以 \n 或 \r\n 为行分隔符,识别以下字段:

立即学习“Java免费学习笔记(深入)”;

  • data: 后续内容作为事件数据(多行 data: 会自动拼接,以 \n 分隔)
  • event: 指定事件类型(如 "message", "update")
  • id: 设置事件 ID,用于断线重连时的 last-event-id
  • retry: 指定重连间隔(毫秒)
  • 空行(仅含 \n 或 \r\n)表示一个完整事件结束

它完全忽略 HTTP chunk 头(如 0a\r\n)、chunk 分隔 CRLF 和终块 0\r\n\r\n——这些在到达 EventSource 前已被浏览器剥离。

javascript-pro
javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家,适用于现代开发

下载

服务端只需保证 SSE 格式正确,无需手动处理 chunked

现代 Web 框架(如 Express、FastAPI、Spring WebFlux)在返回 SSE 响应时,通常自动设置:

  • Content-Type: text/event-stream
  • Cache-Control: no-cache
  • Connection: keep-alive
  • 不设 Content-Length(触发服务器自动启用 chunked)

你只需按行输出符合 SSE 语法的文本,例如:

data: {"status":"running"}\n\n data: {"progress":50}\n\n

浏览器会持续接收、缓冲、按行切分、组装事件,全程无需你干预 chunked 行为。

常见误区:混淆 chunked 和 SSE 的作用层级

误以为“必须手动写 chunked 头才能让 EventSource 流动”——这是错的。只要你没禁用自动 chunked(比如强行加了 Content-Length),且后端持续 write + flush,浏览器就会自然走 chunked 传输路径,但 EventSource 完全感知不到这个过程。

真正导致 EventSource 卡住或收不到数据的原因通常是:

  • 响应头缺失 text/event-stream 或含 Content-Length
  • 后端未及时 flush(尤其在 Node.js 中漏掉 res.flush())
  • 代理(Nginx、CDN)缓存了响应或关闭了长连接
  • 每条消息末尾没加两个 \n(\n\n),导致 EventSource 无法判定事件边界

热门AI工具

更多
PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2203

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

5850

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

5166

2024.03.19

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

4386

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

1109

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

4304

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

880

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

1756

2023.09.04

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

0

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn