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

では、ワーカー側のスクリプトを下に掲載しておきましょう。

ワーカーのスクリプトは、別にonmessageなどの処理しか用意してはいけない、ということはありません。ごく普通にグローバル変数を用意し、そこにデータなどを保管しておくことができます。

ただし、このグローバル変数は、あくまで「ワーカー内で利用できるもの」です。例えば、ここでは、datasというグローバル変数を用意し、ここにデータを蓄積していきますが、これはHTMLのJavaScriptからは見えません。ワーカー内のグローバル変数はワーカー内で独立しており、外部から利用できないのです。

ここでは、onmessageでメッセージを受け取ると、まず送られてきたオブジェクトのcmdをチェックし、それが"add"か"find"かによって処理を変えています。addならばデータをそのままdatasにpushして保存し、findならば繰り返しを使ってdatasからオブジェクトを取り出し、nameが同じものを探して返送します。

このように、ある程度複雑な処理も、JSONオブジェクトのような形で必要な情報をまとめて送ることで対応できるようになります。Web Workers自体は非常にシンプルな機能ですが、応用次第でいろいろと複雑なことも可能になるのです。いろいろな使い方を考えてみてください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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

var datas = new Array();

onmessage = function(e){
	var obj = e.data;
	if(obj.cmd == "add"){
		datas.push(obj);
		postMessage(datas);
	} else if (obj.cmd == "find"){
		for(var i in datas){
			var data = datas[i];
			if (data.name == obj.name){
				postMessage(new Array(data));
				return;
			}
		}
		postMessage(new Array());
	}
}