AngularJS和web workers

Question

angularJS如何使用web workers在后台运行进程？有没有什么我应该遵循的模式呢？

目前，我正在使用一个服务，该服务在单独的web worker中具有该模型。此服务实现如下方法：

ClientsFacade.calculateDebt(client1); //Just an example..

在实现中，此方法向worker发送一条包含数据的消息。这允许我抽象出它是在单独的线程中执行的这一事实，我还可以提供一个实现来查询服务器，甚至是在同一个线程中执行此操作的服务器。

因为我是javascript的新手，而且我只是在回收我从其他平台获得的知识，我想知道这是不是你会做的事情，或者也许我正在使用的Angular提供了一种这样做的方式。另外，这在我的体系结构中引入了更改，因为工作人员必须显式地将更改推送到控制器，然后控制器更新它的值，然后这反映在视图中，我是不是过度工程了？让人有点沮丧的是，网络工作者通过不让我分享记忆等方式来“保护”我不让我搞砸。

Answer 1

与Web worker的通信是通过消息传递机制进行的。截获这些消息发生在回调中。在AngularJS中，放置web worker的最佳位置是在服务中，正如您适当注意到的那样。解决这个问题的最好方法是使用promises，Angular与promises配合使用的效果令人惊叹。

以下是service中的webworker示例

var app = angular.module("myApp",[]);

app.factory("HelloWorldService",['$q',function($q){

    var worker = new Worker('doWork.js');
    var defer = $q.defer();
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

    return {
        doWork : function(myData){
            defer = $q.defer();
            worker.postMessage(myData); // Send data to our worker. 
            return defer.promise;
        }
    };

});

现在，任何访问Hello World服务的外部实体都不需要关心HelloWorldService的实现细节- HelloWorldService可能会通过web worker、http处理数据，或者直接在那里进行处理。

希望这是有意义的。

Answer 2

一个非常有趣的问题！我发现web worker规范有点笨拙(可能有很好的理由，但仍然很笨拙)。需要将工作代码保存在单独的文件中，这使得服务的意图难以阅读，并在angular应用程序代码中引入了对静态文件URL的依赖。使用URL.createObjectUrl()可以缓解此问题，该方法可用于创建JavaScript字符串的URL。这允许我们在创建worker的同一文件中指定worker代码。

var blobURL = URL.createObjectURL(new Blob([
    "var i = 0;//web worker body"
], { type: 'application/javascript' }));
var worker = new Worker(blobURL);

web worker规范还将worker和主线程上下文完全分离，以防止出现死锁和活锁等情况。但这也意味着，如果不做一些改动，您将无法在worker中访问您的angular服务。worker缺少一些我们(和angular)在浏览器中执行JavaScript时所期望的东西，比如全局变量"document“等。通过在worker中”模仿“这些必需的浏览器功能，我们可以让angular运行。

var window = self;
self.history = {};
var document = {
    readyState: 'complete',
    cookie: '',
    querySelector: function () {},
    createElement: function () {
        return {
            pathname: '',
            setAttribute: function () {}
        };
    }
};

一些功能显然不会工作，绑定到DOM等。但是注入框架和例如$http服务将工作得很好，这可能是我们想要的worker。我们从中获得的好处是，我们可以在worker中运行标准的angular服务。因此，我们可以对worker中使用的服务进行单元测试，就像我们对任何其他角度依赖项所做的那样。

我写了一篇文章，详细介绍了这个here，并创建了一个github存储库，它创建了一个实现上面讨论的here思想的服务

Answer 3

我在Angular here中找到了一个web工作者的完整工作示例。

webworker.controller('webWorkerCtrl', ['$scope', '$q', function($scope, $q) {

    $scope.workerReplyUI;
    $scope.callWebWorker = function() {
        var worker = new Worker('worker.js');
        var defer = $q.defer();
        worker.onmessage = function(e) {
            defer.resolve(e.data);
            worker.terminate();
        };

        worker.postMessage("http://jsonplaceholder.typicode.com/users");
        return defer.promise;
    }

    $scope.callWebWorker().then(function(workerReply) {
        $scope.workerReplyUI = workerReply;
    });

}]);

它使用promises来等待worker返回结果。