初めてのWebWorkers

JavaScript HTML5

新年のやる気のあるうちにやっておこうと思い、WebWorkersを試してみたのです。
jsdo.itでファイルアップロード機能があったので、そこでやろうかと思ったら画像とか
マルチメディア系のファイルでないとアップロードできないみたいで……
仕方なしにローカル環境で試したのでした。
環境：MacOS 10.7.2 64bit / Google Chrome 17.0.963.12 dev

mongoose httpd

お手軽httpdであるmongooseをダウンロードしてきます。
Google Code Archive - Long-term storage for Google Code Project Hosting.
Windowsだとexeをダウンロードするだけなのでコンパイル作業は必要なく、これまたラクチンです。
今回はMacなのでmongoose-3.0.tgzをダウンロードしてきます。
その後は展開、コンパイルを以下の要領でします。

$ mv ~/Downloads/mongoose-3.0.tgz {作業フォルダ}
$ cd {作業フォルダ}
$ tar xvfz mongoose-3.0.tgz
$ cd mongoose/
$ make mac

ついでにhttpdの実行を。

$ ./mongoose -d no -i index.html -r ../

index.html / worker.js

作業フォルダにindex.htmlという名前で以下を保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>初めてのWebWorkers</title>
</head>
<body>
  <script>
    (function(){
      var MAX_SIN = 30,
          w = new Worker('worker.js');
      // w.onmessage = function(event) { ... };
      w.addEventListener('message', function(event){
        document.write(
          // event.data === result
          JSON.parse(event.data).join('<br>')
        );
      }, false);
      w.postMessage(MAX_SIN);
    }());
  </script>
</body>
</html>

同じく作業フォルダにworker.jsという名前で以下を保存します。

onmessage = function(event) {
  // event.data === MAX_SIN
  var i,
      result = [];
  for (i = event.data; i >= 0; i -= 1) {
    result[i] = Math.sin(i);
  }
  postMessage(JSON.stringify(result));
};

あとはWebWorkersに対応しているブラウザでhttp://localhost:8080/を見ると、
sin(0..30)までが表示されているはず。


postMessageするときにJSONにしていますが、確か最近のブラウザだとオブジェクトとかも渡せるとかなんとか。
なのでわざわざJSONにする必要もないかと思います。……初期？は文字列だけ、って制約が確かあったような。


でもこれだとWebWorkersが動作しているらしい、ということはわかっても
CPU負荷が分散されてるかどうかわからない……
なのでもうちょっとコードを変更する必要があります。が、それは次回にでも……（次回があるのか？）
あとSharedWorkerも使ってみないと……