はじめに
WebWorkerを試してみました。
サーバを使わずに確認できるかと思ったのですが、ChromeではUncaught SecurityError: Failed to construct 'Worker': Script at app.js:2となり、確認することはできませんでした。
python -m SimpleHTTPServerを使えば、このエラーを回避することができます。
この記事では、使用したファイルを紹介します。内容は、ボタンをクリックしたときに、アラートで1が表示されるというものです。
ファイル
まず、index.htmlを見てみます。ボタンをクリックしたときにhomework()を呼び出すようになっています。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="app.js"></script>
<script src="worker.js"></script>
</head>
<body>
<form action="#">
<input type="button" value="work!" onclick="homework();">
</form>
</body>
</html>
つぎに、app.jsを見てみます。homework()が呼び出されたときに、WebWorkerを生成して、そのWorkerにイベントリスナー(アラートを表示するコールバック関数)を設定して、データを送信するようになっています。
app.js
function homework() {
var worker = new Worker('worker.js');
worker.addEventListener("message", function (e) {
alert(e.data);
});
worker.postMessage(100);
}
worker.jsを見てみます。イベントリスナー(データを送信するコールバック関数)を指定しています。
worker.js
addEventListener("message", function (e) {
postMessage(1);
});
postMessageで送信されたデータを受信するとmessageイベントが発火するようです。そして、そのmessageイベントを捕捉して、コールバック関数をを実行する感じです。
Workerの生成元とWorkerという見方をすると分かりやすいかもしれません。
あと、Workerでできないことは主に、親ページに直接影響を与えるものらしいです。
Worker で実行できないことは主に、親ページに直接影響を与えるものです。これは、DOM の操作やページのオブジェクトを使用することを含みます。DedicatedWorkerGlobalScope.postMessage を使用してメインスクリプトにメッセージを戻してから変更操作を行う形で、間接的に実行しなければなりません。
Web Worker を使用する - Web developer guide | MDN
まとめ
どんなことに使えるのかイメージが湧いていない状態ですが、なんだか面白そうな雰囲気があります。