web-dev-qa-db-ja.com

JavaScriptWebWorkerに関数を渡す方法

通常のファイルを参照できないため、postMessage()を介して1つまたは複数の関数をWebワーカーに渡したいと思います。

Webワーカーを開始するために、オブジェクトURL（Blobから作成）をWorkerコンストラクターに渡します。それから私はメッセージを渡します、しかし今のところメッセージに関数を入れる運はありません。

（JSON）メッセージに関数を直接含めることはできません（規定されているように ここ ）。importScriptsは理論的には許可されていますが、これまでのところChromeまたはFirefox。

Htmlファイルの本文：

<div id="divText">1234</div>
<script>
    var greeter = function greet(name) {
        return "hello " + name;
    };
    function webWorkerWorker() {
        self.postMessage("started1");
        self.onmessage = function(event) {
            importScripts(event.data.content);
            self.postMessage("importScripts success");
            var result = greeter("john");
            self.postMessage(result);
        };
    }
    var functionBody = mylib.extractFunctionBody(webWorkerWorker);
    var functionBlob = mylib.createBlob([functionBody]);
    var functionUrl = mylib.createObjectURL(functionBlob);

    var functionBody2 = mylib.extractFunctionBody(greeter);
    var functionBlob2 = mylib.createBlob([greeter]);
    var functionUrl2 = mylib.createObjectURL(functionBlob2);

    var worker = new Worker(functionUrl);
    worker.onmessage = function(event) {
        document.getElementById("divText").innerHTML = event.data;
    }
    worker.postMessage({
                type: "init",
                content: functionUrl2
            });
</script>

現在、divText値を「importScriptssuccess」に設定しています。

私は何か間違ったことをしていますか？関数をWebワーカーに渡すことができる別の方法はありますか？それとも不可能ですか？

javascriptweb-worker
21
Lachlan

この方法は問題なく機能することがわかりました。私のワーカーにはバグがあっただけです。

var result = greeter("john");

する必要があります

var result = greet("john");

これは理にかなっています-greeter変数をワーカーに渡していますが、渡したオブジェクトの変数名を知る理由はありません。

7
Lachlan

より一般的な答えを探している人のために：ここにプラグインがあります。これを使用すると、JavaScriptコードの任意の関数をスレッドで実行できます。

http://www.eslinstructor.net/vkthread/

それを「機能のアウトソーシング」と考えてください。関数を引数としてプラグインに渡し、コールバックで結果を取得します。オブジェクトのメソッド、依存関係のある関数、無名関数、ラムダを「アウトソーシング」することもできます。

楽しい。

--Vadim

5
vadimk

はい、もちろん可能です、私はそれを実装しました

これはジェネリックワーカーを実行する約束です

/*
    @data.context, The context where the callback functions arguments are, ex: window
    @data.callback, ["fn_name1", "fn_name2", function (fn1, fn2) {}]
        The callback will be executed, and you can pass other functions to that cb
    @worker_url string url of generic web worker
*/
function genericWorker(worker_url, data) {
    return new Promise(function (resolve, reject) {

        if (!data.callback || !Array.isArray(data.callback))
            return reject("Invalid data")

        var callback = data.callback.pop()
        var functions = data.callback
        var context = data.context

        if (!worker_url)
            return reject("Worker_url is undefined")

        if (!callback)
            return reject("A callback was expected")

        if (functions.length>0 && !context)
            return reject("context is undefined")

        callback = fn_string(callback) //Callback to be executed
        functions = functions.map((fn_name)=> { return fn_string( context[fn_name] ) })

        var worker = new Worker(worker_url)

        worker.postMessage({ callback: callback, functions: functions })

        worker.addEventListener('error', function(error){
            return reject(error.message)
        })

        worker.addEventListener('message', function(e) {
            resolve(e.data)
            worker.terminate()

        }, false)


        //From function to string, with its name, arguments and its body
        function fn_string (fn) {
            var name = fn.name
            fn = fn.toString()

            return {
                name: name,
                args: fn.substring(fn.indexOf("(") + 1, fn.indexOf(")")),
                body: fn.substring(fn.indexOf("{") + 1, fn.lastIndexOf("}"))
            }
        }

    })
}

汎用ワーカーファイルworker_for_anything.js

self.addEventListener('message', function(e) {    
    var worker_functions = {} //Functions used by callback
    var args = [] //Arguments of the callback

    for (fn of e.data.functions) {
        worker_functions[fn.name] = new Function(fn.args, fn.body)
        args.Push(fn.name)
    }

    var callback = new Function( e.data.callback.args, e.data.callback.body) //Callback passed and ready to be executed    
    args = args.map((fn_name) => { return worker_functions[fn_name] }) //FUnctions loaded as arguments
    var result = callback.apply(null, args) //executing callback with function arguments
    self.postMessage( result )

}, false)

それを使用する：）

var data = {
    context: window, //the context of the functions passed, ex: window for blockCpu
    callback: ["blockCpu", function (bla) {
        bla(7000) //blocking for 7000 ms
        return "bla" //This return is catched in the promise
    }]
}

genericWorker("/worker_for_anything.js", data)
    .then(function (result){
        console.log("result", result)

    }).catch((error)=> { console.log(error) })

//random blocking function
function blockCpu(ms) {
    var now = new Date().getTime();
    var result = 0
    while(true) {
        result += Math.random() * Math.random();
        if (new Date().getTime() > now +ms)
            return;
    }   
}
2
Fernando Carvajal