// 發(fā)送端（主窗口）
const newWindow = window.open(url, '_blank');
newWindow.postMessage({
  type: 'DATA_UPDATE',
  data: { id: 123 }
}, '*');

// 接收端（新窗口）
window.addEventListener('message', (event) => {
  if (event.origin !== window.location.origin) return;
  if (event.data.type === 'DATA_UPDATE') {
    console.log('收到數(shù)據(jù):', event.data.data);
  }
});

// 發(fā)送端（主窗口）
const newWindow = window.open(url, '_blank');
const { port1, port2 } = new MessageChannel();

// 將 port2 傳給新窗口
newWindow.postMessage({ port: port2 }, '*', [port2]);

// 通過 port1 收發(fā)消息
port1.onmessage = (event) => {
  console.log('收到:', event.data);
};
port1.postMessage({ type: 'SYNC', data: {...} });

// 接收端（新窗口）
window.addEventListener('message', (event) => {
  if (event.ports.length) {
    const port = event.ports[0];
    port.onmessage = (msg) => {
      console.log('接收到:', msg.data);
    };
    port.start();
  }
});

// 發(fā)送端（任意窗口）
const channel = new BroadcastChannel('alarm_sync_channel');

channel.postMessage({
  alarmId: 123,
  deviceId: 456,
  devicePath: '/factory/workshop',
  deviceName: 'Device-A'
});

// 接收端（所有同源標簽頁自動接收）
const channel = new BroadcastChannel('alarm_sync_channel');

channel.onmessage = (event) => {
  const { alarmId, deviceId, devicePath, deviceName } = event.data;
  console.log('自動同步:', { alarmId, deviceId, devicePath, deviceName });
  updateDeviceData(deviceId);
};

// 組件卸載時關閉通道
onUnmounted(() => {
  channel.close();
});

// sessionStorage 只能存一個值
sessionStorage.setItem('cart', data);  // 新值覆蓋舊值
sessionStorage.getItem('cart');         // 始終只能取到最后一個

// 中間的更新消息丟失了

// 接收端每 500ms 檢查一次
setInterval(() => {
  const latest = sessionStorage.getItem('cart');
  // 問題：如果兩次輪詢之間發(fā)生了多條更新，只能看到最后一條
  // 所有中間的更新都丟失了
}, 500);

// 用戶在 100ms 內快速修改購物車
for (let i = 0; i < 10; i++) {
  sessionStorage.setItem('cart_qty', i);  // 快速寫入 0, 1, 2, 3..., 9
}

// 接收端可能只收到：
// - 事件 1：qty = 2
// - 事件 2：qty = 5 
// - 事件 3：qty = 9

// 丟失消息數(shù)：7 條（70% 丟失率）

// 發(fā)送端：快速發(fā)送 3 條消息
sessionStorage.setItem('msg', {id: 1, data: 'message 1'});  // 時間 T1
sessionStorage.setItem('msg', {id: 2, data: 'message 2'});  // 時間 T2
sessionStorage.setItem('msg', {id: 3, data: 'message 3'});  // 時間 T3

// 接收端的處理時間線：
// T1 時刻：storage 事件觸發(fā) → 開始處理第 1 條消息
// T2 時刻：收到新消息，但上一條還沒處理完
// T2 + 50ms：處理完第 1 條，但 storage 值已經是第 3 條了
// 結果：消息 2 和消息 3 被合并，實際上只能讀到消息 3

// 消息丟失數(shù)：2 條（66% 丟失率）

// BroadcastChannel 有事件隊列機制
const channel = new BroadcastChannel('sync');

// 即使接收端忙，消息也會被排隊
channel.postMessage({id: 1});  // ? 隊列中
channel.postMessage({id: 2});  // ? 隊列中
channel.postMessage({id: 3});  // ? 隊列中

channel.onmessage = (event) => {
  // 每條消息都會觸發(fā)單獨的事件
  console.log(event.data.id);  // 輸出: 1, 2, 3 (無丟失)
};

// ========== 消息隊列包裝類 ==========
class StorageMessageQueue {
  constructor(channelName = 'message_queue') {
    this.channelName = channelName;
    this.messageId = 0;
    this.listeners = [];
    this.setupListener();
  }

