// 1. 創(chuàng)建全局唯一的廣播頻道（頻道名自定義，需確保所有窗口一致）
const channel = new BroadcastChannel('read-count-sync');

// 2. 發(fā)送消息（數(shù)據(jù)變化時調(diào)用，如閱讀數(shù)+1）
export function sendReadCount(count) {
  channel.postMessage({
    type: 'READ_COUNT_UPDATE', // 消息類型（區(qū)分不同同步內(nèi)容）
    data: count // 要同步的閱讀數(shù)
  });
}

// 3. 接收消息（其他窗口發(fā)送消息時觸發(fā)，用于更新本地數(shù)據(jù)）
export function onReadCountUpdate(callback) {
  // 監(jiān)聽頻道消息
  channel.onmessage = (e) => {
    // 只處理閱讀數(shù)更新的消息
    if (e.data.type === 'READ_COUNT_UPDATE') {
      callback(e.data.data); // 把最新的閱讀數(shù)傳給回調(diào)函數(shù)
    }
  };

  // 銷毀頻道（避免內(nèi)存泄漏，在組件卸載時調(diào)用）
  return () => {
    channel.close();
  };
}

<template>
  <div class="read-page">
    <h2>當(dāng)前閱讀數(shù)：{{ readCount }}</h2>
    <button @click="handleRead">點擊閱讀（+1）</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { sendReadCount } from '@/utils/channel';

// 本地閱讀數(shù)狀態(tài)（初始值可從接口/緩存獲取）
const readCount = ref(0);

// 閱讀操作：更新本地數(shù)據(jù) + 廣播通知其他窗口
const handleRead = () => {
  readCount.value += 1;
  // 發(fā)送最新的閱讀數(shù)到廣播頻道
  sendReadCount(readCount.value);
};
</script>

<template>
  <!-- 彈框組件：展示閱讀數(shù) -->
  <van-dialog v-model:show="dialogShow" title="閱讀統(tǒng)計">
    <p>當(dāng)前閱讀數(shù)：{{ readCount }}</p>
  </van-dialog>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { onReadCountUpdate } from '@/utils/channel';

// 彈框顯示狀態(tài)（假設(shè)默認(rèn)打開）
const dialogShow = ref(true);
// 本地閱讀數(shù)狀態(tài)（初始值可從接口/緩存獲?。?
const readCount = ref(0);

// 監(jiān)聽閱讀數(shù)更新：收到其他窗口的消息后，更新本地數(shù)據(jù)
const destroyChannel = onReadCountUpdate((newCount) => {
  readCount.value = newCount; // 無需刷新，實時更新彈框內(nèi)容
});

// 組件卸載時銷毀廣播頻道（避免內(nèi)存泄漏）
onUnmounted(() => {
  destroyChannel();
});
</script>

// 存儲的 key（自定義，需所有窗口一致）
const READ_COUNT_KEY = 'read-count';

// 1. 更新閱讀數(shù)并觸發(fā) storage 事件
export function updateReadCount(count) {
  // 修改 LocalStorage（會觸發(fā)其他窗口的 storage 事件）
  localStorage.setItem(READ_COUNT_KEY, JSON.stringify({
    value: count,
    timestamp: Date.now() // 避免舊數(shù)據(jù)覆蓋（可選）
  }));
}

// 2. 監(jiān)聽閱讀數(shù)變化
export function onReadCountChange(callback) {
  // 監(jiān)聽 storage 事件
  const handleStorage = (e) => {
    // 只處理閱讀數(shù)相關(guān)的存儲變化
    if (e.key === READ_COUNT_KEY) {
      const { value } = JSON.parse(e.newValue); // 最新的閱讀數(shù)
      callback(value);
    }
  };

  window.addEventListener('storage', handleStorage);

  // 移除監(jiān)聽（組件卸載時調(diào)用）
  return () => {
    window.removeEventListener('storage', handleStorage);
  };
}

// 3. 獲取當(dāng)前閱讀數(shù)（初始化時用）
export function getCurrentReadCount() {
  const data = localStorage.getItem(READ_COUNT_KEY);
  return data ? JSON.parse(data).value : 0;
}

<script setup>
import { ref } from 'vue';
import { updateReadCount, getCurrentReadCount } from '@/utils/storageSync';

// 初始化：從 LocalStorage 獲取當(dāng)前閱讀數(shù)
const readCount = ref(getCurrentReadCount());

const handleRead = () => {
  readCount.value += 1;
  // 更新 LocalStorage，觸發(fā)其他窗口同步
  updateReadCount(readCount.value);
};
</script>

<script setup>
import { ref, onUnmounted } from 'vue';
import { onReadCountChange, getCurrentReadCount } from '@/utils/storageSync';

const dialogShow = ref(true);
// 初始化：從 LocalStorage 獲取初始值
const readCount = ref(getCurrentReadCount());

// 監(jiān)聽 storage 事件，同步數(shù)據(jù)
const removeListener = onReadCountChange((newCount) => {
  readCount.value = newCount; // 實時更新彈框
});

// 組件卸載時移除監(jiān)聽
onUnmounted(() => {
  removeListener();
});
</script>

// Worker 線程：管理所有窗口的連接和消息轉(zhuǎn)發(fā)
const connections = new Set(); // 存儲所有窗口的連接

// 監(jiān)聽窗口連接
self.onconnect = (e) => {
  const port = e.ports[0]; // 獲取當(dāng)前窗口的通信端口
  connections.add(port); // 加入連接集合

  // 監(jiān)聽窗口發(fā)送的消息
  port.onmessage = (msg) => {
    if (msg.data.type === 'READ_COUNT_UPDATE') {
      // 轉(zhuǎn)發(fā)消息到所有其他窗口
      connections.forEach(conn => {
        if (conn !== port) { // 不發(fā)給自己
          conn.postMessage(msg.data);
        }
      });
    }
  };

  // 窗口斷開連接時移除
  port.onmessageerror = () => {
    connections.delete(port);
  };
  port.onerror = () => {
    connections.delete(port);
  };
};

// 1. 創(chuàng)建 SharedWorker 實例
const worker = new SharedWorker(new URL('@/workers/readSync.worker.js', import.meta.url));
const port = worker.port; // 獲取通信端口
port.start(); // 啟動端口通信

// 2. 發(fā)送閱讀數(shù)更新
export function sendReadCount(count) {
  port.postMessage({
    type: 'READ_COUNT_UPDATE',
    data: count
  });
}

// 3. 接收其他窗口的更新
export function onReadCountUpdate(callback) {
  port.onmessage = (e) => {
    if (e.data.type === 'READ_COUNT_UPDATE') {
      callback(e.data.data);
    }
  };

  // 銷毀連接（組件卸載時調(diào)用）
  return () => {
    port.close();
  };
}

// 窗口 A 發(fā)送
import { sendReadCount } from '@/utils/workerSync';

// 窗口 B 接收
import { onReadCountUpdate } from '@/utils/workerSync';