Four ways to implement cross-tab page communication

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

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // Tag Page Home: Write data  ("message", "Home Page");
});
</script>

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

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  // Tag page About: Listen to changes  ("storage", (event) => {
    if ( === "message") {
      ("Message received:", );
    }
  });
});
</script>

<!-- src/views/ -->
<template>
  <div>
    <h1>Home Page</h1>
    <el-button @click="sendMessage">Send a message</el-button>
  </div>
</template>

<script setup>
const sendMessage = () => {
  // Tag Page Home: Send Message  // 1. Create a BroadcastChannel instance  // To use BroadcastChannel, you first need to create a BroadcastChannel instance and specify a channel name.  The channel name is a string that identifies different communication channels.  The channel here is "chat".  const channel = new BroadcastChannel("chat");

  // 2. Send a message  // Use the postMessage method to send messages to the specified channel.  The message can be any data type that can be serialized, such as strings, objects, arrays, etc.  ("Home Message");
};
</script>

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

<script setup>
import { onMounted } from "vue";
onMounted(() => {
  const channel = new BroadcastChannel("chat");
  // 3. Receive message  // Receive messages sent to the channel by other contexts by listening to the message event.   = (event) => {
    ("Message received:", ); // Listen to messages  };
});
</script>

<template>
  <div>
    <h1>WebSocket Example</h1>
    <el-button @click="connectWebSocket">connect WebSocket</el-button>
    <el-button @click="sendMessage" :disabled="!socket">Send a message</el-button>
    <el-button @click="closeWebSocket" :disabled="!socket">关闭connect</el-button>
    <ul>
      <li v-for="(message, index) in receivedMessages" :key="index">
        {{ message }}
      </li>
    </ul>
  </div>
</template>

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

//Storing WebSocket instancesconst socket = ref(null);
// Store the received messageconst receivedMessages = ref([]);

// Connect to WebSocketconst connectWebSocket = () => {
  // Create a WebSocket instance. Take this as an example. It is a public WebSocket test server, which saves you the trouble of building a server by yourself.   = new WebSocket("wss://");

  // Triggered when the WebSocket connection is successful   = () => {
    ("WebSocket connection is successful");
    ("WebSocket connection is successful");
  };

  // Triggered when a server message is received   = (event) => {
    ("Message received:", );
    ();
  };

  // Triggered when the WebSocket connection is closed   = () => {
    ("WebSocket connection closed");
    ("WebSocket connection closed");
     = null;
  };

  // Triggered when an error occurs in WebSocket   = (error) => {
    ("An error occurred in WebSocket:", error);
    ("An error occurred in WebSocket");
  };
};

// Send a message to the serverconst sendMessage = () => {
  if () {
    const message = "Hello, WebSocket!";
    (message);
    (`Send a message: ${message}`);
  }
};

// Close WebSocket connectionconst closeWebSocket = () => {
  if () {
    ();
  }
};
</script>

<template>
  <el-card>
    <template #header>
      <div class="card-header">SharedWorker Communication example</div>
    </template>
    <el-button  @click="sendMessage"
      >Send a message to SharedWorker</el-button
    >
    <el-card v-if="response" style="margin-top: 20px">
      <template #header>
        <div>Response content</div>
      </template>
      <div>{{ response }}</div>
    </el-card>
  </el-card>
</template>

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

// Create a SharedWorker instance and specify the path of the worker thread script fileconst worker = new SharedWorker("");

//Storing the received responseconst response = ref("");

const sendMessage = () => {
  const message = "Hello, SharedWorker!";
  // Send a message to SharedWorker  (message);
  ("Send a message to SharedWorker:", message);
};

onMounted(() => {
  // Listen to SharedWorker message events   = function (event) {
    const newResponse = ;
    ("Received from SharedWorker:", newResponse);
    // Update the response content     = newResponse;
  };

  // Start port communication  ();
});
</script>

// Files need to be placed in public// Create a message channel for communication between different contexts and worker threads = function (e) {
  // Get port object for receiving and sending messages  const port = [0];

  // Listen to the message event on the port   = function (event) {
    const message = ;
    ("SharedWorker received message:", message);

    // Reply to the message to the port where the message is sent    const response = `SharedWorker Message received: ${message}`;
    (response);
  };
};