SharedWorker 让你多个页面相互通信

SharedWorker 是一个新的Web Worker API，它允许你在多个页面之间共享一个Worker。

SharedWorker 代表一种特定类型的Worker，可以在多个浏览器上下文中运行，比如多个页面或者多个iframe。

什么是 SharedWorker

根据前几篇的了解，大家应该对Worker有了一定的了解，SharedWorker是Worker的一种，它允许你在多个页面之间共享一个Worker。

SharedWorker对比于Service Worker要简单很多，同样也是继承与Worker，但是它的生命周期是独立于页面的。

SharedWorker和其他Worker的相同，都是需要同源的，它是通过url来区分是否是同一个SharedWorker。

使用 SharedWorker

SharedWorker的使用很简单，只需要在创建Worker的时候，需要传入一个name参数，这个name参数就是SharedWorker的标识，相同的name会共享同一个SharedWorker。

const sharedWorker = new SharedWorker('worker.js', 'mySharedWorker'); 

默认情况下name并不是必须的，这个时候相同的url会共享同一个SharedWorker。

const sharedWorker = new SharedWorker('worker.js'); 

创建SharedWorker之后，我们就可以通过port属性来和SharedWorker进行通信了。

sharedWorker.port.onmessage = (e) => {console.log(e.data);
}; 

在主线程中，可以通过创建出来的worker对象中的port属性来和SharedWorker进行通信。

使用worker.port.onmessage来监听SharedWorker的消息。

在SharedWorker中，可以通过self.onconnect来监听SharedWorker的连接。

在监听事件中会获取到与SharedWorker连接的port，通过这个port就可以和主线程进行通信了。

self.onconnect = (e) => {const port = e.ports[0];port.postMessage('hello');
}; 

通信还是通过postMessage来进行的。

通信

上面的通信只是一个简单的示例，在主线程中创建的SharedWorker，并使用port来和SharedWorker进行通信。

通常情况下，我们会使用onmessage来监听SharedWorker的消息，使用这种方式默认是打开状态，如果使用