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被触发时,它将会被调用,表明端口收到了一条无法被反序列化的消息。

你可能感兴趣的:(MessageChannel)