sharedWorker 共享Worker

特点
	.可以被多个页面所共享（同域情况下），即tab页、iframe
	.其他页面再使用同样的url创建sharedWorker，会复用已创建的 worker，这个worker由那几个页面共享
	.实际返回的是一个MessagePort（和MessageChannel一致）

调试：
	地址栏chrome://inspect，点击shared workers，点击inspect

基本使用：
	if(window.SharedWorker){
		var myWorker = new SharedWorker("worker.js"，options和web worker中一致);
		返回一个MessagePort
	}
	
事件：
	主线程：
		(1)建立连接
			myWorker.port.start();
			myWorker.port.close();	关闭连接

		(2)监听信息
			myWorker.port.onmessage = function(e) {
			  console.log('Message received from worker');
			}
			
		(3)发送信息
			myWorker.port.postMessage("hello, I'm main",[Transerable对象]);
		
		(4)监听错误
			myWorker.port.onmessageerror=fn	监听序列化错误
			myWorker.onerror=fn	监听传输过程错误
			
			
	Shared Worker线程：
		(1)监听连接
			self.onconnect = function(e) {
			  var port = e.ports[0];
			  
			  监听信息
			  port.addEventListener('message', function(e) {
			    var workerResult = 'Result: ' + (e.data[0]);
			    port.postMessage(workerResult);
			  });
			  建立双向通信连接
			  port.start(); 使用port.onmessage时不需要，会默认隐式调用 port.start()
			  
			  发送信息
			  port.postMessage('hey',[Transerable对象])
			}
		
		(2)关闭连接
			self.close()
		
		其他self上的方法和web worker一致

页面关闭清除Shared Worker
	.在页面关闭后，workerPool中的port并不会自动清除，造成内存的占用
	.通过监听页面关闭，通知worker关闭
		.通过框架的生命周期
		.通过浏览器自带的生命周期window.onbeforeunload

// my-shared-worker.js
self.addEventListener("connect", (event) => {
  const port = event.ports[0];

  // 监听端口上的 message 事件
  port.addEventListener("message", (messageEvent) => {
    // 接收到消息时的处理逻辑
    console.log("Received message:", messageEvent.data);
   
    // 发送消息回给发送方
    port.postMessage("Hello from SharedWorker!");
  });

 // 每次建立新连接时，都需要激活端口
 port.start();
});

// index.js（主页面脚本）

// 创建 SharedWorker 实例
const worker = new SharedWorker("my-shared-worker.js");

// 监听 message 事件，以便接收 SharedWorker 发送的消息
worker.port.addEventListener("message", (event) => {
  console.log("Message from SharedWorker:", event.data);
});

// 开始监听端口的 message 事件
worker.port.start();

// 向 SharedWorker 发送消息
worker.port.postMessage("Hello, SharedWorker!");

向指定页面发送信息

// 页面脚本 (例如，index.js)

// 创建 SharedWorker 实例
const worker = new SharedWorker("my-shared-worker.js");

// 监听 SharedWorker 发送的消息
worker.port.addEventListener("message", (event) => {
  console.log("Message from SharedWorker:", event.data);
});

// 开始监听端口的 message 事件
worker.port.start();

// 随机分配页面 ID
const pageId = Math.random().toString(36).substr(2, 6);

// 向 SharedWorker 发送初始化消息，包含页面 ID
worker.port.postMessage({ type: "init", pageId: pageId });

// SharedWorker 脚本 (例如，my-shared-worker.js)

const connectedPorts = new Map();

self.addEventListener("connect", (event) => {
  const port = event.ports[0];

  // 监听端口上的 message 事件
  port.addEventListener("message", (messageEvent) => {
    const message = messageEvent.data;

    if (message.type === "init") {
      // 将新连接的端口与其对应的 pageId 关联起来
      connectedPorts.set(message.pageId, port);
    } else if (message.type === "sendToSpecificPage") {
      // 获取目标 pageId 对应的端口
      const targetPort = connectedPorts.get(message.targetPageId);

      // 向目标页面发送消息
      if (targetPort) {
        targetPort.postMessage("Message from SharedWorker for specific page");
      } else {
        // 处理未找到目标页面的情况
        console.error("Target page not found");
      }
    }
    // 处理其他消息类型...
  });

  // 每次建立新连接时，都需要激活端口
  port.start();
});