问题标签 [broadcast-channel]

我正在寻找一种方法，如何在浏览器中的多个选项卡或窗口之间进行通信（在同一个域上，而不是CORS上）而不留下痕迹。有几种解决方案：

1. 使用窗口对象
2. 留言
3. 饼干
4. 本地存储

第一个可能是最糟糕的解决方案 - 您需要从当前窗口打开一个窗口，然后您只能在保持窗口打开的情况下进行通信。如果您在任何窗口中重新加载页面，您很可能会丢失通信。

第二种方法，使用 postMessage，可能会启用跨域通信，但它遇到与第一种方法相同的问题。您需要维护一个窗口对象。

第三种方式，使用 cookie，在浏览器中存储一些数据，这可以有效地看起来像向同一域上的所有窗口发送消息，但问题是您永远无法知道所有选项卡是否已经读取“消息”在清理之前。您必须实施某种超时来定期读取 cookie。此外，您还受到最大 cookie 长度的限制，即 4 KB。

第四种方案，使用localStorage，似乎克服了cookies的限制，甚至可以使用事件监听。接受的答案中描述了如何使用它。

在 2018 年，公认的答案仍然有效，但现代浏览器有一个更新的解决方案，即使用 BroadcastChannel。有关如何使用 BroadcastChannel 在选项卡之间轻松传输消息的简单示例，请参阅其他答案。

我必须将数据从子窗口广播到新窗口起源的父模式弹出控制器

BroadcastChannel 消息具有 timeStamp 属性。timeStamp 属性是一个数字（之前的示例是 769585.9000000637、14569.200000027195、305355.4000000004）。您可以通过将以下代码复制/粘贴到控制台中来获得自己的感觉。

该数字来自哪里，它是什么意思，以及如何将其解析为有用的日期或时间或日期时间？

我的应用程序中有两个 html 页面。这两个页面都将在单独的浏览器窗口中打开，其中一个将面向操作员，另一个将面向客户。主页（面向操作员）使用BroadcastChannel API发送广播消息，辅助页面不断显示更新，它收到了。这工作正常。我正在尝试创建加载面向客户的页面的 Python CEF 应用程序。页面加载，但两个页面现在无法通信。

我是否正在尝试 CEF 或 BoradcastChannel 不支持的东西？

我正在尝试使用BroadcastChannel API在两个浏览器选项卡/窗口之间进行通信。通信似乎在两个角度服务实例之间工作，但未显示对可观察值的更改。我正在尝试主要使用async管道来实现这一目标。

我在StackBlitz上演示了我的问题

我有两个使用路由器显示的组件。(control和display)

我有一个服务 ( MessagingService)，我有一个BehaviorSubject和BroadcastChannel API- 通信。该服务被注入到这两个组件中。

当我打开两个选项卡（一个 in/control和一个 in /display）时，我可以增加 in的值并在控制台/control中接收新值，/display但不会更新这些值。

捆绑：<p>service value: {{ messenger.value$ | async }}</p>

注射：constructor(private messenger: MessagingService) { }

所以问题是，我做错了什么？我进行了额外的订阅display并触发了next调用，但异步绑定没有得到更新。我还在MessageEvent同一个选项卡中看到正确的数据值正确。

编辑：附加测试表明，当按下更改本地值的按钮时，值会更新。所以这似乎是变更检测的问题。

我正在编写一个 nodejs 脚本。我使用worker_threads 和BroadcastChannel 创建了一个worker。我无法将消息从我的主线程发送到工作线程。但是，我可以将消息从 Worker 发送到主线程。

以下是我的 main.js 代码

以下是 worker.js 中的代码

我正在开发将在带有两个监视器（垂直设置）的终端上运行的网络应用程序。在终端上安装了 linux mint。我需要在 2 个不同的显示器上打开 2 个不同的 google-chrome 实例，但在同一个会话中。

到目前为止，我已经达到了这一点：

第二个脚本

它确实：打开两个不同的谷歌浏览器窗口并全屏打开它们。

但是，如果他们共享配置文件（在本例中为 --user-data-dir=/dev/shm/Chrome），他们将在同一显示器上打开。

如果它们是不同的文件夹，那么它们将在不同的监视器上打开，但它们不会共享相同的会话，我确实需要进一步开发。我打算使用广播频道 api，示例可以在这里找到：https ://github.com/irekrog/broadcast-channel-api-simple-example 。如果 Chrome 不共享会话，则无法与广播频道通信。

注意：还有标签 --window-position=X,Y 似乎不起作用，如果它们在同一个会话中，只会破坏一切

