ワーカーにメッセージを送信する
まず、Web Workersの基本的な使い方から説明します。Web Workersを使うには、new Worker()としてワーカーオブジェクトを作成します。ワーカーオブジェクトはブラウザーが許す限り、複数作成できます。
new Worker()としてワーカーオブジェクトを生成し、並列処理させるJavaScriptファイル名（URL）を引数に指定します。たとえば、
myWorker = new Worker("abc.js");
とすると「abc.js」ファイルが読み込まれます。
ファイルが読み込まれた時点ではワーカー処理は実行されないので、「メッセージ」を送信して処理を開始します。ワーカーに対してメッセージを送信するには、ワーカーオブジェクトのpostMessage()メソッドを使います。postMessage()の引数には文字列やオブジェクトなどを指定できます。ただし、古いバージョンのSafari (WebKit系) では引数に文字列しか指定できません。最新版のSafari 5では数値や配列、オブジェクトなども渡せます。
ワーカーにメッセージが送信されるとmessageイベントが発生します。ワーカー内ではaddEventListener("message", イベントハンドラ, フラグ)のようにしてイベントを捕捉した後、実際の処理を実行します。postMessage()で指定した引数はイベントハンドラに渡されるEventオブジェクトのdataプロパティに格納されるので、event.dataを参照することで呼び出し元からのデータを受け取れます。
ワーカー内でmessageイベントを受信したら処理を実行し、ワーカー内での処理が終わったらpostMessage()を使って呼び出し元にメッセージを送信します。postMessage()は呼び出し元に渡したい数値や文字列、配列やオブジェクトなどを引数に指定できます。
呼び出し元ではワーカーオブジェクトに対してaddEventListener("message", イベントハンドラ, フラグ)のようにすることでワーカーからのメッセージを捕捉できます。
実際のスクリプトはサンプル1です。ボタンをクリックするとワーカーにメッセージが送信され、ワーカーは受信した文字列に対して.jpを付加した文字列を返します。呼び出し元ではワーカー内で処理されたデータをアラートダイアログに表示します。
ボタンをクリックするとワーカーにASCIIの文字が送信される
ワーカー内で.jpが追加され、結果が呼び出し元のアラートダイアログに表示される
●サンプル1[HTML]
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Web Workersを使ってメッセージをやりとりする(1)</title>
</head>
<body>
<h1>Web Workersを使ってメッセージをやりとりする(1)</h1>
<form action="./ww.cgi" method="get">
<input type="button" id="sendMessage" value="ワーカーにメッセージを送信" />
</form>
<script>
document.getElementById("sendMessage").addEventListener("click", function(){
// ワーカー設定
var myWorker = new Worker("sub.js");
myWorker.addEventListener("message", function(event){
alert(event.data);
}, true);
myWorker.postMessage("ASCII");
}, true);
</script>
</body>
</html>
●サンプル1[sub.js]
addEventListener("message", function(event){
postMessage(event.data+".jp");
}, false);
