// 發(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]);

// 通過(guò) 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'
});

// 接收端（所有同源標(biāo)簽頁(yè)自動(dòng)接收）
const channel = new BroadcastChannel('alarm_sync_channel');

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

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

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

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

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

// 用戶在 100ms 內(nèi)快速修改購(gòu)物車
for (let i = 0; i < 10; i++) {
  sessionStorage.setItem('cart_qty', i);  // 快速寫(xiě)入 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'});  // 時(shí)間 T1
sessionStorage.setItem('msg', {id: 2, data: 'message 2'});  // 時(shí)間 T2
sessionStorage.setItem('msg', {id: 3, data: 'message 3'});  // 時(shí)間 T3

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

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

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

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

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

// ========== 消息隊(duì)列包裝類 ==========
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);
// 頁(yè)面刷新...
// newWindow 變量被重置，無(wú)法繼續(xù)通信

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

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

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

// ? 無(wú)法建立通信
// 主窗口沒(méi)有對(duì)新窗口的引用
// 新頁(yè)面無(wú)法與主窗口通信

// ? 無(wú)法直接通信
// 新窗口不知道要連接到哪個(gè)通道

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

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

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

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

// ?? 可以但復(fù)雜
// 需要為每個(gè)窗口建立單獨(dú)的 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();

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

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

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

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

// 3 個(gè)窗口都需要定時(shí)輪詢
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);

// 問(wèn)題：3 個(gè)窗口都在輪詢，消耗 CPU
// 有消息丟失風(fēng)險(xiǎn)（版本號(hào)被覆蓋）

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

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

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

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

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

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

// 用戶清空購(gòu)物車
function clearCart() {
  state.cartItems = [];
  clearCartAPI();
  
  // ? 通知其他標(biāo)簽頁(yè)購(gòu)物車已清空
  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)聽(tīng)購(gòu)物車同步消息
  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(`購(gòu)物車已更新：${productId} 的數(shù)量變?yōu)?${quantity}`);
    } 
    else if (type === 'CART_CLEARED') {
      // 購(gòu)物車被清空，更新UI顯示
      updateCartStatus('empty');
      proxy.$message.warning('購(gòu)物車已在其他標(biāo)簽頁(yè)被清空');
    }
  };
});

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

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

// 更新購(gòu)物車狀態(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(() => {
  // ? 必須關(guān)閉，否則會(huì)泄漏內(nèi)存
  channel.close();
  channel = null;
});

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

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

// ? 避免：傳遞整個(gè)商品對(duì)象（包含無(wú)關(guān)信息）
// syncChannel.postMessage(item);

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

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

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

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

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

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

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

// 多個(gè)門(mén)店系統(tǒng)標(biāo)簽頁(yè)同時(shí)打開(kāi)
const inventoryChannel = new BroadcastChannel('inventory_sync');

// 門(mén)店 A 在標(biāo)簽頁(yè) 1 掃描商品入庫(kù)
inventoryChannel.postMessage({
  type: 'STOCK_IN',
  productId: 'SKU-123',
  quantity: 50,
  location: 'warehouse-1',
  timestamp: Date.now(),
});

// 門(mén)店 B 在標(biāo)簽頁(yè) 2 自動(dòng)收到更新
inventoryChannel.onmessage = (event) => {
  if (event.data.type === 'STOCK_IN') {
    updateInventory(event.data);
    showNotification(`庫(kù)存已更新：${event.data.quantity}件`);
  }
};

const orderChannel = new BroadcastChannel('order_sync');

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

// 客服頁(yè)面在標(biāo)簽頁(yè) 2 自動(dòng)獲取最新?tīng)顟B(tài)
orderChannel.onmessage = (event) => {
  updateOrderUI(event.data);
  notifyCustomer(`訂單 ${event.data.orderId} 已${event.data.status}`);
};

const userSettingsChannel = new BroadcastChannel('user_settings_sync');

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

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

const dashboardChannel = new BroadcastChannel('analytics_dashboard');

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

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

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));