  setupListener() {
    window.addEventListener('storage', (event) => {
      if (event.key === this.channelName && event.newValue) {
        const message = JSON.parse(event.newValue);
        this.listeners.forEach(cb => cb(message));
        // 清理消息
        sessionStorage.removeItem(this.channelName);
      }
    });
  }

  send(data) {
    const message = {
      id: ++this.messageId,
      timestamp: Date.now(),
      data,
    };
    sessionStorage.setItem(this.channelName, JSON.stringify(message));
  }

  onMessage(callback) {
    this.listeners.push(callback);
  }

  close() {
    this.listeners = [];
  }
}

// ========== 使用方式 ==========
// 發(fā)送端
const queue = new StorageMessageQueue('alarm_sync');
function nextAlarm(row) {
  queue.send({
    alarmId: row.id,
    deviceId: row.deviceId,
  });
}

// 接收端
const queue = new StorageMessageQueue('alarm_sync');
queue.onMessage((message) => {
  updateDevice(message.data.deviceId);
});

// ? 主窗口刷新后，newWindow 引用丟失
const newWindow = window.open(url);
// 頁面刷新...
// newWindow 變量被重置，無法繼續(xù)通信

// ?? 需要重新建立連接
// 主窗口刷新后，原有 port1 失效
// 需要額外的重連機制，增加復雜度

// ? 自動恢復
const channel = new BroadcastChannel('alarm_sync_channel');
// 頁面刷新...
// 自動重新連接到通道
channel.postMessage(data);  // 可以繼續(xù)使用

// ?? 數(shù)據(jù)保留，但需輪詢
sessionStorage.setItem('alarm_sync', JSON.stringify(data));
// 頁面刷新...
// 數(shù)據(jù)仍在，但接收端需輪詢檢測版本號
let lastId = 0;
setInterval(() => {
  const msg = JSON.parse(sessionStorage.getItem('alarm_sync'));
  if (msg?.id > lastId) {
    lastId = msg.id;
    updateDevice(msg.deviceId);
  }
}, 500);  // 延遲 500ms 才能感知

// ? 無法建立通信
// 主窗口沒有對新窗口的引用
// 新頁面無法與主窗口通信

// ? 無法直接通信
// 新窗口不知道要連接到哪個通道

// ? 自動連接
const channel = new BroadcastChannel('alarm_sync_channel');
channel.onmessage = (event) => {
  // 自動接收其他標簽頁的消息，無需任何額外配置
};

// ?? 可見數(shù)據(jù)，但無法感知更新
const data = JSON.parse(sessionStorage.getItem('alarm_sync'));
// 問題：新窗口打開后，無法知道 "有新消息來了"
// 需要定時輪詢或使用其他機制通知

// ? 無法實現(xiàn)優(yōu)雅
const window1 = window.open(url1);
const window2 = window.open(url2);
const window3 = window.open(url3);

// 發(fā)送消息時需要逐一發(fā)送
window1.postMessage(data, '*');
window2.postMessage(data, '*');
window3.postMessage(data, '*');
// 代碼重復，難以維護

// ?? 可以但復雜
// 需要為每個窗口建立單獨的 MessageChannel
const { port1: port1_w1, port2: port2_w1 } = new MessageChannel();
const { port1: port1_w2, port2: port2_w2 } = new MessageChannel();
const { port1: port1_w3, port2: port2_w3 } = new MessageChannel();

// 分別初始化每個連接
window1.postMessage({ port: port2_w1 }, '*', [port2_w1]);
window2.postMessage({ port: port2_w2 }, '*', [port2_w2]);
window3.postMessage({ port: port2_w3 }, '*', [port2_w3]);

// 發(fā)送消息時仍需逐一發(fā)送
port1_w1.postMessage(data);
port1_w2.postMessage(data);
port1_w3.postMessage(data);

// ? 完美支持
const channel = new BroadcastChannel('alarm_sync_channel');
// 所有 3 個診斷頁面都自動監(jiān)聽同一通道
// 發(fā)送一條消息，所有監(jiān)聽者都接收
channel.postMessage(data);
// 簡潔、高效、完全自動化

// ?? 可以但需復雜邏輯
sessionStorage.setItem('alarm_sync_v2', JSON.stringify({
  version: Date.now(),
  data: { deviceId: 456 }
}));

