BroadcastChannel 握手机制的方法

// src/utils/window-sync.ts

// 定义消息协议
type SyncMessage<T = any> = 
  | { type: 'CHILD_READY'; id: string }
  | { type: 'PARENT_DATA'; id: string; payload: T };

interface SyncOptions {
  timeout?: number; // 超时时间，默认 5000ms
}

/**
 * 【父窗口用】发送数据给新开的子窗口
 * @param channelName 频道名称 (必须与子窗口一致)
 * @param targetId 目标窗口/面板的唯一ID (用于过滤)
 * @param data 要发送的数据
 * @param options 配置项
 */
export function sendToChild<T>(
  channelName: string,
  targetId: string,
  data: T,
  options: SyncOptions = {}
): Promise<void> {
  const { timeout = 5000 } = options;

  return new Promise((resolve, reject) => {
    const channel = new BroadcastChannel(channelName);
    let timer: any;

    // 清理函数
    const cleanup = () => {
      channel.close();
      clearTimeout(timer);
    };

    // 1. 设置超时机制 (防止子窗口没打开，一直卡死在这里)
    timer = setTimeout(() => {
      cleanup();
      reject(new Error(`[WindowSync] Send timeout: Child window "${targetId}" did not respond in ${timeout}ms`));
    }, timeout);

    // 2. 监听消息
    channel.onmessage = (event: MessageEvent<SyncMessage>) => {
      const { type, id } = event.data;

      // 等待 "CHILD_READY" 信号，且 ID 必须匹配
      if (type === 'CHILD_READY' && id === targetId) {
        // 3. 发送数据
        channel.postMessage({
          type: 'PARENT_DATA',
          id: targetId,
          payload: data,
        } as SyncMessage<T>);

        // 4. 完成
        cleanup();
        resolve();
      }
    };
  });
}

/**
 * 【子窗口用】接收来自父窗口的数据
 * @param channelName 频道名称
 * @param myId 自己的唯一ID
 * @param options 配置项
 */
export function receiveFromParent<T>(
  channelName: string,
  myId: string,
  options: SyncOptions = {}
): Promise<T> {
  const { timeout = 5000 } = options;

  return new Promise((resolve, reject) => {
    const channel = new BroadcastChannel(channelName);
    let timer: any;

    const cleanup = () => {
      channel.close();
      clearTimeout(timer);
    };

    // 1. 设置超时
    timer = setTimeout(() => {
      cleanup();
      reject(new Error(`[WindowSync] Receive timeout: Parent did not send data for "${myId}"`));
    }, timeout);

    // 2. 监听父窗口发来的数据
    channel.onmessage = (event: MessageEvent<SyncMessage<T>>) => {
      const { type, id, payload } = event.data;

      if (type === 'PARENT_DATA' && id === myId && payload !== undefined) {
        cleanup();
        resolve(payload);
      }
    };

    // 3. 主动发送 "我准备好了" 信号
    // 稍微延迟一点，确保父窗口的监听器已经 ready (虽然通常父窗口早就 ready 了)
    setTimeout(() => {
      channel.postMessage({
        type: 'CHILD_READY',
        id: myId,
      } as SyncMessage);
    }, 50);
  });
}