HTML5多线程之-- SharedWorker

╰半夏微凉° 2023-02-20 06:48 6阅读 0赞

使用如下这种URL的方式创建的 worker 称为专用 Worker(Dedicate Worker)。

new worker("url");

而共享Workers（SharedWorker）的目的，是希望通过防止重复专用 Worker 来降低系统的资源使用。

有点类似于抽取共通方法的思想。

SharedWorker 接口代表一种特定类型的 worker，可以从几个浏览上下文中访问，例如几个窗口1、iframe 或其他 worker。它们实现一个不同于普通 worker 的接口，具有不同的全局作用域, SharedWorkerGlobalScope 。

通过 new SharedWorker() 方法来创建一个共享进程对象。

var myWorker = new SharedWorker("worker.js");

具体实例如下：

#### SharedWorker.js ####

onconnect = function (e) { 
    	var port = e.ports[0];
    
    	/* //如果已经用 onmessage 监听了 onmessage 事件，则会自动启动端口： port.onmessage = function (e) { var workerResult = 'Result: ' + (e.data[0] * e.data[1]); port.postMessage(workerResult); };*/
    
    	port.addEventListener('message', function(e) { 
    		var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    		port.postMessage(workerResult);
    	});
    
    
    	//如果已经用 addEventListener 监听了 onmessage 事件，则可以使用 start() 方法手动启动端口：
    	port.start();
    };

#### multiply.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>multiply</title>
    </head>
    <body>
      <script>
        var sw = new SharedWorker("SharedWorker.js");
        sw.port.postMessage([2, 3]);
    
        sw.port.onmessage = function (event) { 
            console.log("multiply: 2 * 3 = " + event.data); // 6
        }
      </script>
    </body>
    </html>

#### square.html ####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>square</title>
    </head>
    <body>
      <script>
        var sw = new SharedWorker("SharedWorker.js");
        sw.port.postMessage([3, 3]);
    
        /* //如果已经用 onmessage 监听了 onmessage 事件，则会自动启动端口： sw.port.onmessage = function (event) { console.log("square: 3 * 3 = " + event.data); }*/
    
        //如果已经用 addEventListener 监听了 onmessage 事件，则可以使用 start() 方法手动启动端口：
        sw.port.addEventListener("message", function (event) { 
        	console.log("square: 3 * 3 = " + event.data); //9
        });
        sw.port.start();
      </script>
    </body>
    </html>

运行相应页面，可以看到结果。

--------------------

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