共 31 个标签
这是一段实现前端流式接收和处理 SSE（Server-Sent Events）数据的代码，它没有使用浏览器原生的EventSource，而是采用fetch配合流式读取来获取并处理数据，从而实现了逐字输出的效果。下面我们来逐部分解析。
🌟 注意核心是在processStream函数内部，当处理完一个数据块后，它再次调用reader.read().then(processStream)，从而形成一个递归调用链，直到流结束（done为true）
浏览器SSE（Server-Sent Events，服务器发送事件）是一种基于HTTP的技术，允许服务器主动将实时数据推送给客户端（如网页浏览器），而无需客户端反复请求。
SSE的核心工作机制是，客户端通过创建一个EventSource对象与服务器建立持久连接。服务器则通过发送具有特定Content-Type: text/event-stream头信息的响应，来保持此连接开放并持续推送数据。
其关键特性包括：
该实践基于nodejs的express框架搭建的后端，然后通过vuejs的前端进行请求学习。
后端部分通过设置SSE必需的响应头以及相应的定时器发送数据来建立sse接口，前端部分则通过eventSource.value = new EventSource(sse数据接口地址)来进行连接，利用eventSource.value.onopen,eventSource.value.onmessage 以及 eventSource.value.addEventListener('自定义事件名'，函数)来实现对后端数据的接收。
完整代码地址：sseService.js
这是一个功能完整的SSE（Server-Sent Events）客户端服务类，用于接收后端实时推送的设备状态变化通知。以下是对代码的详细解读：
// 创建全局单例实例，确保整个应用只有一个SSE连接
let sseServiceInstance = null
const getSseService = () => {
if (!sseServiceInstance) {
sseServiceInstance = new SSEService()
}
return sseServiceInstance
}
在我们建立sse连接的时候，由于HTTP/1.1的限制，在该协议下，大多数现代浏览器（如Chrome、Firefox、Edge）对同一域名（协议+域名+端口）的并发连接数限制通常为6个。这意味着，同一个浏览器标签页（或同一浏览器实例）中，对相同域名最多只能同时建立约6个SSE连接，超出此数量的新连接会被浏览器阻塞，直到有连接被关闭。
若需要突破此限制，可考虑以下方案：
| 解决方案 | 描述 | 适用场景 |
|---|---|---|
| 升级至HTTP/2 | HTTP/2支持多路复用，可在单个TCP连接上并行处理多个请求和响应，从而从根本上解决连接数限制问题。 | 长远和推荐方案，需服务器和浏览器支持，通常要求使用HTTPS。 |
| 多域名/多端口策略 | 将SSE连接分散到不同的子域（如sse1.example.com, sse2.example.com）或不同端口号。每个子域或端口享有独立的6个连接限额。 |
过渡方案，适用于暂无法升级HTTP/2的情况，但配置管理稍复杂。 |
| 优化连接使用 | 利用标签页切换及时关闭不再需要的SSE连接，或尝试将多个数据流合并到一个SSE连接中传输（通过不同事件类型区分）。 | 基础优化，良好的连接管理习惯。 |
由于个人之前未进行sse的代码训练，便进行了sse的相关代码训练操作。
本周主要对SSE的项目进行了系统的训练，通过Nodejs构建后端来进行sse的本地演练测试。该实践基于nodejs的express框架搭建的后端，然后通过vuejs的前端进行请求学习。
后端部分通过设置SSE必需的响应头以及相应的定时器发送数据来建立sse接口，前端部分则通过eventSource.value = new EventSource(sse数据接口地址)来进行连接，利用eventSource.value.onopen,eventSource.value.onmessage 以及 eventSource.value.addEventListener('自定义事件名'，函数)来实现对后端数据的接收。
此处包含我个人对项目代码的一些详细解读，当然为了撰写效率，其包含了ai的总结部分，但基本思路和知识是对的就行。
对于SSE的基本知识：SSE简介 | xh's blog
对于源项目代码的解读：SSE服务代码解读 | xh's blog