JavaScript中sharedWorker 实现多页面通信的实例详解

// 登录的页面
localStorage.setItem('login', true)；

// 其他页面
document.addEventListener("visibilitychange", function() {
	if (localStorage.setItem('login') === 'true') {
		alert('你已登录，请刷新页面');
	}
}

let myWorker = new SharedWorker('worker.js');

// page.js
let myWorker = new SharedWorker('worker.js');
// page通过worker port发送消息
myWorker.port.postMessage('哼哼');
// page通过worker port接收消息
myWorker.port.onmessage = (e) => console.log(e.data);

// worker.js
onconnect= function(e) {
	const port = e.ports[0];
	port.postMessage('哈嘿');
	port.onmessage = (e) => {
		console.log(e.data);
	}
}

let myWorker = new SharedWorker('worker.js', 'awesome worker');

// worker js
const portPool = [];
onconnect= function(e) {
	const port = e.ports[0];
	// 在connect时将 port添加到 portPool中
	portPool.push(port);
	port.postMessage('哈嘿');
	port.onmessage = (e) => {
		console.log(e.data);
	}
}

function boardcast(message) {
	portPool.forEach(port => {
		port.portMessage(port);
	})
}

// 页面
window.onbeforeunload = () => {
  myWorker.port.postMessage('TO BE CLOSED');
};

// worker.js
const portPool = [];
onconnect = function(e) {
  var port = e.ports[0];
  portPool.push(port);
  port.onmessage = function(e) {
    console.log(e);
    if (e.data === 'TO BE CLOSED') {
      const index = ports.findIndex(p => p === port);
      portPool.splice(index, 1);
    }
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  }
}

function boardcast(message) {
	portPool.forEach(port => {
		port.portMessage(port);
	})
}

setInterval(() => boardcast(Date.now()), 1000);