Web Locks API 探索器 - 跨标签页资源协调
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
UD5工具箱
BroadcastChannel API 是一个浏览器原生接口,允许同源的不同浏览上下文(标签页、窗口、iframe、Web Worker)之间进行实时消息广播通信。它基于发布/订阅模式,任何订阅了同一频道的上下文都可以接收消息。
核心特点:发送者不会收到自己发送的消息,这与 WebSocket 的广播模式类似。API 简单易用,仅需创建频道、发送消息、监听消息三步即可完成通信。
| 特性 | BroadcastChannel | localStorage 事件 | SharedWorker |
|---|---|---|---|
| 通信方向 | 双向广播 | 单向通知(写→其他) | 双向 |
| 数据量 | 较大(结构化克隆) | 仅字符串 | 任意 |
| 实时性 | ⚡ 即时 | 同步触发但有延迟感 | ⚡ 即时 |
| 发送者接收 | ❌ 不接收自己 | ❌ 不触发自己 | ✅ 可接收 |
| 复杂度 | ⭐ 简单 | ⭐ 简单 | ⭐⭐⭐ 复杂 |
| 适用场景 | 实时同步、聊天、状态广播 | 简单状态同步 | 复杂共享状态 |
BroadcastChannel API 在主流现代浏览器中得到广泛支持:
同源要求:BroadcastChannel 严格遵循同源策略。只有协议、域名、端口完全相同的上下文才能通过同一频道通信。
隔离说明:
数据安全:数据仅在客户端内存中传输,不经过服务器。使用结构化克隆算法,函数和DOM节点无法传递,天然防止XSS攻击向量通过消息传播。
Q:为什么我发送的消息自己看不到?
A:这是 BroadcastChannel 的设计特性——发送者不会收到自己广播的消息。你需要在另一个标签页中打开同一页面才能看到接收效果。
Q:如何检测其他标签页是否还在线?
A:BroadcastChannel 本身不提供标签页存活检测。需要自行实现心跳机制(如本工具所做的),定期广播心跳消息,超时未收到则认为离线。
Q:能发送多大数据?
A:理论上可以发送较大的数据(受结构化克隆算法和内存限制),但建议保持在几百KB以内以保证性能。大文件应使用 IndexedDB + 通知机制。
Q:关闭标签页时需要做什么?
A:建议在 beforeunload 事件中发送告别消息并调用 channel.close(),让其他标签页及时感知到离线。
Q:能否跨域通信?
A:不能。跨域通信需要使用 postMessage API 配合 iframe 或其他方案。
获取和释放命名锁,观察多个标签页如何排队等待资源访问。
在主线程和 Worker 之间使用 SharedArrayBuffer 和 Atomics 进行同步通信。
配置内容和位置,生成使用最新HTML popover属性的轻量弹窗代码,无需JavaScript。
基于简单WebSocket服务,多人同时在同一画布上绘图,远程协作。
构建 Promise 链并显示每个 then/catch 的执行时间与状态,帮助理解微任务调度。
编写Brainfuck代码,以可视化的方式步进执行,观察活动纸带和指针。
并列播放所有CSS内置缓动函数(ease, linear等)的动画效果,方便对比选择。
选择或输入多个开源许可证,查看它们组合在闭源或开源项目中的兼容性矩阵与义务。
勾选需要展示的选项(接受/拒绝/设置),生成纯净HTML/JS代码,自行套用样式。
模拟资源请求,对比ETag值,展示返回304 Not Modified的缓存协商机制,理解HTTP缓存。
添加、列出和删除内容索引中的条目,展示离线可用内容。
绑定动画进度到滚动位置,交互式调整参数,直观理解scroll-timeline和view-timeline。
在布满干扰物的图片中寻找并点击目标物品,记录用时。
触发系统原生分享,支持分享文本、链接与文件,检查浏览器兼容性与支持级别。
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
粘贴带参数的URL,以表格形式列出所有Query参数与值。
可视化Flexbox容器和子项的所有属性及选项,鼠标悬停预览效果。
搜索CSS属性,显示其在主流浏览器的支持范围和前缀需求,快速避免踩坑。
加载Lottie动画JSON文件,播放并控制速度、方向,预览动效效果。
通过Web MIDI API连接键盘,实时显示收到的音符开/关与控制器变化。
上传一组图片,设定每张展示秒数和转场,生成WebM视频幻灯。
在线YAML与JSON格式互相转换,适用于配置文件与数据交换,前端解析安全快速。
回答关于再发布、开源、专利等要求,工具推荐最合适的开源许可证。
分别使用主线程Canvas和OffscreenCanvas在Worker中渲染动画,对比FPS和流畅度。
批量将文本中的<,>,&,等转换为HTML实体,或反向还原,包含选项保留已转义实体。
输入 HTML 或网址,提取所有标题标签,生成文档大纲树,检测跳跃和缺失。
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
显示文本中的非换行空格、全角空格等隐藏字符映射。
在页面上叠加可拖拽的半透明网格线,辅助网格布局对齐。
在线Base32编码解码,实现字符串与Base32格式互转,支持RFC 4648标准,前端实时处理。