默认文件1624799779625.png

作用: 通过SharedWorker可以在同源内的不同窗口之间传递信息

构建worker脚本

  1. let pool = [];
  2. onconnect = function (e) {
  3.   let port = e.ports[0];
  4.   pool.push(port);
  5.   port.onmessage = function (e) {
  6.     pool.forEach((v) => {
  7.       v != port && v.postMessage(e.data);
  8.     });
  9.   };
  10. };

构建数据共享通道

  1. export class SharedDataChannel {
  2.   constructor(url, cb) {
  3.     this.sharedWorker = new SharedWorker(url);
  4.     this.sharedWorker.port.onmessage = (e) => {
  5.       cb && cb(e.data);
  6.     };
  7.   }
  9.   post(data) {
  10.     this.sharedWorker.port.postMessage(data);
  11.   }
  12. }

在多个页面进行初始化

  1. <script type="module">
  2.     import { SharedDataChannel } from "./index.js";
  3.     const channel = new SharedDataChannel("./worker.js", (res) => {
  4.     document.querySelector("#content").innerHTML += `${res} </br>`;
  5.     });
  6.     document.querySelector("#send").addEventListener("click", () => {
  7.     channel.post("登录页面发送的数据");
  8.     });
  9. </script>
  11. <body>
  12.     登录页面<br /><br />
  13.     <button id="send">发送</button>
  14.     <p id="content"></p>
  15. </body>

调试

chrome://inspect/#workers 导航到 chrome://inspect/#workers 并找到共享的 worker，然后单击”inspect”，然后你可以拉起 SharedWorker 的控制台。

image.png

效果

20210623145234.png