Javascript: 获取 BroadcastChannel 订阅者数

Question

如何判断广播频道是否存在及其订阅者数量？

我们有一个产品 link，一些 chrome 页面选项卡正在订阅广播频道。想看看有多少人在听。

const bc = new window.BroadcastChannel('channel_name');

资源：

https://medium.com/javascript-in-plain-english/using-javascript-and-the-broadcast-channel-api-a3134739781d

使用Angular Typescript环境，可能有库函数

Answer 1

没有 built-in 方法来获取通过同一 BroadcastChannel 连接的活动端口的数量。

您可以自己设置一些东西，例如，通过使用某种 ping 方法，所有端口都会响应，而提问者只需要在给定时间内计算响应，但这有点麻烦，会使所有内容异步并且实际上仅为此计数使用 LocalStorage 似乎是最简单的方法。

您可以在 localStorage 中保存您将打开的每个频道的当前计数。

在每个新连接之前，页面可以只检查该值，因为它将在可以通过 BroadcastChannel 进行通信的上下文之间共享。

const active_connections = localStorage[ channel_name ] || 0;

然后在连接时，它只需要更新那个值。

if( active_connections < max_count ) {
  const channel = new BroadcastChannel( channel_name );
  localStorage[ channel_name ] = active_connections + 1;
}

最棘手的是在通道关闭时减少该计数。为此，您需要挂钩 beforeunload 事件：

addEventListener( 'beforeunload', (evt) => {
  localStorage[ channel_name ] --;
} );

请注意，如果您的代码确实调用了 channel.close()，那么您也应该添加一行来更新该计数，并禁用 beforeunload 一个。

（您仍然可以运行 ping 方式来确保计数仍然正确，因为例如，如果页面崩溃，beforeunload 可能不会触发）。

我应该注意到我不明白为什么你需要做这样的事情，可能是你的设计有问题，你应该仔细检查一下，也许可以打开一个关于它)

Javascript: 获取 BroadcastChannel 订阅者数

Javascript: Get BroadcastChannel Subscriber Count

javascript

google-chrome

typescript

angular

broadcast-channel