ワーカーについて（Web Workers）
| ・ | Web Workers について |
| ・ | Worker を開始する |
| ・ | Worker を終了する |
| ・ | Worker の機能について |
| ・ | Worker のグローバルスコープについて |
| ・ | Worker のメッセージングについて |
| ・ | SharedWorker のメッセージングについて |
| ・ | チャンネルメッセージングについて |
Web Workers について
■ Web Workers について
Web Workers は、HTML5 世代の機能です。
http://www.w3.org/TR/workers/ (Working Draft)
■グローバルスコープについて
Worker は、内部に独自の JavaScript 実行空間を持っています。
これを、グローバルスコープといいます。
■グローバルスコープ内の処理について
グローバルスコープ内では、任意の JavaScript を実行する事ができます。
グローバルスコープ内は、マルチスレッドで並列動作します。
長時間制御を返さない処理を行っても、ブラウザが応答不能に陥る事はありません。
■グローバルスコープへのアクセスについて
ワーカーの外側と内側とは、隔絶されており、直接アクセスする事はできません。
データをやり取りするには、メッセージ通信を使用します。
■ブラウザが Web Workers をサポートしているか調べる
window.Worker が真であるか比較します。
Internet Explorer 9 以前では、対応していません。
Worker を開始する
■ Worker オブジェクトを作成する
new 演算子を使って、Worker オブジェクトを作成します。
new Worker( "URL" ) :Worker
| 第01引数 | String | 実行したい、JavaScript ファイルの URL アドレスを指定する。 |
| 戻り値 | Worker | 新しい Worker オブジェクトが得られる。 |
■第01引数 (URL アドレス)
実行したい、JavaScript ファイルの URL アドレスを指定します。
一部のブラウザでは、Blob URL Scheme を指定する事もできます。
■生成元（オリジン）について
生成元（オリジン）とは、自身のリソースが格納されている場所です。
「プロトコル、ドメイン、ポート番号」の３つを合わせたものです。
■同一生成元ポリシー (Same-Origin Policy) について
「現在の URL」と「アクセス先 URL」のオリジンは、一致している必要があります。
オリジンが一致しない場合、セキュリティエラーが発生します。
■ローカル環境での動作について
Google Chrome の場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
■作成例
Worker オブジェクトを作成する（Worker 外側）
// JavaScript ファイルの URL アドレス
var url = "http://example.com/script/worker.js";
// Worker オブジェクトを作成する
var worker = new Worker(url);
// 出力テスト
console.log(worker);
■ Worker の機能について
Worker の機能については、こちらで解説しています。
Worker のメッセージ通信については、こちらで解説しています。
■ SharedWorker オブジェクトを作成する
■共有ワーカーについて
SharedWorker を使用すると、共有ワーカーを作成する事ができます。
共有ワーカーは、１つだけ存在する事ができます。
複数の作成を試みた場合、１つグローバルスコープを全員で共有します。
「URL アドレス」と「ワーカーの名前」の指定が、一致する場合に限ります。
Internet Explorer 11 の時点では、対応していません。
■ SharedWorker オブジェクトを作成する
new 演算子を使って、SharedWorker オブジェクトを作成します。
new SharedWorker( "URL" , "名前" ) :SharedWorker
| 第01引数 | String | 実行したい、JavaScript ファイルの URL アドレスを指定する。 |
| 第02引数(略可) | String | ワーカーの名前を指定する。 |
| 戻り値 | SharedWorker | 新しい SharedWorker オブジェクトが得られる。 |
■第01引数 (URL アドレス)
実行したい、JavaScript ファイルの URL アドレスを指定します。
一部のブラウザでは、Blob URL Scheme を指定する事もできます。
■第02引数 (名前)
ワーカーの名前を指定します。
■生成元（オリジン）について
生成元（オリジン）とは、自身のリソースが格納されている場所です。
「プロトコル、ドメイン、ポート番号」の３つを合わせたものです。
■同一生成元ポリシー (Same-Origin Policy) について
「現在の URL」と「アクセス先 URL」のオリジンは、一致している必要があります。
オリジンが一致しない場合、セキュリティエラーが発生します。
■ローカル環境での動作について
Google Chrome の場合、ローカル環境では動作しません。
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
■作成例
SharedWorker オブジェクトを作成する（Worker 外側）
// SharedWorker に対応している
if(window.SharedWorker){
// JavaScript ファイルの URL アドレス
var url = "http://example.com/script/shared_worker.js";
// SharedWorker オブジェクトを作成する
var shared_worker = new SharedWorker(url);
// 出力テスト
console.log(shared_worker);
}
■ SharedWorker の機能について
SharedWorker の機能については、こちらで解説しています。
SharedWorker のメッセージ通信については、こちらで解説しています。
Worker を終了する
■外部から Worker を終了する
外部から、Worker を終了するには、terminate() メソッドを使用します。
実行途中であっても、強制的に終了します。
Worker.terminate( ) :Void
| 引数 | Void | なし。 |
| 戻り値 | Void | なし。 |
Worker オブジェクトを終了する（Worker 外側）
// Worker オブジェクトを作成する
var worker = new Worker("worker.js");
// Worker オブジェクトを終了する
worker.terminate();
■内部から Worker を終了する（自殺）
内部から、Worker を終了するには、close() メソッドを使用します。
実際に終了するには、スコープを抜けて、制御をシステムに返す必要があります。
WorkerGlobalScope.close( ) :Void
| 引数 | Void | なし。 |
| 戻り値 | Void | なし。 |
内部から Worker を終了する（Worker 内側）
// WorkerGlobalScope オブジェクトを取得する
var global_scope = this.self;
// 自身の Worker を終了する（自殺）
global_scope.close();
Worker の機能について
■ Worker の機能について
■メソッド一覧
| メソッド名 | 説明 |
| terminate() | ワーカーを終了する。 |
| postMessage() | ワーカー内部へ、メッセージを送信する |
■イベント一覧
| イベント名 | 型 | 解説 |
| onmessage | MessageEvent | メッセージ受信時に実行されるイベント |
| onerror | ErrorEvent | エラー発生時に実行されるイベント |
■ SharedWorker の機能について
■プロパティ一覧
| プロパティ名 | 型 | 解説 |
| port | MessagePort | MessagePort オブジェクトを取得する |
■イベント一覧
| イベント名 | 型 | 解説 |
| onerror | ErrorEvent | エラー発生時に実行されるイベント |
Worker のグローバルスコープについて
■ Worker 内部のグローバル空間について
通常の JavaScript のグローバル空間は、Window オブジェクトが該当します。
しかし、Worker 内部には、Window オブジェクトは存在しません。
Worker 内部のグローバル空間は、WorkerGlobalScope が該当します。
SharedWorker 内部のグローバル空間は、SharedWorkerGlobalScope が該当します。
■ WorkerGlobalScope オブジェクトを取得する
WorkerGlobalScope オブジェクトにアクセスするには、this 演算子を使用します。
最初に取得して、グローバルな変数に格納しておくといいでしょう。
WorkerGlobalScope オブジェクトを取得する（Worker 内側）
// WorkerGlobalScope オブジェクトを取得する
var global_scope = this.self;
// 出力テスト
console.log(global_scope);
■ Worker 内部で利用可能な API について
Object や ArrayBuffer など、基本的な組み込み機能は、そのまま利用可能です。
Window オブジェクトは、存在しません。
Worker 内部から、ウィンドウを制御する事はできません。
Document オブジェクトは、存在しません。
Worker 内部から、DOM を制御する事はできません。
■ WorkerGlobalScope インターフェースの派生について
WorkerGlobalScope インターフェースは、以下の様に派生しています。
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
| Object |
| ↓派生 |
| EventTarget |
| ↓派生 |
| WorkerGlobalScope |
| ↓派生 |
| SharedWorkerGlobalScope |
■ WorkerGlobalScope の機能一覧（組み込み以外、一部抜粋）
■プロパティ一覧
| プロパティ名 | 型 | 説明 |
| self | WorkerGlobalScope | 自身の WorkerGlobalScope オブジェクトを取得する。 |
| プロパティ名 | 型 | 説明 |
| location | WorkerLocation | ロケーションオブジェクトを取得する。（読み取り専用） |
| navigator | WorkerNavigator | Navigator オブジェクトを取得する。 |
■メソッド一覧
| プロパティ名 | 説明 |
| close() | 自身のワーカーを終了する。システムに制御が返った時点で消滅する。 |
| postMessage() | ワーカー外部へ、メッセージを送信する |
| importScripts() | 外部の JavaScript ファイルを読み込んで実行する。 |
■イベント一覧
| イベント名 | 型 | 解説 |
| onmessage | MessageEvent | メッセージ受信時に実行されるイベント |
| onerror | ErrorEvent | エラー発生時に実行されるイベント |
| イベント名 | 型 | 解説 |
| ononline | Event | オフラインからオンラインに切り替わる瞬間に実行されるイベント |
| onoffline | Event | オンラインからオフラインに切り替わる瞬間に実行されるイベント |
■ SharedWorkerGlobalScope の機能一覧
■プロパティ一覧
| プロパティ名 | 型 | 説明 |
| name | String | ワーカーの名前を取得する。 |
| applicationCache | ApplicationCache | ApplicationCache オブジェクトを取得する。 |
■イベント一覧
| イベント名 | 型 | 解説 |
| onconnect | MessageEvent | SharedWorkerGlobalScope への接続が開始されたときに呼び出されるイベント |
■ WorkerLocation の機能一覧
■プロパティ一覧
| プロパティ名 | 型 | 説明 |
| href | String | 自身の URL アドレスを取得する |
| protocol | String | 「自身の URL アドレス」から「プロトコル」を取得する。 |
| host | String | 「自身の URL アドレス」から「ホスト名」 + 「ポート番号」を取得する。 |
| hostname | String | 「自身の URL アドレス」から「ホスト名」を取得する。 |
| port | String | 「自身の URL アドレス」から「ポート番号」を取得する。 |
| pathname | String | 「自身の URL アドレス」から「パス名」を取得する |
| search | String | 「自身の URL アドレス」から「クエリ」を取得する。 |
| hash | String | 「自身の URL アドレス」から「フラグメント識別子」を取得する。 |
■ WorkerNavigator の機能一覧
■プロパティ一覧
| プロパティ名 | 型 | 説明 |
| appName | String | ブラウザの名称を取得する（主要ブラウザで不正確） |
| appVersion | String | ブラウザのバージョン情報を取得する（主要ブラウザで不正確） |
| platform | String | ブラウザのプラットフォーム名を取得する |
| userAgent | String | ユーザーエージェント情報を取得する |
| プロパティ名 | 型 | 説明 |
| onLine | Boolean | 環境がオンライン状態であるか調べる |
Worker のメッセージングについて
■メッセージを受信する
■メッセージを受信するイベント
メッセージを受信するには、onmessage イベントを使用します。
登録したコールバック関数の引数から、MessageEvent オブジェクトが得られます。
ここでは、以下の情報が取得できます。
| プロパティ名 | 型 | 説明 |
| data | * | 送信者から送られたデータを取得する。 |
| ports | Array | 配列を取得する。中身は MessagePort オブジェクト。 |
■セキュリティについて
相手は、必ず自身と同一のオリジンとなります。
■使用例
メッセージを受信する（Worker 外側）
// ------------------------------------------------------------
// Worker オブジェクトを作成する
// ------------------------------------------------------------
var worker = new Worker("worker.js");
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
worker.addEventListener("message" , function (e){
// 出力テスト（送信者から送られたデータ）
console.log(e.data);
});
メッセージを受信する（Worker 内側）
// ------------------------------------------------------------
// WorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
global_scope.addEventListener("message" , function (e){
// 出力テスト（送信者から送られたデータ）
console.log(e.data);
});
■メッセージを送信する
■メッセージを送信する
メッセージを送信するには、postMessage() メソッドを使用します。
内側へ送りたい場合は、Worker から呼び出します。
外側へ送りたい場合は、WorkerGlobalScope から呼び出します。
(Worker or WorkerGlobalScope).postMessage( 送信データ , [譲渡データ] ) :Void
| 第01引数 | * | 送信データを指定する。 |
| 第03引数(略可) | Array | Transferable なオブジェクトを配列に格納して指定する。MessagePort などが該当。 |
| 戻り値 | Void | なし。 |
■第01引数 (送信データ)
送信したいデータを指定します。
オブジェクトを指定した場合、複製されます。
■第02引数 (譲渡データ)
ここで指定したオブジェクトは、所有権が相手に譲渡されます。
自身からは、アクセス不可能になり、再利用もできません。
■使用例
メッセージを送信する（Worker 外側）
// ------------------------------------------------------------
// Worker オブジェクトを作成する
// ------------------------------------------------------------
var worker = new Worker("worker.js");
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// メッセージを送信する
// ------------------------------------------------------------
worker.postMessage( request_obj );
メッセージを送信する（Worker 内側）
// ------------------------------------------------------------
// WorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// メッセージを送信する
// ------------------------------------------------------------
global_scope.postMessage( request_obj );
■大容量のデータを譲渡する
一部のブラウザでは、 ArrayBuffer オブジェクトなどの譲渡が可能です。
大容量のデータを、複製せずに、相手に渡したい場合に便利です。
譲渡するデータは、第01引数と第02引数の両方に含める必要があります。
第01引数にのみ指定した場合、データは複製されます。
■譲渡しつつ送信する例
ArrayBuffer を譲渡しつつ、メッセージを送信する（Worker 外側）
// ------------------------------------------------------------
// Worker オブジェクトを作成する
// ------------------------------------------------------------
var worker = new Worker("worker.js");
// ------------------------------------------------------------
// ArrayBuffer オブジェクトを用意する
// ------------------------------------------------------------
var ary_buffer0 = new ArrayBuffer(1024 * 1024 * 128); // 128 MByte のバッファ
var ary_buffer1 = new ArrayBuffer(1024 * 1024 * 256); // 256 MByte のバッファ
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{
buffer0: ary_buffer0,
buffer1: ary_buffer1
}
};
// ------------------------------------------------------------
// メッセージを送信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
worker.postMessage( request_obj , [ary_buffer0 , ary_buffer1] );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
worker.postMessage( request_obj );
}
SharedWorker のメッセージングについて
■ MessagePort を取得する（SharedWorker の外側）
MessagePort オブジェクトを取得するには、port プロパティを使用します。
MessagePort オブジェクトを取得する（SharedWorker 外側）
// SharedWorker オブジェクトを作成する
var shared_worker = new SharedWorker("shared_worker.js");
// MessagePort オブジェクトを取得する
var message_port = shared_worker.port;
// 出力テスト
console.log(message_port);
■ MessagePort を取得する（SharedWorker の内側）
SharedWorkerGlobalScope への接続開始を検出するには、onconnect イベントを使用します。
SharedWorker オブジェクトが作られたときに呼び出されます。
登録したコールバック関数の引数から、MessageEvent オブジェクトが得られます。
ports プロパティから配列が得られます。
配列の 0 番地には、MessagePort オブジェクトが格納されています。
| プロパティ名 | 型 | 説明 |
| ports | Array | 配列を取得する。中身は MessagePort オブジェクト。 |
■取得例
SharedWorkerGlobalScope への接続開始を検出する（SharedWorker 内側）
// ------------------------------------------------------------
// SharedWorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// SharedWorkerGlobalScope への接続が開始されたときに呼び出されるイベント
// ------------------------------------------------------------
global_scope.onconnect = function (e){
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = e.ports[0];
// 出力テスト
console.log(message_port);
};
■メッセージを受信する
■メッセージを受信するイベント
メッセージを受信するには、onmessage イベントを使用します。
登録したコールバック関数の引数から、MessageEvent オブジェクトが得られます。
ここでは、以下の情報が取得できます。
| プロパティ名 | 型 | 説明 |
| data | * | 送信者から送られたデータを取得する。 |
| ports | Array | 配列を取得する。中身は MessagePort オブジェクト。 |
■受信を開始する
受信を開始するには、start() メソッドを使用します。
onmessage プロパティを使用した場合は、自動的に開始されます。
受信を開始していない場合、メッセージはキューに蓄積されます。
受信を開始すると、相手からのメッセージが、まとめて得られます。
■使用例
メッセージを受信する（SharedWorker 外側）
// ------------------------------------------------------------
// SharedWorker オブジェクトを作成する
// ------------------------------------------------------------
var shared_worker = new SharedWorker("shared_worker.js");
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = shared_worker.port;
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.addEventListener("message" , function (e){
// 出力テスト（送信者から送られたデータ）
console.log(e.data);
});
// ------------------------------------------------------------
// メッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
メッセージを受信する（SharedWorker 内側）
// ------------------------------------------------------------
// SharedWorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// SharedWorkerGlobalScope への接続が開始されたときに呼び出されるイベント
// ------------------------------------------------------------
global_scope.onconnect = function (e){
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = e.ports[0];
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e){
// 出力テスト（送信者から送られたデータ）
console.log(e.data);
};
// ------------------------------------------------------------
// メッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
};
■メッセージを送信する
■メッセージを送信する
メッセージを送信するには、postMessage() メソッドを使用します。
MessagePort オブジェクトから呼び出します。
MessagePort.postMessage( 送信データ , [譲渡データ] ) :Void
| 第01引数 | * | 送信データを指定する。 |
| 第03引数(略可) | Array | Transferable なオブジェクトを配列に格納して指定する。MessagePort などが該当。 |
| 戻り値 | Void | なし。 |
■第01引数 (送信データ)
送信したいデータを指定します。
オブジェクトを指定した場合、複製されます。
■第02引数 (譲渡データ)
ここで指定したオブジェクトは、所有権が相手に譲渡されます。
自身からは、アクセス不可能になり、再利用もできません。
■使用例
メッセージを送信する（SharedWorker 外側）
// ------------------------------------------------------------
// SharedWorker オブジェクトを作成する
// ------------------------------------------------------------
var shared_worker = new SharedWorker("shared_worker.js");
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = shared_worker.port;
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{}
};
// ------------------------------------------------------------
// メッセージを送信する
// ------------------------------------------------------------
message_port.postMessage( request_obj );
メッセージを返信する（SharedWorker 内側）
// ------------------------------------------------------------
// SharedWorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// SharedWorkerGlobalScope への接続が開始されたときに呼び出されるイベント
// ------------------------------------------------------------
global_scope.onconnect = function (e){
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = e.ports[0];
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e){
// ------------------------------------------------------------
// 返信用オブジェクト
// ------------------------------------------------------------
var receive_obj = {
message:"返信テスト",
param:{}
};
// ------------------------------------------------------------
// メッセージを返信する
// ------------------------------------------------------------
message_port.postMessage( receive_obj );
};
// ------------------------------------------------------------
// メッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
};
■大容量のデータを譲渡する
一部のブラウザでは、 ArrayBuffer オブジェクトなどの譲渡が可能です。
大容量のデータを、複製せずに、相手に渡したい場合に便利です。
譲渡するデータは、第01引数と第02引数の両方に含める必要があります。
第01引数にのみ指定した場合、データは複製されます。
■譲渡しつつ送信する例
ArrayBuffer を譲渡しつつ、メッセージを送信する（SharedWorker 外側）
// ------------------------------------------------------------
// SharedWorker オブジェクトを作成する
// ------------------------------------------------------------
var shared_worker = new SharedWorker("shared_worker.js");
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = shared_worker.port;
// ------------------------------------------------------------
// ArrayBuffer オブジェクトを用意する
// ------------------------------------------------------------
var ary_buffer0 = new ArrayBuffer(1024 * 1024 * 128); // 128 MByte のバッファ
var ary_buffer1 = new ArrayBuffer(1024 * 1024 * 256); // 256 MByte のバッファ
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
message:"送信テスト",
param:{
buffer0: ary_buffer0,
buffer1: ary_buffer1
}
};
// ------------------------------------------------------------
// メッセージを送信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
message_port.postMessage( request_obj , [ary_buffer0 , ary_buffer1] );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
message_port.postMessage( request_obj );
}
■メッセージの送受信例
■ SharedWorker 外側の処理について
クリックするたびにバッファを作成し、ワーカーに CRC32 の計算をリクエストする
// ------------------------------------------------------------
// SharedWorker オブジェクトを作成する
// ------------------------------------------------------------
var shared_worker = new SharedWorker("shared_worker.js");
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = shared_worker.port;
// ------------------------------------------------------------
// メッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e) {
// 受信データを取得
var response_obj = e.data;
// 受信データを出力
console.log(response_obj);
};
// ------------------------------------------------------------
// メッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
// ------------------------------------------------------------
// 128 MByte のバッファを作成
// ------------------------------------------------------------
var ary_buffer = new ArrayBuffer(1024 * 1024 * 128);
var ary_u8 = new Uint8Array(ary_buffer);
// 適当な値を書き込む
var i;
for(i=0;i < 256;i++){
ary_u8[i] = Math.floor(Math.random() * 0xff);
}
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
command:"getCRC32",
buffer:ary_buffer
};
// ------------------------------------------------------------
//チャンネル経由で相手にメッセージを送信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
message_port.postMessage( request_obj , [ary_buffer] );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
message_port.postMessage( request_obj );
}
};
■ SharedWorker 内側の処理について
CRC32 を計算するライブラリ
// ------------------------------------------------------------
// SharedWorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// コマンド辞書
// ------------------------------------------------------------
var command_dictionary = new Object();
// ------------------------------------------------------------
// CRC32 を計算する関数
// ------------------------------------------------------------
command_dictionary["getCRC32"] = function (request,receive,transfer){
var _table = [
0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419, 0x706af48f, 0xe963a535, 0x9e6495a3,
0x0edb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988, 0x09b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91,
0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7,
0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9, 0xfa0f3d63, 0x8d080df5,
0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172, 0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b,
0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59,
0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599, 0xb8bda50f,
0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924, 0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d,
0x76dc4190, 0x01db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x06b6b51f, 0x9fbfe4a5, 0xe8b8d433,
0x7807c9a2, 0x0f00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x086d3d2d, 0x91646c97, 0xe6635c01,
0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e, 0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457,
0x65b0d9c6, 0x12b7e950, 0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65,
0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb,
0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0, 0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9,
0x5005713c, 0x270241aa, 0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f,
0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad,
0xedb88320, 0x9abfb3b6, 0x03b6e20c, 0x74b1d29a, 0xead54739, 0x9dd277af, 0x04db2615, 0x73dc1683,
0xe3630b12, 0x94643b84, 0x0d6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0x0a00ae27, 0x7d079eb1,
0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb, 0x196c3671, 0x6e6b06e7,
0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc, 0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5,
0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b,
0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef, 0x4669be79,
0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236, 0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f,
0xc5ba3bbe, 0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d,
0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x026d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x05005713,
0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0x0cb61b38, 0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0x0bdbdf21,
0x86d3d2d4, 0xf1d4e242, 0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777,
0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45,
0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2, 0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db,
0xaed16a4a, 0xd9d65adc, 0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9,
0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693, 0x54de5729, 0x23d967bf,
0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94, 0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d
];
var crc32 = 0xffffffff;
var buffer = request.buffer;
var num = buffer.byteLength;
var ary_u8 = new Uint8Array(buffer);
var i;
for (i=0;i < num;i++) {
crc32 = _table[(crc32 ^ ary_u8[i]) & 0xff] ^ (crc32 >>> 8);
}
receive.result = true;
receive.crc32 = (crc32 ^ 0xffffffff) >>> 0;
receive.buffer = buffer;
transfer.push(buffer);
};
// ------------------------------------------------------------
// SharedWorkerGlobalScope への接続が開始されたときに呼び出されるイベント
// ------------------------------------------------------------
global_scope.addEventListener("connect" , function (e){
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = e.ports[0];
// ------------------------------------------------------------
// チャンネル経由のメッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e) {
var request_obj = e.data;
var receive_obj = new Object();
var transfer_list = new Array();
// ------------------------------------------------------------
// コマンドごとに処理を振り分ける
// ------------------------------------------------------------
try{
var callback = command_dictionary[request_obj.command];
callback(request_obj,receive_obj,transfer_list);
}catch(e){
receive_obj.result = false;
receive_obj.error = e.message;
}
// ------------------------------------------------------------
// メッセージを返信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
message_port.postMessage( receive_obj , transfer_list );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
message_port.postMessage( receive_obj );
}
};
// ------------------------------------------------------------
// メッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
});
チャンネルメッセージングについて
■チャンネルメッセージングについて
チャンネルメッセージングを使用すると、独占的な通信経路を構築する事ができます。
１つだけでなく、複数のチャンネルを構築する事もできます。
どちらか片方がロストした場合、通信経路は自動的に閉じられます。
Internet Explorer 9 以前では、対応していません。
■メッセージチャンネルを構築する
■ MessageChannel オブジェクトを作成する
new 演算子を使って、MessageChannel オブジェクトを作成します。
複数のチャンネルを構築したい場合は、必要な数だけ生成します。
MessageChannel オブジェクトを作成する
// MessageChannel に対応している
if(window.MessageChannel){
// MessageChannel オブジェクトを作成する
var message_channel = new MessageChannel();
// 出力テスト
console.log(message_channel);
}
■ MessageChannel オブジェクトについて
中には、２つの MessagePort オブジェクトが格納されています。
どちらか片方を自分用に確保し、もう片方は相手に送信します。
ここでは、port1 を、自分が使用するものとします。
| プロパティ | 型 | 解説 |
| port1 | MessagePort | MessagePort オブジェクトが得られる |
| port2 | MessagePort | MessagePort オブジェクトが得られる |
■ MessagePort オブジェクトを相手に送信する（発動側の処理）
相手に MessagePort オブジェクトを渡すには、postMessage() メソッドを使用します。
MessagePort オブジェクトを配列に格納して、第02引数に渡します。
MessagePort オブジェクトは、Transferable なオブジェクトです。
送信すると、所有権が相手に譲渡されます。
■相手から MessagePort オブジェクトを受け取る（受動側の処理）
相手から MessagePort オブジェクトを受け取るには、onmessage イベントを使用します。
ports プロパティから、MessagePort オブジェクトのリストが得られます。
■チャンネル経由で、メッセージを受信する
■メッセージを受信するイベント
登録したコールバック関数の引数から、MessageEvent オブジェクトが得られます。
チャンネルメッセージングでは、以下の情報が取得できます。
| プロパティ名 | 型 | 説明 |
| data | * | 送信者から送られたデータを取得する。 |
| ports | Array | 配列を取得する。中身は MessagePort オブジェクト。 |
■受信を開始する
受信を開始するには、start() メソッドを使用します。
onmessage プロパティを使用した場合は、自動的に開始されます。
受信を開始していない場合、メッセージはキューに蓄積されます。
受信を開始すると、相手からのメッセージが、まとめて得られます。
■チャンネル経由で、メッセージを送信する
■メッセージを送信する
MessagePort.postMessage( 送信データ , [譲渡データ] ) :Void
| 第01引数 | * | 送信データを指定する。 |
| 第02引数(略可) | Array | Transferable なオブジェクトを配列に格納して指定する。MessagePort などが該当。 |
| 戻り値 | Void | なし。 |
■第01引数 (送信データ)
送信したいデータを指定します。
オブジェクトを指定した場合、複製されます。
■第02引数 (譲渡データ)
ここで指定したオブジェクトは、所有権が相手に譲渡されます。
自身からは、アクセス不可能になり、再利用もできません。
■大容量のデータを譲渡する
一部のブラウザでは、 ArrayBuffer オブジェクトなどの譲渡が可能です。
大容量のデータを、複製せずに、相手に渡したい場合に便利です。
譲渡するデータは、第01引数と第02引数の両方に含める必要があります。
第01引数にのみ指定した場合、データは複製されます。
■メッセージチャンネルを終了する
メッセージチャンネルを終了するには、close() メソッドを使用します。
自身や相手がロストした場合、メッセージチャンネルは、自動的に終了します。
■チャンネルメッセージングの送受信例
■ Worker 外側の処理について
クリックするたびにバッファを作成し、ワーカーに CRC32 の計算をリクエストする
// ------------------------------------------------------------
// Worker オブジェクトを作成する
// ------------------------------------------------------------
var worker = new Worker("worker.js");
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){
// ------------------------------------------------------------
// 128 MByte のバッファを作成
// ------------------------------------------------------------
var ary_buffer = new ArrayBuffer(1024 * 1024 * 128);
var ary_u8 = new Uint8Array(ary_buffer);
// 適当な値を書き込む
var i;
for(i=0;i < 256;i++){
ary_u8[i] = Math.floor(Math.random() * 0xff);
}
// ------------------------------------------------------------
// MessageChannel オブジェクトを作成
// ------------------------------------------------------------
var message_channel = new MessageChannel();
// ------------------------------------------------------------
// 自身用の MessagePort オブジェクトを確保
// ------------------------------------------------------------
var message_port = message_channel.port1;
// ------------------------------------------------------------
// チャンネル経由のメッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e) {
// 受信データを取得
var response_obj = e.data;
// 受信データを出力
console.log(response_obj);
};
// ------------------------------------------------------------
// チャンネル経由のメッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
// ------------------------------------------------------------
// 相手に MessagePort オブジェクトを送信する
// ------------------------------------------------------------
worker.postMessage( null , [message_channel.port2] );
// ------------------------------------------------------------
// 送信用オブジェクト
// ------------------------------------------------------------
var request_obj = {
command:"getCRC32",
buffer:ary_buffer
};
// ------------------------------------------------------------
//チャンネル経由で相手にメッセージを送信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
message_port.postMessage( request_obj , [ary_buffer] );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
message_port.postMessage( request_obj );
}
};
■ Worker 内側の処理について
CRC32 を計算するライブラリ
// ------------------------------------------------------------
// WorkerGlobalScope オブジェクトを取得する
// ------------------------------------------------------------
var global_scope = this.self;
// ------------------------------------------------------------
// コマンド辞書
// ------------------------------------------------------------
var command_dictionary = new Object();
// ------------------------------------------------------------
// CRC32 を計算する関数
// ------------------------------------------------------------
command_dictionary["getCRC32"] = function (request,receive,transfer){
var _table = [
0x00000000, 0x77073096, 0xee0e612c, 0x990951ba, 0x076dc419, 0x706af48f, 0xe963a535, 0x9e6495a3,
0x0edb8832, 0x79dcb8a4, 0xe0d5e91e, 0x97d2d988, 0x09b64c2b, 0x7eb17cbd, 0xe7b82d07, 0x90bf1d91,
0x1db71064, 0x6ab020f2, 0xf3b97148, 0x84be41de, 0x1adad47d, 0x6ddde4eb, 0xf4d4b551, 0x83d385c7,
0x136c9856, 0x646ba8c0, 0xfd62f97a, 0x8a65c9ec, 0x14015c4f, 0x63066cd9, 0xfa0f3d63, 0x8d080df5,
0x3b6e20c8, 0x4c69105e, 0xd56041e4, 0xa2677172, 0x3c03e4d1, 0x4b04d447, 0xd20d85fd, 0xa50ab56b,
0x35b5a8fa, 0x42b2986c, 0xdbbbc9d6, 0xacbcf940, 0x32d86ce3, 0x45df5c75, 0xdcd60dcf, 0xabd13d59,
0x26d930ac, 0x51de003a, 0xc8d75180, 0xbfd06116, 0x21b4f4b5, 0x56b3c423, 0xcfba9599, 0xb8bda50f,
0x2802b89e, 0x5f058808, 0xc60cd9b2, 0xb10be924, 0x2f6f7c87, 0x58684c11, 0xc1611dab, 0xb6662d3d,
0x76dc4190, 0x01db7106, 0x98d220bc, 0xefd5102a, 0x71b18589, 0x06b6b51f, 0x9fbfe4a5, 0xe8b8d433,
0x7807c9a2, 0x0f00f934, 0x9609a88e, 0xe10e9818, 0x7f6a0dbb, 0x086d3d2d, 0x91646c97, 0xe6635c01,
0x6b6b51f4, 0x1c6c6162, 0x856530d8, 0xf262004e, 0x6c0695ed, 0x1b01a57b, 0x8208f4c1, 0xf50fc457,
0x65b0d9c6, 0x12b7e950, 0x8bbeb8ea, 0xfcb9887c, 0x62dd1ddf, 0x15da2d49, 0x8cd37cf3, 0xfbd44c65,
0x4db26158, 0x3ab551ce, 0xa3bc0074, 0xd4bb30e2, 0x4adfa541, 0x3dd895d7, 0xa4d1c46d, 0xd3d6f4fb,
0x4369e96a, 0x346ed9fc, 0xad678846, 0xda60b8d0, 0x44042d73, 0x33031de5, 0xaa0a4c5f, 0xdd0d7cc9,
0x5005713c, 0x270241aa, 0xbe0b1010, 0xc90c2086, 0x5768b525, 0x206f85b3, 0xb966d409, 0xce61e49f,
0x5edef90e, 0x29d9c998, 0xb0d09822, 0xc7d7a8b4, 0x59b33d17, 0x2eb40d81, 0xb7bd5c3b, 0xc0ba6cad,
0xedb88320, 0x9abfb3b6, 0x03b6e20c, 0x74b1d29a, 0xead54739, 0x9dd277af, 0x04db2615, 0x73dc1683,
0xe3630b12, 0x94643b84, 0x0d6d6a3e, 0x7a6a5aa8, 0xe40ecf0b, 0x9309ff9d, 0x0a00ae27, 0x7d079eb1,
0xf00f9344, 0x8708a3d2, 0x1e01f268, 0x6906c2fe, 0xf762575d, 0x806567cb, 0x196c3671, 0x6e6b06e7,
0xfed41b76, 0x89d32be0, 0x10da7a5a, 0x67dd4acc, 0xf9b9df6f, 0x8ebeeff9, 0x17b7be43, 0x60b08ed5,
0xd6d6a3e8, 0xa1d1937e, 0x38d8c2c4, 0x4fdff252, 0xd1bb67f1, 0xa6bc5767, 0x3fb506dd, 0x48b2364b,
0xd80d2bda, 0xaf0a1b4c, 0x36034af6, 0x41047a60, 0xdf60efc3, 0xa867df55, 0x316e8eef, 0x4669be79,
0xcb61b38c, 0xbc66831a, 0x256fd2a0, 0x5268e236, 0xcc0c7795, 0xbb0b4703, 0x220216b9, 0x5505262f,
0xc5ba3bbe, 0xb2bd0b28, 0x2bb45a92, 0x5cb36a04, 0xc2d7ffa7, 0xb5d0cf31, 0x2cd99e8b, 0x5bdeae1d,
0x9b64c2b0, 0xec63f226, 0x756aa39c, 0x026d930a, 0x9c0906a9, 0xeb0e363f, 0x72076785, 0x05005713,
0x95bf4a82, 0xe2b87a14, 0x7bb12bae, 0x0cb61b38, 0x92d28e9b, 0xe5d5be0d, 0x7cdcefb7, 0x0bdbdf21,
0x86d3d2d4, 0xf1d4e242, 0x68ddb3f8, 0x1fda836e, 0x81be16cd, 0xf6b9265b, 0x6fb077e1, 0x18b74777,
0x88085ae6, 0xff0f6a70, 0x66063bca, 0x11010b5c, 0x8f659eff, 0xf862ae69, 0x616bffd3, 0x166ccf45,
0xa00ae278, 0xd70dd2ee, 0x4e048354, 0x3903b3c2, 0xa7672661, 0xd06016f7, 0x4969474d, 0x3e6e77db,
0xaed16a4a, 0xd9d65adc, 0x40df0b66, 0x37d83bf0, 0xa9bcae53, 0xdebb9ec5, 0x47b2cf7f, 0x30b5ffe9,
0xbdbdf21c, 0xcabac28a, 0x53b39330, 0x24b4a3a6, 0xbad03605, 0xcdd70693, 0x54de5729, 0x23d967bf,
0xb3667a2e, 0xc4614ab8, 0x5d681b02, 0x2a6f2b94, 0xb40bbe37, 0xc30c8ea1, 0x5a05df1b, 0x2d02ef8d
];
var crc32 = 0xffffffff;
var buffer = request.buffer;
var num = buffer.byteLength;
var ary_u8 = new Uint8Array(buffer);
var i;
for (i=0;i < num;i++) {
crc32 = _table[(crc32 ^ ary_u8[i]) & 0xff] ^ (crc32 >>> 8);
}
receive.result = true;
receive.crc32 = (crc32 ^ 0xffffffff) >>> 0;
receive.buffer = buffer;
transfer.push(buffer);
};
// ------------------------------------------------------------
// 基本的なメッセージ受信時に実行されるイベント
// ------------------------------------------------------------
global_scope.addEventListener("message" , function (e){
// ------------------------------------------------------------
// MessagePort オブジェクトが送られてきたか調べる
// ------------------------------------------------------------
var i;
var num = e.ports.length;
for(i=0;i < num;i++){
(function(){
// ------------------------------------------------------------
// MessagePort オブジェクトを取得する
// ------------------------------------------------------------
var message_port = e.ports[i];
// ------------------------------------------------------------
// チャンネル経由のメッセージ受信時に実行されるイベント
// ------------------------------------------------------------
message_port.onmessage = function (e) {
var request_obj = e.data;
var receive_obj = new Object();
var transfer_list = new Array();
// ------------------------------------------------------------
// コマンドごとに処理を振り分ける
// ------------------------------------------------------------
try{
var callback = command_dictionary[request_obj.command];
callback(request_obj,receive_obj,transfer_list);
}catch(e){
receive_obj.result = false;
receive_obj.error = e.message;
}
// ------------------------------------------------------------
// メッセージを返信する
// ------------------------------------------------------------
try{
// 譲渡しつつメッセージを送信する（第02引数で譲渡データを指定する）
message_port.postMessage( receive_obj , transfer_list );
}catch(e){
// 未対応なので複製しつつメッセージを送信する（第02引数を省略する）
message_port.postMessage( receive_obj );
}
};
// ------------------------------------------------------------
// チャンネル経由のメッセージ受信を開始する
// ------------------------------------------------------------
message_port.start();
})();
}
});