HTML5 Web Worker Communication

HTML5 Web Worker Communication

本文关键字：Communication Worker Web HTML5      更新时间：2023-09-26

我正在尝试想出一种在web工作程序脚本中调用函数并让它们向主脚本返回值的好方法，我发现很难找到可扩展的东西，因为它是异步的，并且是通过消息传递完成的，任何帮助都将不胜感激。这是我的网络工作者脚本。。。

self.addEventListener('message', function(e) {
    var data = e.data;
    switch (data.cmd) {
        case 'call' :
            self[data.funcName](data.args);
            break;
        default:
            self.postMessage('Unknown command: ' + data.msg);
        };
}, false);
function testWorkerFunction(args) {
    self.postMessage({'cmd': 'call', 'funcName': 'testClientFunction', 'args': args});
}

这是我的主要剧本。

$(function() {
    var someOtherVal;
    worker = new Worker('js/workers/uc-main-worker.js');
    worker.addEventListener('message', function(e) {
        console.log('Worker said: ', e.data);
        var data = e.data;
        switch (data.cmd) {
            case 'call' :
                self[data.funcName](data.args);
                break;
            default:
                console.log('Unknown command');
                break;
            };
    }, false);
    worker.onerror = function(e){
      throw new Error(e.message + " (" + e.filename + ":" + e.lineno + ")");
    };
    /* This is the bit I need some help with, how I can return a value back here */
    var someVal = messageWorker({'cmd': 'call', 'funcName': 'testWorkerFunction', 'args': 'hello'});
    //Not sure how to get a value back without invoking a function in the main script because I have to use messaging.
});
function messageWorker(message) {
    worker.postMessage(message);
}
function testClientFunction(args) {
    //Simply storing it as a global var.
    someOtherVal = args;
}

希望你能从我的代码中了解我想要的是什么，目前我可以获得testWorkerFunction返回的值，但只能通过调用另一个函数和/或将其存储为全局变量。

与Workers的通信不能同步完成，因为它们在不同的线程中运行。你必须使用回调来实现这种沟通。

如果你想让你的代码看起来比回调"末日金字塔"更优雅，你可以接受Promise模式，你可以使用Q或jQuery.deferred（）

编辑：如果您想使用"更干净"的回调，可以将messageWorker方法更改为这样。

function messageWorker(message, callback) {
    function listen(e){
        if (e.data.funcName === message.funcName){
            worker.removeEventListener("message". listen);
            callback(e.data.args);
        }
    }
    worker.addEventListener("message", listen)
    worker.postMessage(message);
}

看看vkThread插件。我想，这就是你想要的。这个插件允许您在线程中执行代码的任何函数。

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

希望这能有所帮助，

--Vadim

（在其他地方找不到解决方案后）我提出了一个相当简单的模式，用于通过需要访问调用代码的回调与web工作者进行通信：https://gist.github.com/therightstuff/eb415798b0e30866fe85d66af68969cf

编辑：哇，回头看我原来的帖子，我想知道当时我是不是中风了。链接已更新

相关文章：