广播频道-BroadcastChannel
BroadcastChannel
,就字面意思来言,叫做“广播频道”,官方文档说,该API是用于同源不同页面之间完成通信的功能。
1. 概况
它与window.postMessage
的区别就是,BroadcastChannel
只能用于同源的页面之间进行通信,而window.postMessage
却可以用于任何的页面之间,或者这么说吧,BroadcastChannel
可以认为是window.postMessage
的一个实例,它承担了window.postMessage
的一个方面的功能。
基于BroadcastChannel
的同源策略,那么它就有个问题是,它无法完成跨域的数据传输了,跨域的情况,我们还是安安稳稳的使用window.postMessage
来处理吧。
在进行说明之前,我们首先来看一下,BroadcastChannel
的浏览器支持情况吧,这个才是每个前端开发者们,最关心的问题嘛,caniuse BroadcastChannel。
2. 初始化
BroadcastChannel
是一个构造函数,它的初始化方法非常简单:
var bc = new BroadcastChannel('test_channel');
是的,它只需要一个参数,就是一个字符串,也就是要连接到的频道名称。
既然这个API
的名字叫做Broadcast
,广播,那么我们可以理解它必然有一个广播台,所有的广播实例,都会接入这个广播台(中介者模式中的控制中心),所以,只要在初始化实例时,传入的name值是相同名称的,就会被接入到一个相同的广播频道中。
3. 接收消息
有一些话,是这么说的:兵马未动 粮草先行;工欲善其事,必先利其器等。
对于消息系统来说,完成消息通信的基础,就是你首先要能接收消息,所以这里我们就先看看,如何接收消息,假设我们创建的实例变量为:bc
。那么就可以通过如下的方法接收消息。
bc.onmessage = function(ev){
console.log(ev);
}
其实质是,这个就等于给DOM元素添加了一个onmessage
事件,当接收到其他同源页面相同频道发送的消息时,会触发该事件。
既然类似于一个DOM
的事件,那么回调函数的中的ev
变量,我们也就大概能知道了。它是一个event
的对象,只是该event
不是我们经常用到的MouseEvent
,KeyboardEvent
,TouchEvent
这样我们最常碰到的实例,而是来自MessageEvent
的实例,但不管如何这些事件类型的构造函数,都是继承自Event
,所以很多东西也都是我们最常遇到的,比如看看下面的结构,是否觉得很熟悉:
{
bubbles : false,
cancelBubble : false
cancelable : false
currentTarget : BroadcastChannel {name: "test_channel", onmessageerror: null, onmessage: ƒ}
data : ""
srcElement : BroadcastChannel {name: "test_channel", onmessageerror: null, onmessage: ƒ}
target : BroadcastChannel {name: "test_channel", onmessageerror: null, onmessage: ƒ}
type:"message"
}
只是有些区别的是,这里的currentTarget
,srcElement
,target
都不是DOM
元素,而是我们刚才定义的实例。
当然,BroadcastChannel
继承自EventTarget
,所以我们也可以用以下的方法,来接收这个事件:
bc.addEventListener("message",function(ev){
wrapper.append("<p>2接收:"+ev.data+"</p>");
});
到这里,是不是想到了在刚学习JS
时,绑定事件的三种方式呢?没错,这里少了一种,不能直接在DOM
元素上绑定,因为没有直接对于的DOM
元素啊。
至于上述两种绑定事件的方法,它们的好处,坏处,区别,我姑且认为,看这篇文章的人都是懂得了,这里就不再赘述。
4. 发送消息
可以接收消息了,接下来就可以看看,发送消息的了,发送消息就变得简单了很多。
bc.postMessage(data);
直接使用方面的postMessage
就可以直接发送data
数据到bc
所在的频道,所有接入该频道的页面,都能收到该消息。
至于data
的数据类型,官方文档中说是支持任意的JS
数据类型,但是在不同的浏览器厂商来说,这个实现就有些许差异,有些浏览器厂商可能只是支持传输String
类型的数据,所以使用的时候,尽量还是传输String
类型的吧,如果是对象的话,那么进行一下JSON.stringify(data)
。
发送消息的方法,只要这一种方式而已,虽然BroadcastChannel
也是属于事件系统的一种,按理说也可以直接使用dispatchEvent
方法,来触发postMessage
的动作,但是,我自己尝试了一下,发现并不行,无法发送到频道中心,只能在自己的页面接收到自己也没发送的消息,所以就失去了原有的意义,没有再多花时间,去研究是否可以使用dispatchEvent
完全实现bc.postMessage
的功能,所以,就默认只是记住postMessage
方法吧,简单。
5. 关闭
在初始化实例的时候,是接入广播通道的,而现在就来关闭这个连接吧,简单的使用close
方法既可以,不多说了
bc.close();
6. 其他
BroadcastChannel
的实例中,还有另外一个属性,在我看来,目前是没有什么用处的属性,bc.name
,其实就是你连接的广播频道的名称,比如我们这里的就是:bc.name = "test_channel"
,为什么说没有用呢,因为这个属性是只读的,不能通过修改这个name
的属性值,直接进行切换频道(我只是这么想想)。
广播频道-BroadcastChannel的更多相关文章
- Android框架中的广播机制
一.广播通过Intent发送出去 // 定义广播的意图过滤器 private String action = "com.xxx.demo.Broadcast.STATUS_CHANGED&q ...
- 在后台主机中托管SignalR服务并广播心跳包
什么是后台主机 在之前的 Asp.NETCore 轻松学系列中,曾经介绍过一个轻量级服务主机 IHostedService ,利用 IHostedService 可以轻松的实现一个系统级别的后台服务, ...
- BroadcastReceiver接收电量变化的广播-------在代码中动态创建接受者
本例为动态创建广播接收者即不是在AndroidManifest.xml文件中定义的广播接收着 代码: package com.qf.broadcastreceiver01; import androi ...
- laravel 广播细节讲解
1.应用场景 1.通知(Notification) 或 信号(Signal) 2.通知是最简单的示例,也最经常用到.信号也可看作是通知的一种展现形式,只不过信号没有UI而已. 3.Activity S ...
- 快来,Boom 3D广播功能还能这样用
Boom 3D不仅为用户提供了包括3D立体音效.古典音乐音效在内的多种音效增强功能,而且还为用户提供了广播功能.该广播功能不仅涵盖了国内广播节目,而且还涵盖了国际广播节目. Boom 3D的广播功能还 ...
- Boom 3D的广播有哪些,有啥特色
Boom 3D(Windows系统)不仅为用户提供了包括3D立体音效.古典音乐音效在内的多种音效增强功能,而且还为用户提供了广播功能.该广播功能不仅涵盖了国内广播节目,而且还涵盖了国际广播节目. 接下 ...
- [翻译]Review——How JavaScript works:The building blocks of Web Workers
原文地址:https://blog.sessionstack.com/how-javascript-works-the-building-blocks-of-web-workers-5-cases-w ...
- iOS-推送,证书申请,本地推送
介绍一点点背景资料 众所周知,使用推送通知是一个很棒的.给应用添加实时消息通知的方式.这样做的结局是,开发者和用户之间,彼此永远保持着一种令人愉悦的亲密关系. 然而不幸的是,iOS的推送通知并非那么容 ...
- iOS-推送通知详解
这是一篇编译的文章,内容均出自Parse.com的iOS开发教程,同时作者还提供了视频讲解.本文将带领开发者一步一步向着iOS推送通知的深处探寻,掌握如何配置iOS推送通知的奥义. 介绍一点点背景资料 ...
随机推荐
- Azure SQL Virtual Machine报Login failed for user 'NT Service\SqlIaaSExtension'. Reason: Could not find a login matching the name provided
在一台位于HK的Azure SQL Virtual Machine上修改排序规则,重建系统数据库后,监控发现大量的登录失败告警生成,如下所示: DESCRIPTION: Login failed f ...
- spring-AOP(面向切面编程)-注解方式配置
项目结构: 切面类: package edu.nf.ch12.service.aspect; import org.aspectj.lang.JoinPoint; import org.aspectj ...
- 洗礼灵魂,修炼python(89)-- 知识拾遗篇 —— 进程
进程 1.含义:计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位.说白了就是一个程序的执行实例. 执行一个程序就是一个进程,比如你打开浏览器看到我的博客,浏览器本身是一 ...
- 预热一下吧《实现Redis消息队列》
应用场景 为什么要用redis?二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成ja ...
- c/c++ 标准库 插入迭代器 详解
标准库 插入迭代器 详解 插入迭代器作用:copy等函数不能改变容器的大小,所以有时copy先容器是个空的容器,如果不使用插入迭代器,是无法使用copy等函数的. 例如下面的代码就是错误的: list ...
- Android项目的targetSDK>=23,在低于Android6.0的部分测试机(类似华为)上运行时出现的系统权限问题
相信大家对Android6.0以上的动态权限已经有所了解,很多童鞋也已经跃跃欲试地将自己项目的targetSDK升级到了23及其以上,很不幸的是我也成为了其中一员,然而我还是图样图森破了,升级之后的问 ...
- 使用 dep 配置 golang 开发环境
概要 golang 的包管理一直没有官方统一的解决方案,因此也产生了很多非官方的包管理工具. 之前我一直使用的 gb(https://getgb.io/) 能够很好的隔开各个 golang 工程,当时 ...
- MATLAB求马氏距离(Mahalanobis distance)
MATLAB求马氏距离(Mahalanobis distance) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1.马氏距离计算公式 d2(xi, ...
- MySQL知识总结(一)安装与配置(Linux CentOS)
1 安装 环境 CentOS yum install -y mysql-server mysql mysql-deve service启动 1.1 启动 service mysqld start 1. ...
- 创建ssh 服务的镜像
$ sudo docker run -ti ubuntu:14.04 /bin/bash #首先,使用我们最熟悉的 「-ti」参数来创建一个容器. root@fc1936ea8ceb:/# sshd ...