问题标签 [broadcast-channel]

我可能已经为自己回答了这个问题，但我需要进行理智检查......

我有一个标签每 500 毫秒通过广播频道广播到另一个标签。第二个选项卡设置为接收广播并在控制台日志中打印它们。

发送选项卡：

接收标签：

我观察到以下情况：无论我为什么设置 queueInterval 时间，接收选项卡都不会每 1,000 毫秒接收一次以上的广播。

这是广播频道的正常行为还是可以以小于 1,000 毫秒的间隔接收消息？

我正在测试BroadcastChannel功能，但遇到了麻烦。我打开两个 Chrome 窗口和每个窗口的开发工具。在控制台上我写：

我可以检查 z 并且它具有保存到 onmessage 道具的功能，所以一切看起来都很好。但是，当我测试时：

在其中一个控制台中，另一个控制台中没有任何显示。我希望由于两个 Chrome 窗口都订阅了广播频道blarg并且具有控制台记录发布的消息的功能，我会看到消息sweet显示在另一个控制台中，但没有任何反应。

所以两个问题：

我不能BroadcastChannel像这样在 devtools 控制台中测试界面吗？

如果是这样，我对 BroadcastChannel 的工作方式有何遗漏？

如何在 Angular Typescript 中使用广播频道？我们在两个浏览器窗口之间发送数据（这是每个 UX 设计）。下面出现错误。为什么财产不存在？

尝试在第二个组件中连续接收数据，无论何时发送某些东西。

阅读此资源：https ://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

发件人组件正在执行以下操作：

接收组件：

错误：“BroadcastChannel”类型上不存在属性“productName”。

假设我有一堆同源窗口或选项卡A、B、C、D和E，它们之间没有相互引用。（例如，用户独立打开它们）。假设A向其他人发送BroadcastChannel消息，因此D需要将一些数据发送回A，理想情况下不涉及B、C或E。

这是否可能，使用任何消息传递 API？

广播消息事件中有一个event.source属性，在这种情况下，它看起来好像应该包含一个WindowProxy或MessagePort对象，但是（至少在我对 Firefox 78 的测试中）它只是null。还有一个ports数组，但那是空的。

...我知道您可以启动一个 SharedWorker 来为每个窗口分配一个唯一的 ID 并充当在它们之间传递消息的中转站，但是 (a) 对于所需的功能来说这似乎非常复杂，并且 (b) 每个以这种方式发送的消息将需要 2 次跃点，从窗口到 sharedWorker 再返回到窗口，两次都跨越线程边界，并且（通常）两次都被序列化和反序列化 - 即使两个窗口共享同一个 javascript 线程！所以效率不是很高。

这似乎是一件显而易见的事情，我发现很难相信我没有明显的遗漏......但我看不到它，如果是这样的话！

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

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

资源：

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

选项卡或窗口之间的通信

使用 Angular Typescript 环境，也许它有一个库函数

我正在尝试了解如何在用户加入频道后捕获事件后端。我的意思是在对 Private 或 Presence 通道进行身份验证之后。

例如，在那之后：

成功进行，我希望有可能捕捉到一个事件以知道用户加入了频道（不仅仅是前端）。

关于如何处理它的任何提示？

参考：https ://laravel.com/docs/6.x/broadcasting#joining-presence-channels

Broadcast Channel API似乎是postMessage或Channel Messaging API（又名MessageChannel ）的替代品。我在最近版本的 Google Chrome 中成功地使用了这两者来发送共享数组缓冲区；但是，我无法使用广播通道 API 发送共享数组缓冲区。

Mozilla 在https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel的文档引用了https://html.spec.whatwg.org/multipage/web-messaging.html#broadcastchannel的规范，其中说：

对于目的地中的每个目的地...

3. 让数据为 StructuredDeserialize(serialized, targetRealm)。如果这引发异常，则捕获它，使用 MessageEvent 在目的地触发名为 messageerror 的事件，并将 origin 属性初始化为 sourceOrigin 的序列化，然后中止这些步骤。

StructuredDeserialize 在https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize中定义，似乎暗示它涵盖了 SharedArrayBuffers：

12. 否则，如果serialized.[[Type]]是“SharedArrayBuffer”，那么：如果targetRealm对应的agent集群没有serialized.[[AgentCluster]]，那么抛出“DataCloneError”DOMException。否则，将 value 设置为 targetRealm 中的新 SharedArrayBuffer 对象，其 [[ArrayBufferData]] 内部槽值已序列化。[[ArrayBufferData]] 并且其 [[ArrayBufferByteLength]] 内部槽值已序列化。[[ArrayBufferByteLength]]。

阅读本文，在我看来这应该可行，但我收到一个消息事件，其中数据只是null. 如果这是一个安全问题，我希望得到一个 messageerror 事件而不是 message 事件。

这是我的最小测试用例：

broadcast-test.html（必须从 http 服务器提供 - 不能通过 file:// 工作）

广播-test.js

观察到的控制台输出：（Windows 10 上的 Chrome 84.0.4147.135）

主要收到{你好：“来自工人”}

工人收到空

谷歌浏览器的实现是不正确的，还是我误解了规范？

BroadcastChannel 是 Angular 中的一个原生函数。它不需要导入额外的库。你只是这样声明它......

你发这样的消息...

你会像这样收到它们......

这适用于所有 Apple 设备上除 Safari 之外的所有浏览器，我们从中获得：

有什么建议么？

谢谢。

我想通过调用在我的主选项卡中启动屏幕共享getDisplayMedia，然后将其克隆到我从我的应用程序（使用window.open）打开的另一个弹出窗口，有效地同时显示两次屏幕截图。

根据这个线程，这个片段应该可以工作 - 但它不会：

我错过了什么？

我正在使用 sessionStorage 来保留身份验证信息，并且需要将此信息复制到正在打开的其他选项卡。我创建了一个代码框来重新创建问题。我没有在这篇文章中包含代码，因为它很长。

在另一个窗口中打开 Dashboard 链接时，由于弹出错误，它没有呈现。

编辑： 我在下面包含了所有必要的代码。

应用程序.js

仪表板.js

主页.js

登录.js

请让我知道这可能是什么原因。