关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » UI前端 »最新 HTML BroadcastChannel API 分析

    最新 HTML BroadcastChannel API 分析

    2015-03-07 00:00:00 出处:codeceo
    分享

    HTML BroadcastChannel API

    当前浏览器中只有Firefox38唯一能支持BroadcastChannel API(在编写本文的时间点),而Firefox38官方宣称要到2015年5月份才会发布正式版本。这套新的API将会打开一个新的充满可能性的世界,解决我们已有的从postMessage API所继承过来的众多限制。

    BroadcastChannel API作为WHATWG living HTML标准的一部分可以在这里进行详细信息查看。

    什么是BroadcastChannel API

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

    还是不明觉厉?就拿Facebook作为例子吧,假如你现在已经打开了Facebook的一个窗口,但是你此时还没有登录,此时你又打开另外一个窗口进行登录,那么你就可以通知其他窗口/标签页去告诉它们一个用户已经登录了并请求它们进行相应的页面更新。

    本质上说BroadcastChannel API 允许我们在我们不使用sockets和timers的情况下同样可以打造出一个能够自我感知状态变化的应用,这对于一个发布/订阅形式的系统效果尤佳。

    BroadcastChannel API 实战进行时

    创建一个新的 BroadcastChannel

    创建一个新的BroadcastChannel API 是一个易如反掌的事情。你需要做的仅仅是把通道名称作为一个参数传给BroadcastChannel的构造函数然后把它的引用保存到一个变量上面而已。

    let cast = new BroadcastChannel('mychannel');

    发送一个消息通知

    发送一个消息也是一个非常简单的事情,你只需要引用赋有了BroadcastChannel实例的变量(在本示例中就是上面的cast变量)然后调用其postMessage方法就可以了。

    假如你对其他基于发布/订阅的系统很熟悉的话,假如你把postMessage这个成员方法称呼成event emitter也许会更合情合理。

    postMessage方法做的漂亮的地方是你可以用它来发送任何东西。你可以发送一个对象,一个字串,随你便。只要订阅者可以意识到你要发送的是什么事件就行了,好好享受吧。

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

    不像一些更加小鲜肉级别的发布/订阅系统,“主题“是没有原生的实现支持的。意思就是说你并没有一个通道可以把“主题“广播到所有监听的订阅者手上。

    但是,通过编写一些创造性的代码你还是可以模仿这种实现的,你可以使用对象来把“主题“作为对象的一个键,把消息内容作为另外一个键”data”来进行发送。

    消息监听

    “接收者“更通俗的叫法也许应该叫做”订阅者”。一个接收者会对如我们前面为一个特别通道所定义的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,然而,毕竟现在还没有浏览器真正实现该功能的支持,我们只有翘首以待了。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    正版 Windows 11产品密钥怎么查找/查看?

    还有3个月,微软将停止 Windows 10 的更新

    Windows 10 终止支持后,企业为何要立即升级?

    Windows 10 将于 2025年10 月终止技术支持,建议迁移到 Windows 11

    Windows 12 发布推迟,微软正全力筹备Windows 11 25H2更新

    Linux 退出 mail的命令是什么

    Linux 提醒 No space left on device,但我的空间看起来还有不少空余呢

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    IT头条

    公安部:我国在售汽车搭载的“智驾”系统都不具备“自动驾驶”功能

    02:03

    液冷服务器概念股走强,博汇、润泽等液冷概念股票大涨

    01:17

    亚太地区的 AI 驱动型医疗保健:2025 年及以后的下一步是什么?

    16:30

    智能手机市场风云:iPhone领跑销量榜,华为缺席引争议

    15:43

    大数据算法和“老师傅”经验叠加 智慧化收储粮食尽显“科技范”

    15:17

    技术热点

    商业智能成CIO优先关注点 技术落地方显成效(1)

    用linux安装MySQL时产生问题破解

    JAVA中关于Map的九大问题

    windows 7旗舰版无法使用远程登录如何开启telnet服务

    Android View 事件分发机制详解

    MySQL用户变量的用法

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。