前端 BroadcastChannel 怎样同步不同标签页状态

不同标签页同步短状态，可以让各页面加入同名 BroadcastChannel，并约定消息类型；用户操作先更新本地，再向其他订阅者广播，收到远端消息只应用状态，不重新广播。频道只承担通知，不承担持久化、历史补发或并发一致性。

下面以阅读主题 light/dark 为例，给出便于停用和排障的适配器。代码是原创示例，不包含真实运行结果。Web 平台规范地址：https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts

先判断是不是同一个通信范围

先确认两个页面在相同协议、主机与端口下，并使用完全相同的频道名。名字相同不等于任何网页都能互通：存储分区也参与通信范围判定。嵌在其他顶层站点中的页面，不能仅凭 iframe 自身同源就假定它能与独立打开的页面通信。

没有消息时，先记录页面来源、顶层嵌入环境、频道名和实例创建位置，再看业务逻辑。可参考 MDN 的通信范围说明。这里不把不同浏览器配置、隐私窗口或不同设备当成共同消息总线。

给短消息定义稳定协议

频道使用 reader-preferences:v1。每条消息带 version、type、source、id 和 theme：version 约束协议版本，type 固定为 theme:set，source 区分当前适配器实例，id 由实例标识与递增序号组成，theme 只接受 light 或 dark。发送纯数据，不把函数、DOM 节点和复杂页面对象塞进消息。

id 不是浏览器要求的字段，而是本例自己的协议设计。seen 保留最近 128 条已处理标识，解决应用重发时的短窗口重复处理；它既不是永久日志，也不能证明业务恰好执行一次。source 和频道名同样不是授权凭证，不承载令牌、口令或敏感业务载荷。

把本地更新与远端接收分开

创建实例的时机应在页面业务初始化阶段，而不是每次渲染、每次点击都创建。以下完整适配器接收 apply 回调，只负责把主题投影到当前页面。实际项目可将回调接入状态库，但不能让状态库订阅器把远端变更再次当成本地操作广播。

// 偏好同步适配器：每个页面只创建一个实例，apply 仅更新本地界面
function createPreferenceSync(apply) {
  const allowed = new Set(["light", "dark"]);
  const seen = new Set();
  let disposed = false;
  let channel = null;
  let source = null;
  let sequence = 0;

  // 无可用通道时保持本地功能；UUID 需要现代安全上下文
  try {
    if ("BroadcastChannel" in globalThis &&
        typeof globalThis.crypto?.randomUUID === "function") {
      source = crypto.randomUUID();
      channel = new BroadcastChannel("reader-preferences:v1");
    }
  } catch (error) {
    console.warn("跨标签同步未启用", error.name);
  }

  function remember(id) {
    seen.add(id);
    // 只做有限窗口去重，不能宣称永久恰好一次
    if (seen.size > 128) seen.delete(seen.values().next().value);
  }

  function receive(event) {
    const m = event.data;
    // 明确协议、字段类型和长度，不直接信任同源脚本的消息
    if (!m || m.version !== 1 || m.type !== "theme:set" ||
        typeof m.source !== "string" || m.source.length > 100 ||
        typeof m.id !== "string" || m.id.length > 160 ||
        !allowed.has(m.theme) || m.source === source || seen.has(m.id)) return;
    remember(m.id);
    apply(m.theme); // 远端接收不调用 setTheme，避免回声广播
  }

  if (channel) {
    channel.addEventListener("message", receive);
    channel.onmessageerror = () => console.warn("偏好消息无法反序列化");
  }

  return {
    setTheme(theme) {
      if (disposed) return false;
      if (!allowed.has(theme)) throw new TypeError("不支持的主题");
      apply(theme); // 发送者需要自行更新，不能等待自己的广播
      if (!channel) return false;
      const id = source + ":" + (++sequence);
      remember(id);
      try {
        channel.postMessage({version: 1, type: "theme:set", source, id, theme});
        return true; // 只表示调用成功，不代表其他页面已收到
      } catch (error) {
        console.warn("偏好消息发送失败", error.name);
        return false;
      }
    },
    dispose() {
      if (disposed) return;
      disposed = true;
      if (channel) {
        channel.removeEventListener("message", receive);
        channel.onmessageerror = null;
        channel.close();
        channel = null;
      }
      seen.clear();
    }
  };
}

// 将适配器交给页面生命周期管理；示例不包含存储或服务端接口
const preferenceSync = createPreferenceSync(theme => {
  document.documentElement.dataset.theme = theme;
});
// 用户操作时调用 preferenceSync.setTheme("dark")
// 页面模块卸载时调用 preferenceSync.dispose()

setTheme 的 true 只说明本次 postMessage 没有同步抛错；它不是确认回执。false 也不代表本地更新失败：无通道或发送失败时，apply 仍然先执行。apply 应保持短小、可重复，并由应用自身处理渲染异常。

发送对象不会收到自己的这次广播，所以本地更新不能依赖 message 回调。这个规则针对对象：同一页面若误建了多个同名实例，其他实例仍可能参与接收。source 检查不是根本修复，保持实例单一、卸载清理才是更直接的措施。

关闭频道并设计停用路径

dispose 会移除监听器、关闭频道、清空去重集合；关闭后该适配器不再发送，也不再更新界面。若业务重新挂载，需要新建实例，不复用已关闭的对象。SPA 组件可以把 dispose 交给实际卸载钩子，应用级适配器则跟随应用生命周期管理。

不要只在每次页面离开时关闭后就不管恢复：页面可能进入往返缓存，恢复路径需要重新建立订阅并重新读取权威状态。本文不加入 pagehide/pageshow 自动逻辑，避免把不同框架生命周期混成一个万能片段。

发布后若发现回声风暴，可先停用同步适配器并调用 dispose，保留本地主题切换和原有持久化逻辑，再定位重复创建或远端回调反向广播的问题。不要用更换频道名掩盖旧实例未清理的问题。

按现象复查并保留状态来源

人工联调可在同一站点打开两个标签页，一边切换主题，观察另一边是否更新；重复发送同一 id 应被短窗口去重；卸载后不应继续处理回调。这些是读者的验证动作，不是本文已经执行的实验。监控只记录协议版本、消息类型、错误名和必要计数，不输出完整敏感载荷。

刷新后怎样恢复状态？

从应用已有持久化层或服务端读取快照，再建立订阅或设计版本化的补偿读取。BroadcastChannel 本身不提供离线补发；快照与订阅之间的竞态需要业务协议处理，示例没有假装解决它。

两个标签页同时修改怎么办？

本例只应用当前收到的合法主题，不保证所有页面最终收敛。需要强一致的业务应由权威来源分配修订号、处理冲突，广播仅通知刷新；不要拿各页 Date.now() 当全局可靠顺序。

浏览器不支持时还能用吗？

示例保留本地更新，但不自动承诺跨页同步；需要时让页面重新取得权威状态，或另外设计并验证降级方案。WHATWG 规范说明了广播对象、结构化序列化及 close 的行为。上线判断应同时看本地功能、同步行为和退出清理，而不是只看 API 是否存在。