一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

Web Workerの機能を試してみた

今回はHTML5のWeb Workerを使ってみました。

この機能は一言でいうと、「バックグラウンドで処理を実行するための仕組み」のことです。

JavaScriptはシングルスレッドで処理が行われるため、同時に複数スクリプトを実行する事はできません。
でもこのWeb Workerを使うと、バックグラウンドで処理をマルチスレッドで行ってくれるので、例えば普通にDOM操作やイベント処理をしながら、バックグラウンドで時間のかかる計算処理等を行うことも可能になります。


てなわけで早速、簡単なサンプルコードを書いてみました。

ファイルはwebworker_sample.htmlとwebworker_sample.jsに分けてつくってあります。

これ↓

//webworker_sample.html

<html> 
  <head> 
  <title>WebWorker Sample</title> 
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

  <script id="worker1" type="javascript/worker">
    this.onmessage = function(event) {
      this.postMessage('送られたメッセージは ' + event.data + 'ですよー');
    }
</script>

  <script>
$(document).ready(function(){
    if (window.Worker){
      var worker = new Worker("webworker_sample.js");
      worker.onmessage = function(event){
        alert(event.data);
      };
      $("#start").on("click", function(event){
        worker.postMessage($("#name").val());
      });
  } else {
      window.alert("本ブラウザではWeb Workersが使えません");
  }
});
  </script>
</head> 
<body> 
  <form>
    <input id="name" name="name"/>
    <input id="start" name="start" type="button" value="send"/>
  </form>
</body>
</html>

//webworker_sample.js

self.onmessage = function(event) {
  self.postMessage('送られたメッセージは ' + event.data + 'ですよー');
}


では順に見ていきたいと思います。

まず、webworker_sample.htmlのほうですが、これは以下のような感じで処理を進めています。

if文でそもそもWeb Workerが使用できる実行環境なのかどうかを判別。
              ↓
使用出来る場合、Workerインスタンスを生成(この際、Workerで実行するJSファイルを引数に指定して、newします)
そしてonmessageプロパティに、コールバック処理を先に登録しました(Workerで処理した後に返ってくるデータをアラート)。
              ↓
送信ボタンを押した時のイベント処理を登録。
フォームに入力したデータをpostMessageメソッドに渡して、データ送信を行います。

              ↓webworker_sample.jsへ

webworker_sample.jsのほうでメッセージを受け取ると、onmessageプロパティに登録してある処理が実行されます。ここでの処理は受信完了メッセージを再度、webworker_sample.htmlにpostMessageで返す処理を書いてあります。ちなみにselfは自分自身を表す変数です。

              ↓webworker_sample.htmlへ

アラートが表示されて一連の処理が完了します。


こんな感じで使い方はなんとなくわかりました。ただちょっと気になったのはpostMessageメソッドってWeb Messagingを試したときにもつかったのですが、これらは厳密には違うメソッドですよね??

あと、インラインでWorkerを動かすための処理を

http://www.html5rocks.com/ja/tutorials/workers/basics/


を参考にして書こうとおもったのですが、Uncaught ReferenceError: BlobBuilder is not defined
というエラーがでてうまくいきませんでしたorz

まだあまり調査していないのでよくわかりませんが、単なる僕の記述ミスなのか、それともそもそもの仕様が変わったとかの問題か。。

もっと勉強が必要ですねーーまたなにか分かれば追記します。
だれか分かる人もしいらっしゃいましたら、インラインで書く方法、教えてください!!


小さな事からコツコツと。