html5のWeb Workers - お屠蘇の日記のブログ

最近html5の参考書を購入しました。
これまでのhtmlと互換性はあるものの、劇的に進化している気が。。
単なるwebドキュメントレベルを超えて一つのプログラミング言語となったような。
今後業務系だろうがオープン系だろうが、設計レベルから根本的に変わりそう。
ちょっと怖い。

なーんとhtml5から並列処理が出来てしまうとのこと。
他にも色々とありますが、勉強したら書いていきます。
で、今回は並列処理の元である、WebWorkerについて。
･･････書こうとしましたが、サンプル動かしていたら、
ブラウザによってまだ未実装部分があることが判明。
google chromeは動きました。

とりあえず動く物を。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
		var worker;
		function start() {
			if(worker) {
                                //workerの実行を停止
				worker.terminate();
			};
			var num = document.getElementById("num").value;
			var ans = document.getElementById("ans");
			worker = new Worker("webworks.js");
　　　　　　　　　　　　//workerが処理を終えたときに実行される
			worker.onmessage = function(event) {
				ans.value = event.data;
			};
                        //workerへデータを送るためのメソッド
			worker.postMessage(num);
		}
		function stop() {
			if(worker) 
				worker.terminate();
			alert("stop");
			
		}
	</script>
</head>
<body>
number:<input type="text" id="num"> ====> <input type="text" id="ans">
<button onclick="start()">START</button>
<button onclick="stop()">STOP</button>
<br>
<textarea rows="4" cols="40" placeholder="計算中にカキコできます"></textarea>
</body>
</html>

webworks.jsファイル

//workerの処理内容
self.onmessage = function(e) {
	var data = e.data;
	var result = 0;
	var num = 10000000;
	for(var i=0;i<=num;i++) {
		result += i*data;
		
	}
        //実行元へデータを送る
	postMessage(result);
};

id=numのところに適当な数字を入れるとworkersが裏で数値計算を行います。
本来ならば、長い数値計算をやっている間、画面上の操作ができなくなるのですが、
このWorkerを用いると別スレッドで計算を行うため、画面上の操作が可能となります。
上記例だと、数値を適当に入れ、startボタンを押下後、下にあるテキストエリア内に
書き込みが出来てしまいます。
すげ。。
動かしてみたイメージ。ブラウザはgoogle chromeを使用。
半角で適当に数字を入れてstart押下。

計算結果が出るまでテキストエリアにカキコ。

カキコ中に結果が表示。

ただ書いていて混乱したことは、、
workerのハンドラ、つまり、workerが処理を終え、値を返したときに実行される関数を指定する
プロパティ名はonmessageで、
workerが処理を実行するためのプロパティ名もonmessage。
また、
workerが値を返すメソッド名はpostMessageで、
workerへ値を送信するメソッド名もpostMessage
と同じ名前となっている点である。
幸い、worker用のjavascriptは独立して書くので良かった。

ちなみに共有Workerも作成できるらしく、複数画面：Worker＝多：１の関係が作れます。
ん？、workerから全画面に対してブロードキャストも出来るのか？
･･････意味があるのか分からんが非常に疑問が出てきた。

まだ頭の中が整理できていないので、後ほどきちんと書きます。
今回はメモ程度。