// 1. 创建一个 MessageChannel 实例（相当于建立一条通信管道）
const channel = new MessageChannel();

// 2. 从管道中获取两个相互关联的端口（port1 和 port2 是“一对”）
const port1 = channel.port1;
const port2 = channel.port2;

// 3. 端口1 发送消息（可传字符串、对象等结构化数据）
port1.postMessage('你好，我是 port1！');

// 4. 端口2 监听并接收消息
port2.onmessage = (event) => {
  console.log('port2 收到消息：', event.data); // 输出“你好，我是 port1！”

  // 5. 端口2 也能回复消息（双向通信）
  port2.postMessage('收到啦，port1！');
};

// 6. 端口1 接收端口2 的回复
port1.onmessage = (event) => {
  console.log('port1 收到回复：', event.data); // 输出“收到啦，port1！”
};

// 主线程代码
const worker = new Worker('worker.js'); // 新建 Worker
const channel = new MessageChannel(); // 创建通信管道

// 把 port2 传给 Worker（通过 postMessage 的“转移列表”，确保端口唯一）
worker.postMessage('初始化通信端口', [channel.port2]);

// 主线程通过 port1 与 Worker 通信
channel.port1.onmessage = (event) => {
  console.log('主线程收到 Worker 消息：', event.data);
};

// 主线程给 Worker 发消息
channel.port1.postMessage({ type: 'FETCH_DATA', url: '/api/data' });

// ------------------------------
// worker.js（Worker 线程代码）
self.onmessage = (event) => {
  // 接收主线程传来的 port2
  if (event.data === '初始化通信端口') {
    const port = event.ports[0]; // 拿到 port2

    // Worker 通过 port 接收主线程消息
    port.onmessage = async (e) => {
      if (e.data.type === 'FETCH_DATA') {
        // 模拟请求数据
        const res = await fetch(e.data.url);
        const data = await res.json();

        // 把数据发回主线程
        port.postMessage({ type: 'DATA_SUCCESS', data });
      }
    };
  }
};

// 用 MessageChannel 实现“微任务调度”
function scheduleMicroTask(task) {
  const { port1, port2 } = new MessageChannel();

  // port1 收到消息后执行任务
  port1.onmessage = () => {
    task();
    port1.close(); // 执行完关闭端口，避免内存泄漏
  };

  // 发送一条空消息，触发 port1 的回调
  port2.postMessage('run');
  port2.close();
}

// 使用示例：
console.log('同步代码开始');
scheduleMicroTask(() => {
  console.log('微任务执行（MessageChannel）');
});
setTimeout(() => {
  console.log('宏任务执行（setTimeout）');
}, 0);
console.log('同步代码结束');

// 执行顺序：
// 1. 同步代码开始
// 2. 同步代码结束
// 3. 微任务执行（MessageChannel）
// 4. 宏任务执行（setTimeout）

// 主线程代码（页面中）
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then((registration) => {
    // 注册成功后，创建 MessageChannel
    const channel = new MessageChannel();

    // 把 port2 传给 Service Worker
    registration.active.postMessage('绑定 SW 通信端口', [channel.port2]);

    // 主线程通过 port1 接收 SW 消息（比如缓存更新结果）
    channel.port1.onmessage = (event) => {
      console.log('主线程收到 SW 消息：', event.data);
      if (event.data.type === 'CACHE_UPDATED') {
        alert('缓存已更新，下次访问更快速！');
      }
    };

    // 主线程给 SW 发消息（比如触发缓存更新）
    channel.port1.postMessage({
      type: 'UPDATE_CACHE',
      urls: ['/index.html', '/style.css'],
    });
  });
}

// ------------------------------
// sw.js（Service Worker 代码）
self.addEventListener('message', (event) => {
  if (event.data === '绑定 SW 通信端口') {
    const port = event.ports[0]; // 拿到主线程传来的 port2

    // SW 接收主线程消息（比如处理缓存更新）
    port.onmessage = async (e) => {
      if (e.data.type === 'UPDATE_CACHE') {
        try {
          // 模拟更新缓存
          const cache = await caches.open('v2');
          await cache.addAll(e.data.urls);

          // 给主线程回复“缓存更新成功”
          port.postMessage({ type: 'CACHE_UPDATED', success: true });
        } catch (err) {
          port.postMessage({ type: 'CACHE_ERROR', error: err.message });
        }
      }
    };
  }
});