専用ワーカーとデータのやり取りをするには？

専用ワーカーとデータのやり取りをするには？

専用ワーカーの起動

バックグラウンドで独立した処理を行うワーカーには、自分自身を起動したコードとのみ通信できる専用ワーカーと、複数のコードと通信可能な共有ワーカーがあります。

専用ワーカーの起動は、そのワーカーに対するクライアントとなるWorkerオブジェクトをコンストラクター「Worker(url)」を使ってインスタンス化することで行います。

引数urlには、その専用ワーカー上で実行させる処理を記述したファイルのurlを指定します。

指定するファイルはセキュリティ上、urlの生成元（オリジン）が起動側と同じものに限定されます。オリジンとは、スキーム（urlの「http://」の部分）、ドメイン（urlの「www.example.com」の部分）、ポート（urlの「:8080」の部分）を合わせたもののことです。

Workerオブジェクトの生成ごとに新しい専用ワーカーが起動されますが、多数のワーカーの生成はそれだけクライアント側の負荷を増大させます。

// 専用ワーカーの生成
var worker = new Worker('backend.js');

起動した側で、専用ワーカーとデータの送受信を行うには

専用ワーカーへデータを送るには、Workerオブジェクトの「postMessage(data)」メソッドを呼び出します。引数dataには送信するオブジェクトを指定します。

worker.postMessage("送信データ");

メッセージの送信も非同期で実行されるため、専用ワーカー側の受信や返信といったアクションを待たずメソッド自体はすぐに終了します。

ワーカーとのデータのやり取りでは、異なる処理の流れの間での通信であるということから、いくつか制限があります。

まず、データは、オブジェクトそのものではなく、コピーが渡されます。受信した側でオブジェクトに変更を加えても、送信元のオブジェクトには影響を与えません。

また、ドキュメント側とワーカー側ではアクセスできるオブジェクトに違いがあります。ワーカー上では、windowオブジェクトやHTML要素を参照・操作することはできません。そのため、送受信可能なのは、基本的に言語組み込みの型など、ドキュメント側とワーカー側で共通で利用できるオブジェクトだけになります。

独自で定義したオブジェクトを期待通り送受信するには、「JSON.stringify(value)」、「JSON.parse(text)」メソッドで、JSON形式の文字列に変換して渡し、復元する方法が利用可能です。この場合引数valueは文字列に変換するオブジェクト、textはオブジェクトに復元する文字列です。

ドキュメント側で専用ワーカーからのデータを受け取るには、Workerオブジェクトのonmessageイベントハンドラを定義します。onmessageイベントハンドラは、専用ワーカーからデータが送信される度に、随時非同期で呼ばれます。送信されたデータは、引数eventのdata属性に格納されています。

worker.onmessage = function(event){
   // データを受け取ったらログに表示する
   console.log(event.data);
}

専用ワーカーの実行を終了させるには、「terminate()」メソッドを呼び出します。

worker.terminate();

専用ワーカー上で、起動した側とデータの送受信を行うには

専用ワーカーから、自分自身を起動した側にメッセージを送るには「postMessage(data)」メソッドを使用します。このメソッドは、専用ワーカー上のコードからは関数のように直接呼び出すことができます。

// 専用ワーカー上のコード
postMessage("送信データ");

送受信できるデータの制約については、起動した側のコードから送信する場合と同様で、両方で利用可能なオブジェクトに限られ、そのオブジェクトそのものではなく、コピーが送られます。

メッセージの受信に関してはonmessageイベントハンドラを定義します。受信データは引数eventのdata属性を参照します。

// 専用ワーカー上のコード
onmessage = function(event){
   var message = event.data;
}

onmessageイベントハンドラも、グローバル変数のようにして代入します。

ワーカー上のコードで、どのようなオブジェクトが使用できるかについては、ワーカー上で動くコードを実装するには？を参照ください。

関連項目

ワーカー上で動くコードを実装するには？