HTML5のWebWorkersを使ってみた。

HTML5

シングルスレッドのJavaScriptで並列処理を実現する技術。とりあえず並列処理の恩恵はないが、ごく簡単なサンプルで試してみた。Firefox4.0とSafari5.0.5でやってみたところ問題なく動作した。

workerとのデータのやり取りには"postMessage"と"onmessage(イベントリスナーを使う場合はmessageイベント)"で行う。

注意点としては、Worker側ではDOMが使えない点。prototype.jsやjQueryが使えないので注意。


html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function $(id) {
	return document.getElementById(id);
}

var worker = new Worker("worker.js");

function messageHandler(event) { 
	alert(event.data); 
}

function errorHandler(error) {
	alert(error.message);
}

window.onload = function() {
	if (typeof(Worker) !== "undefined") {
		worker.addEventListener("message", messageHandler);
		worker.addEventListener("error", errorHandler); 
	        setTimeout("worker.postMessage('worker')", 1000);
	} else {
		alert("Web Workersが利用できません。");
	}
}

</script>
</head>
<body>
</body>
</html>

worker.js

function messageHandler(event) { 
	postMessage("Hello, " + event.data + " !");
}

addEventListener("message", messageHandler);