SharedWorker 演示

前端小鑫同学

发布于 2022-12-25 11:02:01

8520

发布于 2022-12-25 11:02:01

文章被收录于专栏：小鑫同学编程历险记

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

构建worker脚本

let pool = [];
onconnect = function (e) {
  let port = e.ports[0];
  pool.push(port);
  port.onmessage = function (e) {
    pool.forEach((v) => {
      v != port &amp;&amp; v.postMessage(e.data);
    });
  };
};

构建数据共享通道

export class SharedDataChannel {
  constructor(url, cb) {
    this.sharedWorker = new SharedWorker(url);
    this.sharedWorker.port.onmessage = (e) => {
      cb &amp;&amp; cb(e.data);
    };
  }

  post(data) {
    this.sharedWorker.port.postMessage(data);
  }
}

在多个页面进行初始化

<script type="module">
    import { SharedDataChannel } from "./index.js";
    const channel = new SharedDataChannel("./worker.js", (res) => {
    document.querySelector("#content").innerHTML += `${res} </br>`;
    });
    document.querySelector("#send").addEventListener("click", () => {
    channel.post("登录页面发送的数据");
    });
</script>

<body>
    登录页面


    <button id="send">发送</button>
    <p id="content"></p>
</body>