SharedWorker 共享worker数据

最新推荐文章于 2023-11-01 16:41:26 发布

阿豪boy

最新推荐文章于 2023-11-01 16:41:26 发布

阅读量407

点赞数

文章标签： java vue python js 小程序

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065146

版权

原文链接: SharedWorker 共享worker数据

上一篇: vite 提交PR 支持CJS引入 [已经被拒了]

下一篇: B站 av和bv号互转 py和js版 bigint

参考

你不知道的 Web Workers （上）[7.8K 字 | 多图预警]

https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker

普通的worker一般作为无状态的异步纯函数, 用于做计算使用, 两个页面实例化同一个路径的worker时, worker中的数据是独立的.

SharedWorker 被多个页面实例化时, 数据是共享的

下面这个点赞的例子中, 一个页面点赞多次, 再次打开其他页面时, 数据会保持同步, 通过port监听数据所以第二个页面发送的数据会改变worker中的数据, worker发出的数据只会被第二个页面收到, 第一个页面是收不到的

由于worker中的log在console中看不到, 所以需要使用inspect查看

共享worker时, 注意修改代码要关闭所有页面后再次打开才能看到新的代码, 或者在inspect中关闭, 否则是缓存的旧代码

共享点赞次数的例子

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>共享线程 Shared Worker</title>
</head>
<body>
<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("sw.js");
  console.log('worker.port', worker.port)
  worker.port.start();
  likeBtn.addEventListener("click", function () {
    worker.port.postMessage("like");
  });
  worker.port.onmessage = function (val) {
    likedCountEl.innerHTML = val.data;
  };
</script>
</body>
</html>

sw.js

let a = 666;

console.log("shared-worker");
onconnect = function (e) {
  const port = e.ports[0];
  console.log("shared-worker connect");

  // 不能使用这种方式监听事件
  // port.addEventListener('message', () => {
  //   port.postMessage(++a);
  // });

  port.postMessage(a);
  
  port.onmessage = () => {
    port.postMessage(++a);
  }
};