libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Web Workersによるバックグラウンド処理 (4/5)

作成:2010-12-20 13:02
更新:2010-12-21 08:33

■オブジェクトをワーカーとやり取りする

先の例は、簡単なテキストを送るだけのものでした。実をいえば、ワーカーとやり取りできるのはテキストだけではありません。オブジェクトもそのままやりとりすることができるのです。

ただし、複雑なデータをやり取りするとなると、どのようにして複雑な処理を呼び出し会えるようにするか、も考えないといけません。Web Workersは、単に「メッセージを送る」「メッセージを受け取る」というだけのもので、ワーカーに複数の処理を用意して、必要に応じて異なる処理を呼び出すようなことはできません。実行する処理に関する情報も合わせて送受し、それに応じて処理を分岐するような仕組みを考えることになるでしょう。

例として、ワーカーにデータを蓄積していく簡単なデータベースを考えてみましょう。下にHTMLのソースコードを掲載しておきます。

ここでは、２つの機能を用意してあります。１つは、名前・電話番号・メールアドレスといったデータをワーカーに送信するもの。もう１つは、名前を送信してデータを検索するものです。それぞれaction、findといった関数で呼び出すようにしてあります。

ここでは、送受するデータはJSONオブジェクトの形にしてあります。送る際には、
{"cmd":コマンド,"name":名前,"tel":電話,"mail":メール}
このような形式のオブジェクトにして送信します。ワーカー側では、まずcmdのコマンドをチェックし、それに応じて処理を分岐させよう、というわけです。

ワーカーからメッセージを受け取る処理では、送られてくるのがJSONオブジェクトの配列であるという前提で処理を作成しています。オブジェクト数がゼロならデータが見つからないと判断し、それ以外はforでオブジェクトを順に取り出し、そこからname,tel,mailの値を取り出してまとめています。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※HTMLのソースコード


<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<title>Sample Page</title>
		<script type="text/javascript">
		<!--
var woker;

function init(){
	worker = new Worker("script.js");
	worker.onmessage = function(e){
		var datas = e.data;
		var result = "";
		if (datas.length == 0){
					result = "見つかりませんでした。";
		} else {
			for(var i in datas){
				var data = datas[i];
				result += data.name + "," + data.tel +
					"," + data.mail + "<br>";
			}
		}
		var p = document.getElementById("data");
		p.innerHTML = result;
	}
}

function action(){
	var nm = document.getElementById("name").value;
	var tel = document.getElementById("tel").value;
	var mail = document.getElementById("mail").value;
	var obj = {"cmd":"add","name":nm,"tel":tel,"mail":mail};
	worker.postMessage(obj);
}
function find(){
	var fd = document.getElementById("find").value;
	var obj = {"cmd":"find","name":fd};
	worker.postMessage(obj);
}
		
		//-->
		</script>
	</head>
	<body onload="init();">
		<h1>サンプル</h1>
		名前：<input type="text" id="name"><br>
		電話：<input type="text" id="tel"><br>
		メール：<input type="text" id="mail"><br>
		<input type="button" onclick="action();" value="send">
		<hr>
		検索：<input type="text" id="find">
		<input type="button" onclick="find();" value="find">
		<hr>
		<p id="data">data...</p>
	</body>
</html>
※関連コンテンツ

「JavaScriptによるHTML5プログラミング入門」に戻る