new BroadcastChannel()，BroadcastChannel API使用介绍

川长思鸟来 2023-10-09 21:22 84阅读 0赞

#### 简述：当今的网络应用程序通常需要实现实时通信以提高用户体验。从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应用程序中，欢迎补充。**