如何用消息广播机制让 Shared Worker 通知所有连接的页面

Shared Worker 可通过保存并遍历 MessagePort 实现广播:onconnect 时存端口到 clients 数组,广播时检查 port.readyState === 'open' 后 postMessage;页面端创建 SharedWorker 并通过 port.postMessage({type: 'broadcast'}) 触发,支持 topic 分类分发。Shared Worker 本身不自带"广播"功能,但可以通过在 Worker 脚本中主动遍历所有已连接的 MessagePort 实例,逐个调用 port.postMessage(),实现向所有页面发送相同消息的效果。这是最常用、最可控的广播方式。核心逻辑:收集端口 + 遍历发送Worker 线程需在 onconnect 事件中保存每个页面传来的通信端口,并在需要广播时统一推送:每次有新页面连接,e.ports0 就是一个专属端口,把它存进数组(如 clients = \[\]) 发送广播前,确保每个端口都已调用过 port.start()(使用 port.onmessage 可自动触发) 遍历 clients 数组,对每个端口执行 port.postMessage(data) 注意:若某页面已关闭但端口未及时清理,port.postMessage() 不会报错,但消息无法送达;可结合 port.onclose 或定期检查 port.readyState === 'open' 做清理Worker 脚本示例(shared-worker.js)以下代码实现基础广播能力: Trenz AI驱动的社交电商营销平台,专为TikTok Shop设计

相关推荐
用户7088769039383 小时前
给传统 SaaS 增加 AI 能力:3个真实落地场景
python
卷无止境3 小时前
FastAPI中间件全解析:请求处理链条上的隐形关卡
后端·python·fastapi
用户0332126663673 小时前
使用 Python 将 HTML 内容添加到 PowerPoint 演示文稿中
python·html
看浪的路人3 小时前
第4讲:MCP Client 开发——连接、发现、调用
windows·python·ai
Swift社区3 小时前
Python 开发环境怎么选?PyCharm、VS Code、Trae 谁更适合 AI 开发?
人工智能·python·pycharm
卷无止境3 小时前
聊聊Web开发里的流式数据 从原理到FastAPI实战
后端·python·fastapi
SMF19193 小时前
【PyCharm】让 PyCharm 使用 .venv 虚拟环境
ide·python·pycharm
Lysander.Jovian3 小时前
Nginx服务2
运维·数据库·nginx
修远客3 小时前
感知模块:Agent的眼睛和耳朵 — 三层降级策略让Agent永不"失明"
python·agent
小张同学a.3 小时前
zabbix企业级监控平台4——分布式监控与grafana数据可视化
linux·运维·数据库·分布式·信息可视化·zabbix·grafana