Web Workersによるバックグラウンド処理 (3/5)
作成:2010-12-20 13:02
更新:2010-12-20 13:03
更新:2010-12-20 13:03
■Workerオブジェクト=ワーカー間のメッセージ送信
続いて、このWorkerオブジェクトのイベントにコールバック関数を設定します。以下の部分ですね。
では、ワーカーで実行されるスクリプトは? これもやはり同じようにメッセージが送られたら実行する処理を用意していることが分かります。
ではスクリプトが実行されるとき、どのような形で処理が実行されていくのか、その流れを整理してみましょう。
1.ボタンをクリックし、action関数が実行されます。
2.action内で、worker.postMessageが実行され、ワーカーにメッセージが送信されます。
3.ワーカーのonmessageイベントに設定されたコールバック関数が呼び出されます。
4.関数内でpostMessageが実行され、ワーカーからWorkerオブジェクトにメッセージが送信されます。
5.worker.onmessageに設定されたコールバック関数が呼び出され、結果が表示されます。
いかがですか? このように「postMessageでメッセージを送信すると、送信先でイベントが発生し、onmessageに設定されていた処理が実行される」という形で、Workerオブジェクトとワーカーの間でやり取りをしながら処理が動いているのです。
送信されるメッセージでは、postMessageの引数に指定したテキストがそのままデータとして送られます。そして受け取ったonmessageの関数側では、引数で渡されるイベント・オブジェクトの「data」プロパティに、この送られたテキストが収められています。これを取り出すことで、データを受け取ることが出来るのです。
このメッセージのやり取りの基本さえしっかり理解すれば、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 + "さん!"); }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る