SharedWorker
SharedWorker
インターフェースは複数のブラウザコンテキストからアクセス可能な Worker を提供します。複数のブラウザコンテキストとは、複数のウィンドウや iframe、Worker などを指します。Dedicated Worker とは異なるインタフェースと、異なるグローバルスコープを持ちます。スコープに関しては SharedWorkerGlobalScope
を参照してください。
付記:同じオリジン、つまりプロトコル、ホスト名、ポートが全て同じ場合にのみ、SharedWorker は異なるブラウザコンテキスト間で共有されます。
コンストラクタ
- 指定された URL のスクリプトを実行する SharedWorker を作成します。
プロパティ
EventTarget
のプロパティを継承し、 AbstractWorker
で定義されるプロパティを実装しています。
AbstractWorker.onerror
- type
error
であるErrorEvent
がバブリングした時に呼ばれるEventListener
- 通信とコントロールに利用される
MessagePort
オブジェクトを返します。
メソッド
EventTarget
のメソッドを継承し、 AbstractWorker
に定義されるメソッドを実装します。
例
SharedWorker の基本利用例 (ライブデモ) には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。それぞれのスクリプトは計算を行うために同じ JS ファイルを Worker に実行させています。2 つのページが別のウインドウで動作していたとしても、同じ Worker にアクセスできています。
SharedWorker
オブジェクトは SharedWorker()
(en-US) コンストラクタを利用して、次のように作成します:
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
(en-US) に対してハンドラを設定することで、上述したポートへの接続を処理できます。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.
}
仕様
仕様 | 状況 | コメント |
---|---|---|
HTML Living Standard SharedWorker の定義 |
現行の標準 | Unknown との差分なし |
ブラウザ互換性
BCD tables only load in the browser