@blog.justoneplanet.info

JavaScriptで複雑な演算を行った場合、結果が帰ってくるまで他の処理は行えない。それを可能にするには以下の様なコードを使う。

■Workerオブジェクト

ブラウザでローカルのパスを叩いても実行されないので、以下のファイルをサーバ上に置いて実行する。

メイン

var worker = new Worker('sample.js');
worker.onerror = function(error){
    alert(error.message);//alert is not defined
    alert(error.filename);//file:///C:Desktop/sample.js
    alert(error.lineno);//1
}
worker.onmessage = function(event){
    alert('finished');
}

sample.js

alert('test');

エラーになる。sample.jsではwindowオブジェクトを始めブラウザが生成するオブジェクトにはアクセスできない。従って、以下の様なサンプルを用いる。

メイン

3628800とalertされるはずだ。

var worker = new Worker('sample.js');
worker.onerror = function(){
    alert('error');
}
worker.onmessage = function(event){
    alert(event.data);
}

sample.js

var n = 10;
var func = function(n){
    if(n === 1){
        return 1;
    }
    else{
        return n * func(n - 1);
    }
}
var result = func(n);
postMessage(result);

onmessageで受け取った引数のメンバ

• data : 3628800
• QueryInterface : function QueryInterface() { [native code] }
• type : message
• target : [object Worker]
• currentTarget : [object Worker]
• eventPhase : 2
• bubbles : false
• cancelable : false
• timeStamp : 1263220393472000
• stopPropagation : function stopPropagation() { [native code] }
• preventDefault : function preventDefault() { [native code] }
• initEvent : function initEvent() { [native code] }
• CAPTURING_PHASE : 1
• AT_TARGET : 2
• BUBBLING_PHASE : 3
• origin :
• source : null
• initMessageEvent : function initMessageEvent() { [native code] }

以下のコードで調査した。

var worker = new Worker('sample.js');
worker.onerror = function(){
    alert('error');
}
worker.onmessage = function(event){
    alert(event.data);
    for(var i in event){
        var data   = document.createTextNode(' : ' + event[i]);
        var member = document.createTextNode(i);
        var li     = document.createElement('li');
        li.appendChild(member);
        li.appendChild(data);
        document.getElementById('members').appendChild(li);
    }
}

残念ながらWorkerオブジェクトが使えるのは今のところFirefoxだけである。IE8、Chrome、Opera10、Safari4ではいずれも使えない。

また以下のようにpostMessageメソッドを用いてworkerにメッセージを投げることもできる。

var worker = new Worker('./sample.js');
worker.onerror = function(errro){
    console.log(error);
}
worker.onmessage = function(e){
    console.log(e.data);// 120
}
worker.postMessage("5");

投げられたメッセージをonmessageで受け取り計算結果をpostMessageで投げることができる。

onmessage = function(e){
    var n = e.data;
    var func = function(n){
        if(n === 1){
            return 1;
        }
        else{
            return n * func(n - 1);
        }
    }
    var result = func(n);
    postMessage(result);
}

参考

• Worker