new BroadcastChannel()，BroadcastChannel API使用介绍

简述：当今的网络应用程序通常需要实现实时通信以提高用户体验。从2016年开始，BroadcastChannel API就成为了一种更简单，更容易实现的方法，它可以用于跨窗口、跨标签页和跨框架之间的通信。它使得多个客户端能够订阅同一个消息频道，并且在其中一个客户端发送消息后，所有订阅该频道的客户端都会收到相同的消息，今天介绍一下如何使用BroadcastChannel API。

一、BroadcastChannel API基本使用

1、创建 BroadcastChannel 实例，只需要调用new BroadcastChannel()构造函数，并传递一个唯一的频道名称。

//my-channel为频道名称
const channel = new BroadcastChannel('my-channel');

2、发送信息，要向其它客户端发送消息，可以使用postMessage()方法。

//传递消息
channel.postMessage('Hello, World!');

3、要监听消息，可以通过订阅"message"事件来实现。

//监听消息
channel.addEventListener('message', event => { 
    console.log('Received message:', event.data);
});

4、关闭 BroadcastChannel，当不再需要使用BroadcastChannel时，应该调用close()方法来关闭它。

//关闭频道
channel.close();

二、完整示例

1、下面是一个简单的例子，展示了如何使用BroadcastChannel实现跨窗口通信

// 创建 BroadcastChannel 实例
const channel = new BroadcastChannel('my-channel'); 

// 向其他客户端发送消息 
channel.postMessage('Hello, World!'); 

// 监听消息 channel.addEventListener('message', event => { 
console.log('Received message:', event.data);
}); 

// 关闭 BroadcastChannel
window.addEventListener('unload', () => { channel.close(); });

2、在这个例子中，我们创建了一个名为“my-channel”的频道，向频道发送了一条消息，并在另一个窗口中订阅该频道以接收消息。当窗口关闭时，我们调用了close()方法来关闭BroadcastChannel。

小结，BroadcastChannel API提供了一种简单的方法来实现跨窗口、跨标签页和跨框架之间的通信，而无需使用WebSocket或SSE。它是一个非常便捷的工具，可以帮助我们将实时通信功能集成到我们的Web应用程序中，欢迎补充。