SharedWorker使用

SharedWorker

最近公司需要在Qt内的各个iframe进行通信，但考虑到Qt的webChanel通信性能，需要考虑其它通信方式。于是找到了SharedWorker。

SharedWorker 是一种特殊的 WebWorker，可有支持多个浏览器上下文的通信功能，例如多个窗口、iframe。

:snake: 注意：如果要使 SharedWorker 连接到多个不同的页面，这些页面必须是同源的（相同的协议、host 以及端口）。

一、兼容性

可以看出它在Chrome中的兼容性是非常优秀的，而Qt的内核正是 chrome

image.png

二、使用

SharedWorker 需要提供一个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 构造函数加载这个脚本 ，并添加相关事件进行监听

this.shareWorker = new SharedWorker("https://www.xxxx.com/static/lib/worker.js");
// 接受信息
this.shareWorker.port.onmessage = (e)=> { 
  console.log(e.data)
}
// 发送信息
this.shareWorker.port.postMessage({
    type : 'notifyTab',
  payload : {}
});

:snake: 使用 postMessage时，所有接入了shareWorker的页签都能收到该消息，包括自己