SharedWorker

SharedWorker インターフェースは複数のブラウザコンテキストからアクセス可能な Worker を提供します。複数のブラウザコンテキストとは、複数のウィンドウや iframe、Worker などを指します。Dedicated Worker とは異なるインタフェースと、異なるグローバルスコープを持ちます。スコープに関しては SharedWorkerGlobalScope を参照してください。

SharedWorker()

指定された URL のスクリプトを実行する SharedWorker を作成します。

EventTarget のプロパティを継承し、 AbstractWorker で定義されるプロパティを実装しています。

AbstractWorker.onerror

type error である ErrorEvent がバブリングした時に呼ばれる EventListener

SharedWorker.port 読取専用

通信とコントロールに利用される MessagePort オブジェクトを返します。

EventTarget のメソッドを継承し、 AbstractWorker に定義されるメソッドを実装します。

SharedWorker の基本利用例 (ライブデモ) には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。それぞれのスクリプトは計算を行うために同じ JS ファイルを Worker に実行させています。2 つのページが別のウインドウで動作していたとしても、同じ Worker にアクセスできています。

SharedWorker オブジェクトは SharedWorker() コンストラクタを利用して、次のように作成します：

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

それぞれのスクリプトは MessagePort オブジェクトを通じて Worker にアクセスします。このオブジェクトは SharedWorker.port プロパティから取得できます。addEventListener を読んで onmessage イベントのハンドラを登録したら、start() メソッドを呼んでポートを手動で開始できます：

myWorker.port.start();

ポートが開始されたら、Worker に向けてメッセージを送ったり、送られたメッセージを受け取ったりできます。これらには port.postMessage() と port.onmessage を利用します:

first.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.port.postMessage([first.value,second.value]);
    console.log('Message posted to worker');
  }

  myWorker.port.onmessage = function(e) {
    result1.textContent = e.data;
    console.log('Message received from worker');
  }

Worker の内部では SharedWorkerGlobalScope.onconnect に対してハンドラを設定することで、上述したポートへの接続を処理できます。Worker に関連付けられたポートは  connect イベントの ports 属性で参照できます。MessagePort の start() メソッドによるポート開始後は、onmessage ハンドラでメインスレッドからのメッセージを処理します。

onconnect = function(e) {
    var port = e.ports[0];

    port.addEventListener('message', function(e) {
      var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
      port.postMessage(workerResult);
    });

    port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

• Worker
• Web workers の利用