JavaScript のWeb Worker API の使い方についての覚え書きです。
Web Worker とは
Web Workerは、JavaScriptの処理を、バックグランドで並列に実行するための機能。
Workerへの処理命令
呼び出し元の記述例
main.jsから、Worker（worker.js）を呼び出し、処理を投げます。
index.html
<label for="input1">width: </label><input id="input1" type="number">
<label for="input2">height: </label><input id="input2" type="number">
<input id="btn" type="button" value="Area?">
<output id="output"></output>
main.js
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('btn').addEventListener('click', function () {
let width = document.getElementById('input1').value;
let height = document.getElementById('input2').value;
let output = document.getElementById('output');
//Workerオブジェクト
var worker = new Worker('url_hoge/worker.js');
//workerへ処理を命令
worker.postMessage({
'width': width,
'height': height
});
//Workerから処理結果を受信したときの処理
worker.addEventListener('message', function (e) {
output.textContent = e.data;
}, false);
//Workerからエラーを受信したときの処理
worker.addEventListener('error', function (e) {
output.textContent = e.message;
}, false);
})
})
- コンストラクタ
Worker()の引数で、worker側のjsのパスを指定。 -
postMessage()の引数がworker.jsへ渡される。引数には文字列しか取れないので、オブジェクトJSONに変換してから渡す。引数にはJavaScriptのあらゆるオブジェクトを指定可能。 - worker.js側からの処理が返ると、
messageイベントが発火する。このイベントオブジェクトのdataプロパティとして、処理結果が返される。
Worker側の記述例
全然重たい処理ではないけど、Worker側でJavaScriptを実行させてみます。
worker.js
self.addEventListener('message', function (e) {
if (!Number(e.data.width) || !Number(e.data.height)) {
self.postMessage('入力エラーです');
} else {
self.postMessage(Number(e.data.width) * Number(e.data.height));
}
})
- main.js側からの命令を受けると、worker.js側で
messageイベントが発火する。 - main.jsから
postMessage()の引数として渡されたデータが、イベントオブジェクトのdataプロパティに入る。 -
postMessage()で、main.jsに処理結果を返す。
postMessage()
呼び出し元からWorkerへ処理を命令する、あるいは、Workerから呼び出し元へ処理結果を返す。
引数は、メッセージを受け取った側からは、messageイベントのdataプロパティでアクセスできる。
messageイベント
Worker側で呼び出し元からの処理命令を受け取ったとき、あるいは、呼び出し元側でWorkerからの処理結果を受け取ったときに発生するイベント。
errorイベント
Worker側で実行時にエラーが発生したときに発生するイベント。
エラーイベントは以下のプロパティをもつ。
-
message人間が読み取れるエラーメッセージ -
filenameエラーが発生したスクリプトのファイル名 -
linenoスクリプトファイル内でエラーが発生した場所の行番号
Workerの終了
terminate()
worker.terminate();
呼び出し側からWorkerを終了させる。Workerは、自身の操作を完了したり、クリーンアップしたりすることなく、直ちに終了する。
close()
Worker側から自分自身を終了する。