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,然而,毕竟现在还没有浏览器真正实现该功能的支持,我们只有翘首以待了。

原文:http://ilikekillnerds.com/2015/03/all-about-the-html-broadcastchannel-api/


作者:天地会珠海分舵 
微信公众号:TechGoGoGo 
微博:http://weibo.com/techgogogo 
CSDN:http://blog.csdn.net/zhubaitian

最新HTML BroadcastChannel API引荐的更多相关文章

  1. 最新百度音乐api

    一直都想做网络音乐播放器,但是自己又没有服务器,根本就不能实现,也没那个能力实现.唯一的办法就是借助别人的API. 网上公布的API特别少,像能够直接得到音乐文件的真是地址的几乎没有,有的也只是截取流 ...

  2. Github获取仓库最新Release版本号API

    package me.chunsheng.hongbao.utils; import android.content.Context; import android.content.Intent; i ...

  3. Simsimi 小黄鸡机器人最新无限制接口api simsimi机器人接口api 微信公众号

    一.什么是Simsimi? simsimi公司是提供智能服务,其中一个服务是simsimi聊天机器人服务,每天有超过百万的用户聊天,国内最大的搜索引擎——百度的产品siri使用的就是simsimi提供 ...

  4. Android最新版本号与API级别对应关系

     Android版本号与API级别对应关系表 名称 版本号 API等级 发布时间 BuildVersion 2012-11-01 BuildVersionCodes.JellyBeanMr1 Jell ...

  5. React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App

    项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...

  6. Android api SmsMessage类createFromPdu(byte[] pdu) is depracted(不推荐使用,过时的)

    我想实现一个,监听功能--当手机收到相关短信,触发一些时间,程序中 SmsMessage smsMessage = SmsMessage.createFromPdu((byte[]) obj); cr ...

  7. 如何通过Azure Service Management REST API管理Azure服务

    通过本文你将了解: 什么是Azure Service Management REST API 如何获取微软Azure 订阅号 如何获取Azure管理证书 如何调用Azure Service Manag ...

  8. 使用 JavaScript File API 实现文件上传

    概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...

  9. 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【九】——API变了,客户端怎么办?

    系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现 ...

随机推荐

  1. PowerShell 批量导入/导出Active Directory

    PowerShell 批量导入/导出Active Directory         近期由于公司要求,须要导入20个供应商.20个客户到AD域中,刚開始手动添�了2个供应商,2个客户.可是感觉费时费 ...

  2. string 至 Color 转换演示示例:

    string colorstr = "#FF4D4D4D";string hex = colorstr.ToString().Replace("#", &quo ...

  3. Action、Category、Data、Extras知识具体解释

    开头 Intent作为联系各Activity之间的纽带,其作用并不仅仅仅仅限于简单的数据传递.通过其自带的属性,事实上能够方便的完毕非常多较为复杂的操作.比如直接调用拨号功能.直接自己主动调用合适的程 ...

  4. RH253读书笔记(5)-Lab 5 Network File Sharing Services

    Lab 5 Network File Sharing Services Goal: Share file or printer resources with FTP, NFS and Samba Se ...

  5. Cloudera impala简单介绍及安装具体解释

    一.Impala简单介绍 Cloudera Impala对你存储在Apache Hadoop在HDFS,HBase的数据提供直接查询互动的SQL.除了像Hive使用同样的统一存储平台,Impala也使 ...

  6. java中 try return finally return(转)

    finally块里面的代码一般都是会执行的,除非执行 System.exit(int),停止虚拟机,断电. 1.若try代码块里面有return ,假设要return 的值 是A,A为基本类型或者被f ...

  7. Android高级编程笔记(四)深入探讨Activity(转)

    在应用程序中至少包含一个用来处理应用程序的主UI功能的主界面屏幕.这个主界面一般由多个Fragment组成,并由一组次要Activity支持.要在屏幕之间切换,就必须要启动一个新的Activity.一 ...

  8. SSH深度历险(三) EJB Session Bean有状态和无状态的差别与联系

    刚開始对两种sessionbean存在误解.觉得有状态是实例一直存在,保存每次调用后的状态,并对下一次调用起作用.而觉得无状态是每次调用实例化一次,不保留用户信息.细致分析并用实践检验后,会发现,事实 ...

  9. Android使用HttpClient方法和易错问题

    HttpClient为Android开发人员提供了跟简洁的操作Http网络连接的方法,在连接过程中也有两种方式,get和post,先看一下怎样实现的 默认是get方式 //先将參数放入List,再对參 ...

  10. (大数据工程师学习路径)第三步 Git Community Book----高级技能

    一.创建新的空分支 1.创建新的空分支 在偶尔的情况下,你可能会想要保留那些与你的代码没有共同祖先的分支.例如在这些分支上保留生成的文档或者其他一些东西.如果你需要创建一个不使用当前代码库作为父提交的 ...