MessageChannel

MessageChannel接口的MessageChannel构造函数返回一个新的MessageChannel对象,返回的对象中包含两个MessagePort对象。这个特性在 Web Worker中可用。属于宏任务的一种。

MessageChannel创建了一个通信的管道,这个管道有两个只读端口,每个端口都可以通过postMessage发送数据,一个端口只要绑定了onmessage回调方法,就可以接收从另一个端口传过来的数据。

// 一个简单的例子
let channel = new MessageChannel()
let port1 = channel.port1
let port2 = channel.port2
port1.onmessage = function(event) {
  console.log('port1收到来自port2的数据' + event.data)
}
port2.onmessage = function(event) {
  console.log('port2收到来自port1的数据' + event.data)
}
port1.postMessage('hhhh')
port2.postMessage('xxxx')

MessagePort接口代表MessageChannel的两个端口之一,可以让你从一个端口发送消息,并在消息到达的另一个端口监听。

  • MessagePort.postMessage:从端口发送一条消息,并且可选是否将对象的所有权交给浏览器上下文。[要传输的对象,这些对象的所有权已转移到接收浏览器上下文,因此不可以再用于发送浏览器上下文]
  • MessagePort.start:开始发送该端口中的消息队列(只有使用EventTarget.addEventListener的时候才需要调用,使用MessagePort.onmessage时,是默认开始的)
  • MessagePort.close:断开端口连接,它将不再是激活状态

事件回调

继承自父类EventTarget的事件回调

  • MessagePort.onmessage是一个EventListener,当类型为messageMessageEvent在该端口触发时,它将会被调用,表明端口收到了一条消息
  • MessagePort.onmessageError是一个EventListener,当类型为MessageErrorMessageEvent被触发时,它将会被调用,表明端口收到了一条无法被反序列化的消息。

推荐阅读更多精彩内容

  • 我们知道:在浏览器环境中,常见的 macro task 有 setTimeout、MessageChannel、p...
    ceido阅读 37,510评论 9 58
  • Channel Messaging API的Channel Messaging接口允许我们创建一个新的消息通道,并...
    alongzjl阅读 549评论 0 0
  • 1.如何实现和设计一套JSBridge? 前端JS调用native的方式有很多种,或者说android有很多种方式...
    郑海波mobctrl阅读 228评论 0 0
  • 一、概述 首先使用Worker类的构造器创建后台线程。 注意:后台线程不能访问页面或者窗口对象,但可以进行数据的交...
    wsgdiv阅读 180评论 0 0
  • Web Worker JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只...
    johe_jianshu阅读 429评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 131,784评论 18 138
  • 我们的小马童鞋又发功了。最近打算将UIWebView替换成WKWebView,所以原来的Hybrid层需要动动土,...
    知识小集阅读 11,694评论 14 95
  • 引言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~🤣。缩减 HC、裁员不绝于耳,...
    王大白_阅读 847评论 0 0
  • 前言 经历过寒冬之后,你会明白,人才到哪儿都是需要的,而且还是急缺,作为一个自学出来的前端开发工程师,经历了最原始...
    一只大橘阅读 1,895评论 4 59
  • 引言 当下,正面临着近几年来的最严重的互联网寒冬,听得最多的一句话便是:相见于江湖~🤣。缩减HC、裁员不绝于耳,大...
    Vicky丶Amor阅读 636评论 0 12
  • 0. 背景 单线程运行模型Node.js架构在Chrome V8引擎之上,它的模型与浏览器类似,js代码运行在单个...
    十年一剑_阅读 2,140评论 0 0
  • 背景 根据w3c draft对Service Worker(以下简称SW)的定位。SW是属于PWA全家桶的其中一项...
    蒂卡波牧羊犬阅读 1,137评论 0 0
  • _________________________________________________________...
    fastwe阅读 467评论 0 0
  • react vr中文网:www.vr-react.com react vr qq群:481244084 示例源码 ...
    liu_520阅读 716评论 0 1
  • 前言: 本篇文章我将带大家一起来好好认识一下postMessage,包括它的兼容性,对应的API介绍,以及常见的几...
    木子水吉_08阅读 57,673评论 0 9
  • ![Flask](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW...
    极客学院Wiki阅读 6,517评论 0 3
  • 不知不觉易趣客已经在路上走了快一年了,感觉也该让更多朋友认识知道易趣客,所以就谢了这篇简介,已做创业记事。 易趣客...
    Physher阅读 3,194评论 1 2
  • 双胎妊娠有家族遗传倾向,随母系遗传。有研究表明,如果孕妇本人是双胎之一,她生双胎的机率为1/58;若孕妇的父亲或母...
    邺水芙蓉hibiscus阅读 3,456评论 0 2
  • 今天理好了行李,看到快要九点了,就很匆忙的洗头洗澡,(心存一份念想,你总会打给我的🐶)然后把洗头液当成沐浴液了😨,...
    bevil阅读 2,624评论 1 1
  • 那年我们15,像阳光一样温暖的年纪。每天我都会骑自行车上学,路过田野,工厂,医院,村庄,有微风,有阳光,有绿...
    木偶说爱你阅读 2,328评论 0 3