SharedWorker

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

属性

EventTarget の属性を継承し、 AbstractWorker で定義される属性を実装しています。

AbstractWorker.onerror

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

SharedWorker.port 読取専用

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

コンストラクタ

SharedWorker()

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

メソッド

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 の利用