最新ui(最新if)

lxf2023-05-08 06:23:02

HTML BroadcastChannel API

目前只有Firefox38可以支持BroadcastChannel API(撰写本文时),Firefox38官方声称正式版要到2015年5月才会发布。这个新的API将打开一个充满可能性的新世界,并解决我们从postMessage API继承的许多限制。

作为WHATWG live HTML标准的一部分,BroadcastChannel API可以在这里查看详情。

什么是BroadcastChannel API?

BroadcastChannel API允许所有窗口、iFrames等。在同一个原始域下和用户代理进行交互。也就是说,如果用户打开同一个网站的两个tab窗口,如果网站内容发生变化,两个窗口都会同时收到更新通知。

还不知道吗?以脸书为例。如果你现在打开了脸书的一个窗口,但是你还没有登录,然后你打开另一个窗口登录,那么你可以通知其他窗口/标签告诉他们有用户登录了,要求他们相应地更新页面

实质上,BroadcastChannel API允许我们创建一个无需使用套接字和计时器就能感知状态变化的应用程序,这对于发布/订阅系统尤其有效。

BroadcastChannel API 实战进行时

创建新的广播频道。

创建新的BroadcastChannel API是小菜一碟。您只需将频道名称作为参数传递给BroadcastChannel的构造函数,然后将其引用保存到一个变量中。

let cast = new BroadcastChannel('mychannel');

发送消息通知

发消息也是很简单的事情。您只需要引用给定BroadcastChannel实例的变量(在本例中,就是上面的cast变量),然后调用它的postMessage方法

如果您熟悉其他基于发布/订阅的系统,那么调用成员方法postMessage事件发射器可能更合理。

postMessage方法的美妙之处在于,你可以用它来发送任何东西。你可以发送一个对象,一个字符串,任何你想要的。只要订阅者能意识到你发的是什么事件,就尽情享受吧。

myObj = {someKey: 'Some value', anotherKey: 'Another value'};cast.postMessage(myObj);

与一些鲜肉级别较小的发布/订阅系统不同,“主题”没有原生实现支持。这意味着你没有一个渠道向所有听众广播这个“话题”。

但是,您仍然可以通过编写一些有创意的代码来模仿这种实现。您可以使用对象将“主题”作为对象的一个键发送,将消息内容作为另一个键“数据”发送。

消息监控

或许“接收者”更通俗的称呼应该叫“订户”。接收器将侦听为特殊频道定义的BroadcastChannel引用变量发出的事件。

cast.onmessage = function (e) { console.log(e); // This should print out the contents of the object we sent above}

关闭连接

假设你非常关心Javascript的性能和资源的消耗(尤其是使用手机的时候)。幸运的是,BroadcastChannel中有一个嵌入式方法可以让您关闭这些连接。

cast.close(); // Close our connection and let the garbage collection free up the memory that was used

浏览器支持

如前所述,目前只有Firefox版本38支持BroadcastChannel API。假设其他浏览器很可能会紧随其后,毕竟这个API很有用。那么对于我们编写这方面的通用应用和游戏应用来说,我们将如鱼得水(紧浏览器支持的出现)

需要注意的是,从一个用户的角度来说,你(目前)基本上是无法获得相关技术支持的。但是,这里有一个浏览器插件,允许您现在使用BroadcastChannel API。不过,毕竟没有浏览器能真正实现这个功能,所以还得拭目以待。

原文:http://ilikekillnders . com/2015/03/all-about-the-html-broadcast channel-API/

作者:天地会珠海分会
微信微信官方账号:Techgogo
微博:/d/file/04/vpop5adb0sk9263

adminjs.cn是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 Adminjs.cn还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 在Adminjs.cn中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!