SharedWorker 演示

默认文件1624799779625.png

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

构建worker脚本

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

构建数据共享通道

export class SharedDataChannel {
  constructor(url, cb) {
    this.sharedWorker = new SharedWorker(url);
    this.sharedWorker.port.onmessage = (e) => {
      cb && 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>

调试

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

image.png

效果

20210623145234.png

posted @ 2021-06-27 21:19  前端小鑫同学  阅读(20)  评论(0)    收藏  举报  来源