最新HTML BroadcastChannel API引荐
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引荐的更多相关文章
- 最新百度音乐api
一直都想做网络音乐播放器,但是自己又没有服务器,根本就不能实现,也没那个能力实现.唯一的办法就是借助别人的API. 网上公布的API特别少,像能够直接得到音乐文件的真是地址的几乎没有,有的也只是截取流 ...
- Github获取仓库最新Release版本号API
package me.chunsheng.hongbao.utils; import android.content.Context; import android.content.Intent; i ...
- Simsimi 小黄鸡机器人最新无限制接口api simsimi机器人接口api 微信公众号
一.什么是Simsimi? simsimi公司是提供智能服务,其中一个服务是simsimi聊天机器人服务,每天有超过百万的用户聊天,国内最大的搜索引擎——百度的产品siri使用的就是simsimi提供 ...
- Android最新版本号与API级别对应关系
Android版本号与API级别对应关系表 名称 版本号 API等级 发布时间 BuildVersion 2012-11-01 BuildVersionCodes.JellyBeanMr1 Jell ...
- React实战教程之从零开始手把手教你使用 React 最新特性Hooks API 打造一款计算机知识测验App
项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hoo ...
- Android api SmsMessage类createFromPdu(byte[] pdu) is depracted(不推荐使用,过时的)
我想实现一个,监听功能--当手机收到相关短信,触发一些时间,程序中 SmsMessage smsMessage = SmsMessage.createFromPdu((byte[]) obj); cr ...
- 如何通过Azure Service Management REST API管理Azure服务
通过本文你将了解: 什么是Azure Service Management REST API 如何获取微软Azure 订阅号 如何获取Azure管理证书 如何调用Azure Service Manag ...
- 使用 JavaScript File API 实现文件上传
概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【九】——API变了,客户端怎么办?
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现 ...
随机推荐
- form 为什么上传文件enctype现场
FORM要素enctype属性指定表单数据server当提交所使用的编码类型,默认默认值它是"application/x-www-form-urlencoded". 这样的编码方式 ...
- C++ STL简化了编程
图1.STL和c++标准模板库 作为C++标准必不可少的一部分,STL应该是渗透在C++程序的角角落落里的. STL不是实验室里的宠儿.也不是程序猿桌上的摆设.她的激动人心并不是昙花一现.本教程旨在 ...
- 2014 ACM湖南匹配10会议省赛
2014湖南游戏..... 1:牡丹江Regional有些球队没来的冲突 2:题目比較水 3:队友神勇发挥 最终在开局不利的情况下完毕了翻盘,拿到了第二名.....没有抓住机会顺势夺冠还是非常遗憾的. ...
- Extjs GridPanel 几点说明
1. 在Ext中,表格控件必须包括列定义信息,并指定表格的数据存储器.列信息由columns定义,而数据存储器有store定义. 2. store负责把各种各样的原始数据(JSON对象数组等等)转换成 ...
- 【MySQL案件】ERROR 1418
1.1.1. ERROR 1418 [环境的叙述性说明] mysql5.0.67 [问题叙述性说明] 当它来到创建存储过程ERROR 1418一个错误. # 创建函数SQL声明 CREATE FUNC ...
- latex如何输入正确的 双引号
latex当输入双引号,假设直接用双引号键在键盘上.玩过顺-handed. 引述左输入法是正确的:按两次"Tab在之上,数字1左边的键".至于后面行情,该方法是一样的老,这是两次单 ...
- Android:创建耐磨应用 - 定义自己的布局
创建自己的自定义布局(Creating Custom Layouts) 本文介绍如何创建自己的自定义通知和使用可穿戴UI库来创建自己的自定义布局同时你还需要知道耐磨设计标准(Wear Design P ...
- uva 592 Island of Logic (收索)
Island of Logic The Island of Logic has three kinds of inhabitants: divine beings that always tel ...
- 泛泰A900 刷4.4中国民营TWRP2.7.1.1版本 支持自己主动识别移动版本号(世界上第一)
因本人手上的A900S已砖, 所以临时弄不了ROM了. 先上传之前已经弄好的刷4.4专用的新版TWRP recovery 2.7.1.1 这个版本号是我自己定义的,为差别之前公布的2.7.0.0版( ...
- ASP.NET MVC 3: Razor中的@:和语法
原文 ASP.NET MVC 3: Razor中的@:和语法 [原文发表地址] ASP.NET MVC 3: Razor’s @: and <text> syntax[原文发表时间] De ...