JavaScript实现浏览器不同标签页通信的原理与实践

// 建立频道
const bc = new BroadcastChannel('app_bus');
​
// 接收
bc.onmessage = (event) => {
  // event.data 支持 Structured Clone（可传对象、ArrayBuffer、MessagePort 等）
  console.log('[BC] recv:', event.data);
};
​
// 发送
bc.postMessage({ type: 'PING', ts: Date.now() });
​
// 关闭
bc.close();

// 监听（只在“其他”标签页触发）
window.addEventListener('storage', (e) => {
  if (e.key === 'app_bus') {
    const payload = JSON.parse(e.newValue || 'null');
    if (payload) handleMessage(payload);
  }
});
​
// 发送（会同步写磁盘；同页不触发 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) => {
  // 严格校验来源
  if (event.origin !== location.origin) return;
  console.log('from child:', event.data);
});
​
// 向子窗口发送
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) => {
  // 简单群发
  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;           // 发送时间戳
  type: string;         // 主题/事件名
  payload: T;           // 载荷
  ack?: boolean;        // 是否为 ACK 消息
  to?: string;          // 指定接收者（可选）
  from?: string;        // 发送者实例 ID
}

// 简化版：事件订阅、可靠发送（可自行扩展 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 发送）
    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();
});
​
// 比如收到服务端事件，广播给所有标签页
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 () => {
  // 只有获得锁的标签页会执行这里
  await runBackgroundJob();
});