服务工作者与主JavaScript线条隔离。 作为一个特殊的Web Worker,他们共享相同的局限性。 您如何返回主线条? 浏览器为我们提供 Channel Messaging API。 这个API允许两个脚本通过在共享渠道上传递简单消息进行通信。
与 iframes 通信也是有用的,但我们将在本文中专注于工人使用案例。
快速播放频道
您可以使用以下语法实例化一个频道:
1const channel = new MessageChannel()
在类型的MessageChannel的渠道对象上,您可以访问两个端口port1和port2。
优点是,在频道的每一个端口上,听一个端口,然后将消息发送到另一个端口。
当您创建一个频道时,您将消息发送到port2。
通过频道发送消息
您通过运河使用postMessage()方法发送消息,如果脚本在浏览器中运行,则在窗口对象中可用:
1const data = { color: 'green' }
2const channel = new MessageChannel()
3window.postMessage(data, [channel.port2])
在接收端上聆听接收消息
在接收端,例如,在服务工作者中,您在自我上添加一个听众,一个全球,员工必须自己访问:
1self.addEventListener('message', event => {
2 console.log('Incoming message')
3})
作为参数传递的事件对象包含在数据属性中附加到该事件的数据:
1self.addEventListener('message', event => {
2 console.log('Incoming message')
3 console.log(event.data)
4})
返回 留言
要返回消息,在事件收听者中,我们可以通过引用event.ports[0]来访问另一个端口。
在这个对象上,我们可以调用postMessage()并返回额外的数据:
1self.addEventListener('message', event => {
2 console.log('Incoming message')
3 console.log(event.data)
4
5 const data = { shape: 'rectangle' }
6 event.ports[0].postMessage(data)
7})
接收消息作为发送者
发送者可以访问其创建的渠道对象,因此可以将onmessage处理器附加到message.port1对象:
1channel.port1.onmessage = event => {
2 console.log(event.data)
3}
你可以发送什么样的信息?
在postMessage()中,您可以发送任何基本的JavaScript数据类型,这意味着布莱恩、字符串、数字和对象,您可以使用数组传输多个对象。