标签

源文件地址：sseServiceWithBroadcastChannel.js

相关文章：BroadcastChannel方式解决sse连接数限制

前言

在我们建立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连接中传输（通过不同事件类型区分）。	基础优化，良好的连接管理习惯。

详细总结

此处包含我个人对项目代码的一些详细解读，当然为了撰写效率，其包含了ai的总结部分，但基本思路和知识是对的就行。

对于SSE的基本知识：SSE简介 | xh's blog

对于源项目代码的解读：SSE服务代码解读 | xh's blog

介绍

这里是最后突破了sse连接数限制的源代码，应用了BoradcastChannel的主从模式进行突破。当然主标签页的选举逻辑是先到先得，最先进行加载的标签页为主标签页。若主标签页被删除或者刷新，会进行重新选举。LocalStorage中始终存储了已有标签页的id数组以及主标签页的id以及最大id的值，便于快速为新标签页添加id和快速的选举。同时也包含了主标签页的心跳检测机制，每30秒检查主标签页状态，发送ping消息后立即设置五秒的定时器，主标签页收到后回复pong，如果主标签页成功回复会自动清除定时器，如果回复超时进行重新选举。