Web Worker: Shared Worker的使用

参考资料：

JavaScript高级程序第四版

https://juejin.cn/post/7064486575916187656

https://juejin.cn/post/6844904198639714311 [你不知道的Service Worker]

https://juejin.cn/post/6963519363492085790 [sharedWorker 实现多页面通信]

一、概述

shared worker，是一种共享的工作者线程，也就是说可以在不同的页面之间（iframe,tab页等场景）访问同一个工作者线程（前提仍然是必须同源，即协议、主机、端口号必须一致）。

shared Worker的一些特点：

同标识符的实例只会创建一个 sharedWorker，其他页面再使用同样的脚本创建sharedWorker，会复用已创建的 worker，这个worker由几个页面共享。这里的相同标识符指的是共享者线程会解析来自脚本的URL，工作者线程名称和文档源，只有这三个属性保持一致才会认定是同一个工作者线程。

// 实例化一个共享工作者线程

// - 全部基于同源调用构造函数

// - 所有脚本解析为相同的 URL

// - 所有线程都有相同的名称

new SharedWorker('./sharedWorker.js');

new SharedWorker('./sharedWorker.js');

new SharedWorker('./sharedWorker.js');

下面这种情况也只会实例化一个共享工作者线程

// 实例化一个共享工作者线程

// - 全部基于同源调用构造函数

// - 所有脚本解析为相同的 URL

// - 所有线程都有相同的名称

new SharedWorker('./sharedWorker.js');

new SharedWorker('sharedWorker.js');

new SharedWorker('https://www.example.com/sharedWorker.js');

如果指定不同的名字，则会产生不同的共享工作者线程

// 实例化两个共享工作者线程

// - 一个线程名称为'foo'，一个线程名称为'bar'

new SharedWorker('./sharedWorker.js', {name: 'foo'});

new SharedWorker('./sharedWorker.js', {name: 'foo'});

new SharedWorker('./sharedWorker.js', {name: 'bar'});

使用MessagePort进行通信，方便管理多个端口

SharedWorkerGlobalScope

在共享线程内部，全局作用域是 SharedWorkerGlobalScope 的实例，有以下属性和方法

属性	说明
name	给Worker起的名字
importScripts	于向工作者线程中导入任意数量的脚本
close()	内部自我关闭线程方法，与 worker.terminate()对应
onconnect	监听共享线程连接，也可以通过使用 sharedWorker.addEventListener('connect', handler)

二、用法

创建一个Worker语法如下：

const worker = new SharedWorker('./test.js')

// 通过worker.port发送消息

worker.port.postMessage("xxx");

下面看一个简单的点赞小例子：

sharedworker.html

<body>

    <h3>共享线程 Shared Worker</h3>

    <button id="likeBtn">点赞</button>

    <p>一共收获了<span id="likedCount">0</span>个</p>

    <script>

      let likeBtn = document.querySelector("#likeBtn");

      let likedCountEl = document.querySelector("#likedCount");

      let worker = new SharedWorker("./shared-worker.js",{ name: 'test_shared_worker' });

      worker.port.start();

      likeBtn.addEventListener("click", function () {

        worker.port.postMessage("2");

      });

      worker.port.onmessage = function (val) {

        likedCountEl.innerHTML = val.data;

      };

    </script>

</body>

点击页面上的按钮，每次+2个点赞数量

worker.js内容如下：

let a = 0;

console.log('shared worker is working...');

self.onconnect = function (event) {

  console.log(event);

  const port_0 = event.ports[0];

  port_0.onmessage = function (e) {

    const incr = Number(e.data);

    a = a+ incr;

    port_0.postMessage(a);

  }

}

每次点击按钮都会向worker通信一次，worker内部记住点赞数量，然后再返回给主程序，界面就能显示点赞了多少次。

console.log不见了？

F12打开控制台发现，并没有输出任何内容，那是因为SharedWorker必须通过chrome://inspect命令才能看到输出的内容，尝试在地址栏输入试试看

可以看出，确实存在了我们的共享工作者线程，点击inspect就能看到控制台内容

三、多页面通信

来源：https://zhuanlan.zhihu.com/p/38380765

ShareWorker.js

var clients = [];

onconnect = function(e) {

    var port = e.ports[0];

    clients.push(port);

    port.addEventListener('message', function(e) {

        for (var i = 0; i < clients.length; i++) {

            var eElement = clients[i];

            eElement.postMessage(e.data)

        }

    });

    port.start();

}

在需要推送的页面里面添加开启共享线程的代码，shareworker-message.js

myWorker = new SharedWorker("script/scenesetting/ShareWorker.js");

myWorker.port.onmessage=function(e) {

    var result=e.data;//此处就是共享现成推送过来的数据可以是字符串、数组、json

    /***********上面拿到数据后，就可以在下面做一些你想造做的事************/

};

引用第二步的shareworker-message.js文件

myWorker.port.postMessage(newData);

另外一个案例，请参考：

https://blog.51cto.com/u_11711012/4919513