// 建立頻道
const bc = new BroadcastChannel('app_bus');
?
// 接收
bc.onmessage = (event) => {
  // event.data 支持 Structured Clone（可傳對象、ArrayBuffer、MessagePort 等）
  console.log('[BC] recv:', event.data);
};
?
// 發(fā)送
bc.postMessage({ type: 'PING', ts: Date.now() });
?
// 關(guān)閉
bc.close();

// 監(jiān)聽（只在“其他”標(biāo)簽頁觸發(fā)）
window.addEventListener('storage', (e) => {
  if (e.key === 'app_bus') {
    const payload = JSON.parse(e.newValue || 'null');
    if (payload) handleMessage(payload);
  }
});
?
// 發(fā)送（會同步寫磁盤；同頁不觸發(fā) storage 事件）
function send(msg) {
  localStorage.setItem('app_bus', JSON.stringify({
    ...msg,
    id: crypto.randomUUID(),
    ts: Date.now(),
  }));
}

// 打開子窗口并握手
const child = window.open('/child.html', 'child');
?
window.addEventListener('message', (event) => {
  // 嚴(yán)格校驗來源
  if (event.origin !== location.origin) return;
  console.log('from child:', event.data);
});
?
// 向子窗口發(fā)送
child?.postMessage({ type: 'PING' }, location.origin);

const ports = new Set();
?
onconnect = (e) => {
  const port = e.ports[0];
  ports.add(port);
?
  port.onmessage = (evt) => {
    // 廣播給其他端
    for (const p of ports) {
      if (p !== port) p.postMessage(evt.data);
    }
  };
?
  port.start();
?
  port.addEventListener('close', () => ports.delete(port));
};

const sw = new SharedWorker('/worker.js');
const port = sw.port;
port.start();
?
port.onmessage = (e) => console.log('[SW] recv:', e.data);
port.postMessage({ type: 'HELLO' });

self.addEventListener('message', (event) => {
  // 簡單群發(fā)
  self.clients.matchAll({ includeUncontrolled: true, type: 'window' })
    .then((clients) => {
      clients.forEach((client) => client.postMessage(event.data));
    });
});
?
self.addEventListener('activate', (e) => self.clients.claim());

navigator.serviceWorker.register('/sw.js');
?
navigator.serviceWorker.addEventListener('message', (e) => {
  console.log('[SW] recv:', e.data);
});
?
function sendViaSW(data) {
  navigator.serviceWorker.ready.then((reg) => {
    reg.active?.postMessage(data);
  });
}

interface BusMessage<T=any> {
  id: string;           // 唯一 ID（UUID v4）
  ts: number;           // 發(fā)送時間戳
  type: string;         // 主題/事件名
  payload: T;           // 載荷
  ack?: boolean;        // 是否為 ACK 消息
  to?: string;          // 指定接收者（可選）
  from?: string;        // 發(fā)送者實例 ID
}

// 簡化版：事件訂閱、可靠發(fā)送（可自行擴展 ACK/重試）
?
type Handler = (msg: any) => void;
?
export class CrossTabBus {
  private channelName: string;
  private bc?: BroadcastChannel;
  private swReady: Promise<ServiceWorkerRegistration> | null = null;
  private lsKey: string;
  private handlers: Map<string, Set<Handler>> = new Map();
  private instanceId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
  private seen = new Set<string>();
?
  constructor(channelName = 'app_bus') {
    this.channelName = channelName;
    this.lsKey = `${channelName}__ls`;
?
    // 1) BroadcastChannel
    try {
      this.bc = new BroadcastChannel(channelName);
      this.bc.onmessage = (e) => this._onMessage(e.data);
    } catch {}
?
    // 2) Service Worker（可選）
    if ('serviceWorker' in navigator) {
      this.swReady = navigator.serviceWorker.ready.catch(() => null as any);
      navigator.serviceWorker.addEventListener('message', (e) => this._onMessage(e.data));
    }
?
    // 3) localStorage 兜底
    window.addEventListener('storage', (e) => {
      if (e.key === this.lsKey && e.newValue) {
        try { this._onMessage(JSON.parse(e.newValue)); } catch {}
      }
    });
  }
?
  on(type: string, fn: Handler) {
    if (!this.handlers.has(type)) this.handlers.set(type, new Set());
    this.handlers.get(type)!.add(fn);
    return () => this.off(type, fn);
  }
?
  off(type: string, fn: Handler) {
    this.handlers.get(type)?.delete(fn);
  }
?
  emit(type: string, payload: any) {
    const msg = { id: crypto.randomUUID?.() || String(Math.random()), ts: Date.now(), type, payload, from: this.instanceId };
    this._fanout(msg);
  }
?
  private _fanout(msg: any) {
    // BroadcastChannel
    if (this.bc) {
      try { this.bc.postMessage(msg); } catch {}
    }
?
    // Service Worker（向 active SW 發(fā)送）
    this.swReady?.then((reg) => reg?.active?.postMessage?.(msg)).catch(() => {});
?
    // localStorage 兜底
    try { localStorage.setItem(this.lsKey, JSON.stringify(msg)); } catch {}
  }
?
  private _onMessage(msg: any) {
    if (!msg || typeof msg !== 'object') return;
    if (this.seen.has(msg.id)) return; // 去重
    this.seen.add(msg.id);
    // LRU 簡化：超過一定大小清理
    if (this.seen.size > 2000) this.seen.clear();
?
    const set = this.handlers.get(msg.type);
    set?.forEach((fn) => fn(msg.payload));
  }
}

import { CrossTabBus } from './CrossTabBus';
?
const bus = new CrossTabBus('my_app_bus');
?
bus.on('user:logout', () => {
  // 做登出清理
  location.reload();
});
?
// 比如收到服務(wù)端事件，廣播給所有標(biāo)簽頁
function onServerLogout() {
  bus.emit('user:logout', { reason: 'token_expired' });
}

const bc = new BroadcastChannel('leader');
const myId = crypto.randomUUID();
let isLeader = false;
let lastBeat = Date.now();
?
function tryElect() {
  // 若長時間未收到 leader 心跳，則自薦
  if (Date.now() - lastBeat > 3000 && !isLeader) {
    bc.postMessage({ type: 'ELECT', id: myId, t: Date.now() });
  }
}
?
bc.onmessage = (e) => {
  const m = e.data;
  if (m.type === 'BEAT') lastBeat = Date.now();
  if (m.type === 'ELECT') {
    // 簡單“Bully”：ID 更大者勝出
    if (m.id > myId) isLeader = false; else isLeader = true;
  }
};
?
setInterval(() => {
  tryElect();
  if (isLeader) bc.postMessage({ type: 'BEAT', id: myId });
}, 1000);

navigator.locks.request('singleton-task', { mode: 'exclusive' }, async () => {
  // 只有獲得鎖的標(biāo)簽頁會執(zhí)行這里
  await runBackgroundJob();
});