<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 標(biāo)簽頁 Home：寫入數(shù)據(jù)
  localStorage.setItem("message", "Home Page");
});
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // 標(biāo)簽頁 About：監(jiān)聽變化
  window.addEventListener("storage", (event) => {
    if (event.key === "message") {
      console.log("收到消息:", event.newValue);
    }
  });
});
</script>

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <el-button @click="sendMessage">發(fā)送消息</el-button>
  </div>
</template>

<script setup>
const sendMessage = () => {
  // 標(biāo)簽頁 Home：發(fā)送消息
  //   1. 創(chuàng)建 BroadcastChannel 實例
  // 要使用 BroadcastChannel，首先需要創(chuàng)建一個 BroadcastChannel 實例，并指定一個頻道名稱。頻道名稱是一個字符串，用于標(biāo)識不同的通信頻道。這里的頻道就是 "chat"。
  const channel = new BroadcastChannel("chat");

  //   2. 發(fā)送消息
  // 使用 postMessage 方法向指定頻道發(fā)送消息。消息可以是任何可以序列化的數(shù)據(jù)類型，如字符串、對象、數(shù)組等。
  channel.postMessage("Home Message");
};
</script>

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  const channel = new BroadcastChannel("chat");
  //   3. 接收消息
  // 通過監(jiān)聽 message 事件來接收其他上下文發(fā)送到該頻道的消息。
  channel.onmessage = (event) => {
    console.log("收到消息:", event.data); // 監(jiān)聽消息
  };
});
</script>

<template>
  <div>
    <h1>WebSocket 示例</h1>
    <el-button @click="connectWebSocket">連接 WebSocket</el-button>
    <el-button @click="sendMessage" :disabled="!socket">發(fā)送消息</el-button>
    <el-button @click="closeWebSocket" :disabled="!socket">關(guān)閉連接</el-button>
    <ul>
      <li v-for="(message, index) in receivedMessages" :key="index">
        {{ message }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 存儲 WebSocket 實例
const socket = ref(null);
// 存儲接收到的消息
const receivedMessages = ref([]);

// 連接 WebSocket
const connectWebSocket = () => {
  // 創(chuàng)建 WebSocket 實例，這里以 echo.websocket.org 為例，它是一個公共的 WebSocket 測試服務(wù)器，省去了自己搭建服務(wù)器的麻煩
  socket.value = new WebSocket("wss://echo.websocket.org");

  // WebSocket 連接成功時觸發(fā)
  socket.value.onopen = () => {
    console.log("WebSocket 連接成功");
    receivedMessages.value.push("WebSocket 連接成功");
  };

  // 接收到服務(wù)器消息時觸發(fā)
  socket.value.onmessage = (event) => {
    console.log("接收到消息:", event.data);
    receivedMessages.value.push(event.data);
  };

  // WebSocket 連接關(guān)閉時觸發(fā)
  socket.value.onclose = () => {
    console.log("WebSocket 連接已關(guān)閉");
    receivedMessages.value.push("WebSocket 連接已關(guān)閉");
    socket.value = null;
  };

  // WebSocket 發(fā)生錯誤時觸發(fā)
  socket.value.onerror = (error) => {
    console.error("WebSocket 發(fā)生錯誤:", error);
    receivedMessages.value.push("WebSocket 發(fā)生錯誤");
  };
};

// 發(fā)送消息到服務(wù)器
const sendMessage = () => {
  if (socket.value) {
    const message = "Hello, WebSocket!";
    socket.value.send(message);
    receivedMessages.value.push(`發(fā)送消息: ${message}`);
  }
};

// 關(guān)閉 WebSocket 連接
const closeWebSocket = () => {
  if (socket.value) {
    socket.value.close();
  }
};
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header">SharedWorker 通信示例</div>
    </template>
    <el-button id="sendMessageButton" @click="sendMessage"
      >發(fā)送消息到 SharedWorker</el-button
    >
    <el-card v-if="response" style="margin-top: 20px">
      <template #header>
        <div>響應(yīng)內(nèi)容</div>
      </template>
      <div>{{ response }}</div>
    </el-card>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 創(chuàng)建 SharedWorker 實例，指定工作線程腳本文件路徑
const worker = new SharedWorker("sharedWorker.js");

// 存儲接收到的響應(yīng)
const response = ref("");

const sendMessage = () => {
  const message = "Hello, SharedWorker!";
  // 向 SharedWorker 發(fā)送消息
  worker.port.postMessage(message);
  console.log("向 SharedWorker 發(fā)送消息:", message);
};

onMounted(() => {
  // 監(jiān)聽 SharedWorker 的消息事件
  worker.port.onmessage = function (event) {
    const newResponse = event.data;
    console.log("從 SharedWorker 接收到響應(yīng):", newResponse);
    // 更新響應(yīng)內(nèi)容
    response.value = newResponse;
  };

  // 啟動端口通信
  worker.port.start();
});
</script>

// sharedWorker.js 文件，需要放在 public
// 創(chuàng)建一個消息通道，用于在不同上下文和工作線程之間通信
self.onconnect = function (e) {
  // 獲取端口對象，用于接收和發(fā)送消息
  const port = e.ports[0];

  // 監(jiān)聽端口的消息事件
  port.onmessage = function (event) {
    const message = event.data;
    console.log("SharedWorker 接收到消息:", message);

    // 向發(fā)送消息的端口回復(fù)消息
    const response = `SharedWorker 已收到消息: ${message}`;
    port.postMessage(response);
  };
};