Web Workersによるバックグラウンド処理 (3/5)

続いて、このWorkerオブジェクトのイベントにコールバック関数を設定します。以下の部分ですね。

worker.onmessage = function(e){
    ……略……
}

ここで設定した「onmessage」は、バックグラウンドスレッド（ワーカー）からメッセージが送信されたときに呼び出されるものです。これに処理を用意することで、ワーカーの処理が完了した後の処理を用意できます。

では、ワーカーで実行されるスクリプトは？　これもやはり同じようにメッセージが送られたら実行する処理を用意していることが分かります。

onmessage = function(e){
    ……略……
}

見たところ、同じonmessageというイベント用属性が使われていますね。これは、Workerオブジェクトではなく、ワーカーで処理を実行しているオブジェクトに、Workerからメッセージが送られてきたときに呼び出されるものです。つまり、worker.onmessageと、スクリプトのonmessageは、別のものなので、間違えないようにしてください。

ではスクリプトが実行されるとき、どのような形で処理が実行されていくのか、その流れを整理してみましょう。

1.ボタンをクリックし、action関数が実行されます。
2.action内で、worker.postMessageが実行され、ワーカーにメッセージが送信されます。
3.ワーカーのonmessageイベントに設定されたコールバック関数が呼び出されます。
4.関数内でpostMessageが実行され、ワーカーからWorkerオブジェクトにメッセージが送信されます。
5.worker.onmessageに設定されたコールバック関数が呼び出され、結果が表示されます。

いかがですか？　このように「postMessageでメッセージを送信すると、送信先でイベントが発生し、onmessageに設定されていた処理が実行される」という形で、Workerオブジェクトとワーカーの間でやり取りをしながら処理が動いているのです。

送信されるメッセージでは、postMessageの引数に指定したテキストがそのままデータとして送られます。そして受け取ったonmessageの関数側では、引数で渡されるイベント・オブジェクトの「data」プロパティに、この送られたテキストが収められています。これを取り出すことで、データを受け取ることが出来るのです。

このメッセージのやり取りの基本さえしっかり理解すれば、Workerオブジェクトはすぐにでも使えるようになります。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※HTMLのスクリプト部分


var woker;

function init(){
	worker = new Worker("script.js");
	worker.onmessage = function(e){
		alert(e.data);
	}
}

function action(){
	var s = document.getElementById("text1").value;
	worker.postMessage(s);
}


※script.js


onmessage = function(e){
	var str = e.data;
	postMessage("こんにちは、" + str + "さん！");
}