Web Worker を使ってみる

JavaScript

Web Worker ってどう使うんだろうって思って、使ってみました。

以下のコードは「入力された数字を 2倍にして、 !!! で囲み、表示する。」コードです。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Web Worker Test</title>
<script id="worker01" type="text/js-worker">
/* 2倍にして返す */
onmessage = function (oEvent) {
  postMessage(parseInt(oEvent.data) * 2);
};
</script>
<script id="worker02" type="text/js-worker">
/* !!! で修飾して返す */
onmessage = function (oEvent) {
  postMessage('!!! ' + oEvent.data + ' !!!');
};
</script>
<p>入力された数字を 2倍にして、 !!! で囲み、表示する。</p>
<p id="input">
  <input type="text" id="num" value='12345' />
  <input type="button" value="submit" id="button" disabled />
</p>
<p id="result">spam, spam, spam.</p>
<script>
// 与えられた ID のデータを取得し、その内容の Web Worker を作成し、返す。
// 以下のリンク先から流用した。
// https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workers#Embedded_workers
var _getWorker = function _get_worker(_id) {
  var blob = new Blob(
    Array.prototype.map.call(
      document.querySelectorAll(_id),
      function (oScript) { return oScript.textContent; }),
    {type: "text/javascript"});
  return new Worker(window.URL.createObjectURL(blob));
};

// Worker の作成
var worker01 = _getWorker('#worker01'),
    worker02 = _getWorker('#worker02');

// worker01 からの戻り値は worker02 に渡す
worker01.onmessage = function (oEvent) {
  worker02.postMessage(oEvent.data);
};

// worker02 からの戻り値は表示する。
worker02.onmessage = function (oEvent) {
  document.getElementById('result').innerHTML = oEvent.data;
};

// button のクリックに設定する
var button = document.getElementById('button');
button.onclick = function _postWorker01() {
  var value = document.getElementById('num').value;
  worker01.postMessage(value);
};

// ボタンを有効化する。
button.removeAttribute('disabled');
</script>