Vue之前端Broadcast Channel API的简单使用

前端Broadcast Channel API的简单使用

Broadcast Channel API 是一个用于在不同窗口或标签页之间进行通信的 API。它允许一个页面向另一个页面发送消息，这些页面可以在同一浏览器实例中打开，或者在不同的浏览器实例中打开。

以下是 Broadcast Channel API 的简单使用步骤：
1.创建广播频道： 在发送消息的页面中，首先需要创建一个 Broadcast Channel，可以使用 new BroadcastChannel(channelName) 构造函数。channelName 是频道的名称，所有使用相同名称的页面都能收到彼此的消息。

// 发送消息的页面
const channel = new BroadcastChannel('myChannel');

2.发送消息： 通过广播频道发送消息。可以使用 postMessage 方法来发送任意数据。

// 发送消息的页面
const message = 'Hello from Page 1!';
channel.postMessage(message);

3.接收消息： 在接收消息的页面中，同样需要创建一个同名的广播频道，并通过 addEventListener 监听消息事件。

// 接收消息的页面
const channel = new BroadcastChannel('myChannel');
//使用方法一：
handleMessage(event) {
  console.log('Received message:', event.data);
}
channel.addEventListener('message', handleMessage);
//使用方法二：
bc.onmessage = (event) => {
 console.log('Received message:', event.data);
};

4.关闭频道： 当不再需要广播频道时，最好在页面关闭或不再需要通信的时候移除监听器，以释放资源。
切记最好在页面关闭或不再需要通信的时候移除监听器，否则重新进入页面时会再次创建一个监听器，上次创建的监听器还存在，这样的话每次进入页面都会创建一个。

//方式一的移除
bc.onmessage=null;
//方式二的关闭和移除
channel.close();
channel.removeEventListener('message', handleMessage);

请注意，使用 Broadcast Channel API 的两个页面必须在同一协议（http 或 https）下，否则无法进行通信。此外，同一页面打开多个标签页也可以通过 Broadcast Channel 进行通信。

这是 Broadcast Channel API 的基本用法，你可以根据需要在不同页面之间传递更复杂的数据。这对于在单页应用程序中或多个窗口之间共享状态非常有用。

5.完整示例
（1）发送消息的页面：

<template>
  <div class="app-container">
  		<input type="text" v-model="message" placeholder="请输入要发送的消息">
        <button @click="sendMessage">发送</button>
  </div>
</template>
<script>
export default {
	data() {
    	return {
    		message: ""
    	};
    },
    methods: {
        sendMessage() {
          // 创建一个名为 "example-channel" 的 Broadcast Channel
          const channel = new BroadcastChannel('example-channel');
          // 发送消息到频道
          channel.postMessage(this.message);
          // 发送完消息后关闭频道
          channel.close();
          // 清空消息输入框
          this.message = '';
        }
    }
}
</script>

（2）接收消息的页面：

<template>
  <div class="app-container">
  		<p>接收到的消息: {{ receivedMessage }}</p>
  </div>
</template>
<script>
export default {
	data() {
    	return {
    		receivedMessage: ""
    	};
    },
    methods: {
        handleReceivedMessage(event) {
          this.receivedMessage = event.data;
        }
    },
    mounted() {
        const channel = new BroadcastChannel('example-channel');
        // 添加事件监听器
        channel.addEventListener('message', this.handleReceivedMessage);
    },
    beforeDestroy() {
        const channel = new BroadcastChannel('example-channel');
        // 移除事件监听器
        channel.removeEventListener('message', this.handleReceivedMessage);
    }
}
</script>

在这个示例中，我们在Vue实例的 mounted 生命周期钩子中使用 addEventListener 添加了一个名为 “example-channel” 的 Broadcast Channel 的 message 事件监听器。在 beforeDestroy 钩子中，我们使用 removeEventListener 移除了相同的事件监听器，以避免在组件销毁时引起内存泄漏。

这种方式相对于直接使用 channel.onmessage 更符合 Vue 组件的生命周期管理，确保在组件销毁前正确地移除了事件监听器。

文章参考：
vue一个页面改变cookie的值，另一个页面怎么同步监测cookie值的变化，并更新页面数据