Windows有这个问题的克隆：How to open two instances of Chrome kiosk mode in different display (Windows)但我需要linux的解决方案，我不相信我可以像那里接受的答案那样访问 WinApi。

任何解决方案或解决方法表示赞赏

问题：

我需要一个客户端 Javascript 解决方案（jQuery 很好），其中一个浏览器窗口/选项卡中的事件可以广播到同一域上的其他窗口/选项卡。例如，如果在选项卡 A 中更新了购物车，则选项卡 B 和 C 会收到通知，以便我们可以更新页面上的一些信息，或者通知用户该页面已过时，或类似的事情。

我试过的：

BroadcastChannel API非常适合我的需求，但在 IE 11 或 Safari 中不起作用。

所以我尝试了这个 polyfill，这样我就可以在任何地方使用 BroadcastChannel API。它在 IE 中有效，但在 Safari 中无效（我相信 BroadcastChannel 仍未定义）。

然后我尝试了 sysend.js，它使用 BroadCastChannel（如果可用），否则使用localStorage. 他们的演示页面在 Safari 中运行良好，但在我的网站上，我发现它在 Safari 9 中运行，但不是 10-12（使用 BrowserStack 和一台运行 Safari 12 的真实 Mac 进行测试）。调试他们的脚本，似乎在不同选项卡中更改时应该触发的存储事件localStorage根本不会触发。但这实际上只是当您document.domain设置时才会出现的问题，我这样做了。

我相信这与这个旧的 Chrome 错误相同。但是，虽然 Chrome 在 2012 年至 2017 年出现了这个问题，但 Safari 显然是在 2017 年左右推出的？

我还没有发现其他人在 Safari 中讨论这个错误，但我可以很容易地证明这一点。打开两个使用相同document.domain值的选项卡并运行以下脚本：

选项卡 A：

选项卡 B：

在 Safari 9 中，选项卡 A 将弹出警报。在 Safari 10+ 中，它不会。

如果我删除document.domain，它可以工作。请注意，我们document.domain在这些页面上使用，但在这种情况下它们实际上位于同一个域中。但是document.domain，整个站点的其他场景都需要它，因此我无法将其删除。

我还尝试查看store.js。它有一个事件系统，但它似乎只能在同一个选项卡中工作（在任何浏览器中）。除非我错过了什么。

document.domain那么，当你有一个集合时，是否有任何 BroadcastChannel polyfill 或类似的库可以在 Safari 10+ 中实际运行？ 或任何其他方式来做到这一点？

笔记：

• 我知道 BroadcastChannel 和“存储”事件localStorage仅针对当前选项卡以外的选项卡触发。那不是我的问题，实际上对我来说是可取的。
• 我还看到一些帖子让我相信依赖于localStorage可能的替代解决方案在 Safari 的隐私浏览模式下不起作用。编辑：看来这已在 Safari 11 中修复，因此它确实有效，但在我的测试中，它没有与任何其他选项卡共享 localStorage，甚至没有与同一窗口中的其他私人选项卡共享。所以这没什么帮助。 理想情况下，一个解决方案也可以解决这个问题，但在这一点上，我会对 Safari 10+ 中对我有用的任何东西感到满意。我确实在store.js项目中看到了一个示例，他们说他们制作了它，因此在这种情况下它会回退到 cookie，因此至少听起来是可能的。
• 我试图考虑其他方法来做到这一点，每隔几秒或某事setInterval检查一次更新。localStorage即使在理论上看起来真的很老套和不可靠（你怎么知道所有页面什么时候都“收到”了更新，所以你可以清除它？）。你怎么知道什么时候用这种 hacky 方式而不是使用的首选方法之一localStorage？Safari 10+ 会报告它支持localStorage，所以你无法真正检测到它，对吧？它“支持”它，只是无法正常工作。

我需要在指向同一站点的同一浏览器的 2 个选项卡之间共享一些信息。我正在使用 BroadcastChannel.onmessage 事件处理程序，详情如下： https ://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel/onmessage

在我定义的发件人选项卡javascript代码中：

在接收选项卡中：

我的代码在 Chrome 中运行良好，但在 Firefox 中没有任何作用（Windows 下新安装的最新版本 70）。我在上面给出的链接中的兼容性图表表明它应该在 Firefox 版本 38 上运行。

问题是，我不确定如何调试它。我在控制台中没有任何错误消息。我不知道是不是发件人代码没有发送任何东西。但显然接收代码没有被触发，所以我猜 .onmessage 事件没有被检测到。如果发送了消息，我在哪里可以看到 javascript 控制台？

BroadcastChannel除了将事件侦听器附加到它之外，有没有办法使用 Chrome DevTools 来查看发生了message什么，这样我就可以看到谁在postMessage做什么？