前端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 组件的生命周期管理，确保在组件销毁前正确地移除了事件监听器。