// 3 個窗口都需要定時輪詢
let lastVersion = 0;
setInterval(() => {
  const stored = JSON.parse(sessionStorage.getItem('alarm_sync_v2') || '{}');
  if (stored.version && stored.version > lastVersion) {
    lastVersion = stored.version;
    updateDevice(stored.data.deviceId);
  }
}, 500);

// 問題：3 個窗口都在輪詢，消耗 CPU
// 有消息丟失風險（版本號被覆蓋）

<script setup>
import { onMounted, onUnmounted } from 'vue';

// 創(chuàng)建廣播通道
const syncChannel = new BroadcastChannel('shopping_sync_channel');

onMounted(() => {
  getCartList();
});

onUnmounted(() => {
  // 組件卸載時關閉通道，防止內存泄漏
  syncChannel.close();
});

// 獲取購物車列表
async function getCartList() {
  const res = await fetchCartItems();
  state.cartItems = res.data || [];
}

// 用戶修改購物車中商品的數(shù)量
function updateItemQuantity(item, newQuantity) {
  // 1. 更新本地數(shù)據(jù)
  item.quantity = newQuantity;
  updateCart(item);
  
  // 2. ? 發(fā)送同步消息給其他標簽頁
  syncChannel.postMessage({
    type: 'CART_UPDATED',
    productId: item.productId,
    productName: item.productName,
    quantity: newQuantity,
    price: item.price,
    timestamp: Date.now(),
  });
}

// 用戶清空購物車
function clearCart() {
  state.cartItems = [];
  clearCartAPI();
  
  // ? 通知其他標簽頁購物車已清空
  syncChannel.postMessage({
    type: 'CART_CLEARED',
    timestamp: Date.now(),
  });
}
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue';

const router = useRouter();
const routes = useRoute();

// 創(chuàng)建同名廣播通道
const syncChannel = new BroadcastChannel('shopping_sync_channel');

onMounted(() => {
  // 初始加載商品詳情
  if (routes.query.productId) {
    loadProductDetail(routes.query.productId);
  }
  
  // ? 監(jiān)聽購物車同步消息
  syncChannel.onmessage = (event) => {
    const { type, productId, quantity, timestamp } = event.data;
    
    if (type === 'CART_UPDATED') {
      // 1. 更新 URL 查詢參數(shù)（確保刷新后數(shù)據(jù)一致）
      router.replace({
        path: routes.path,
        query: {
          ...routes.query,
          productId,
          lastUpdate: timestamp,
        },
      });
      
      // 2. 重新加載商品數(shù)據(jù)
      loadProductDetail(productId);
      
      // 3. 顯示同步提示
      proxy.$message.info(`購物車已更新：${productId} 的數(shù)量變?yōu)?${quantity}`);
    } 
    else if (type === 'CART_CLEARED') {
      // 購物車被清空，更新UI顯示
      updateCartStatus('empty');
      proxy.$message.warning('購物車已在其他標簽頁被清空');
    }
  };
});

onUnmounted(() => {
  // 關閉通道，防止內存泄漏
  syncChannel.close();
});

// 加載商品詳情
const loadProductDetail = (productId) => {
  fetchProductDetail(productId).then((res) => {
    state.product = res.data;
    state.productId = productId;
  });
};

// 更新購物車狀態(tài)顯示
const updateCartStatus = (status) => {
  state.cartStatus = status;
};
</script>

// ? 推薦：使用明確的命名規(guī)范
const CHANNEL_NAMES = {
  SHOPPING_SYNC: 'shopping_sync_channel',
  USER_PROFILE: 'user_profile_sync',
  NOTIFICATION_UPDATE: 'notification_update',
  DATA_DASHBOARD: 'data_dashboard_sync',
};

const channel = new BroadcastChannel(CHANNEL_NAMES.SHOPPING_SYNC);

onMounted(() => {
  channel = new BroadcastChannel('sync_channel');
  channel.onmessage = handleMessage;
});

onUnmounted(() => {
  // ? 必須關閉，否則會泄漏內存
  channel.close();
  channel = null;
});

// ? 使用 router.replace() 而非 push()
// 這樣刷新后能恢復到正確的狀態(tài)
router.replace({
  path: routes.path,
  query: {
    ...routes.query,
    deviceId,
  },
});

// ? 只傳遞必要數(shù)據(jù)，減少序列化開銷
syncChannel.postMessage({
  type: 'CART_UPDATED',
  productId: item.productId,
  quantity: newQuantity,
  price: item.price,
  timestamp: Date.now(),
});

// ? 避免：傳遞整個商品對象（包含無關信息）
// syncChannel.postMessage(item);

// BroadcastChannel 僅支持同源通信
// 瀏覽器自動規(guī)避安全隱患，無需手動檢查
// 不同源的頁面無法訪問該通道

// 如果需要跨源，使用 postMessage：
if (event.origin !== window.location.origin) return;

// 檢測 BroadcastChannel 支持
if (typeof BroadcastChannel !== 'undefined') {
  // 使用 BroadcastChannel
  const channel = new BroadcastChannel('sync');
} else {
  // 降級方案：使用 postMessage 或 localStorage
  console.warn('瀏覽器不支持 BroadcastChannel，使用降級方案');
}

// postMessage 跨源通信
newWindow.postMessage(data, 'https://trusted-domain.com');

// 接收端必須驗證來源
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted-domain.com') return;
  // 安全處理消息
});

channel.onmessageerror = (event) => {
  console.error('消息解析錯誤:', event);
};

// 或使用 addEventListener
channel.addEventListener('messageerror', (event) => {
  console.error('消息錯誤:', event);
});

// 多個門店系統(tǒng)標簽頁同時打開
const inventoryChannel = new BroadcastChannel('inventory_sync');

// 門店 A 在標簽頁 1 掃描商品入庫
inventoryChannel.postMessage({
  type: 'STOCK_IN',
  productId: 'SKU-123',
  quantity: 50,
  location: 'warehouse-1',
  timestamp: Date.now(),
});

// 門店 B 在標簽頁 2 自動收到更新
inventoryChannel.onmessage = (event) => {
  if (event.data.type === 'STOCK_IN') {
    updateInventory(event.data);
    showNotification(`庫存已更新：${event.data.quantity}件`);
  }
};

const orderChannel = new BroadcastChannel('order_sync');

// 后臺管理頁面在標簽頁 1 更新訂單狀態(tài)
orderChannel.postMessage({
  orderId: 'ORD-2024-001',
  status: 'shipped',
  trackingNo: 'TRK123456',
  updatedAt: Date.now(),
});

// 客服頁面在標簽頁 2 自動獲取最新狀態(tài)
orderChannel.onmessage = (event) => {
  updateOrderUI(event.data);
  notifyCustomer(`訂單 ${event.data.orderId} 已${event.data.status}`);
};

const userSettingsChannel = new BroadcastChannel('user_settings_sync');

// 用戶在賬戶設置頁面（標簽頁 1）修改主題
userSettingsChannel.postMessage({
  type: 'THEME_CHANGED',
  theme: 'dark',
  userId: '12345',
});

// 所有打開的應用頁面（標簽頁 2、3、4...）自動同步
userSettingsChannel.onmessage = (event) => {
  if (event.data.type === 'THEME_CHANGED') {
    applyTheme(event.data.theme);
    showMessage('主題已切換為深色模式');
  }
};

const dashboardChannel = new BroadcastChannel('analytics_dashboard');

// 數(shù)據(jù)分析工具在后臺收集數(shù)據(jù)（標簽頁 1）
dashboardChannel.postMessage({
  metric: 'daily_sales',
  value: 15000,
  region: 'east',
  timestamp: Date.now(),
});

// 多個儀表板視圖（標簽頁 2、3、4...）自動刷新
dashboardChannel.onmessage = (event) => {
  updateChart(event.data);
  updateDataCard(event.data);
  playNotificationSound(); // 新數(shù)據(jù)到達時提醒
};

const ch = new BroadcastChannel('sync');
ch.postMessage(data);
ch.onmessage = (e) => handle(e.data);

const queue = new StorageMessageQueue('sync');
queue.send(data);
queue.onMessage(handle);

const win = window.open(url);
win.postMessage(data, '*');
window.addEventListener('message', (e) => handle(e.data));