Как использовать Web Worker в AngularJS?

Я использую AngularJS Seed и хочу увидеть работающую реализацию Web Worker.

Я хочу заставить работать простой Web Worker, чтобы понять его, но у меня возникла проблема с функциональностью.

У меня есть код Web Worker в services.js вот так:

'use strict';

/* Services */
var app = angular.module('myApp.services', []).

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

    var worker = new Worker('js/doWork.js');
    var 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;
        }
    };

}]);

В папке js у меня есть файл doWork.js и его содержимое:

self.addEventListener('message', function(e) {
  self.postMessage(e.data);
}, false);

Мой файл controllers.js пуст и выглядит так:

'use strict';

/* Controllers */
var app = angular.module("myApp.controllers",[]);

app.controller('MyCtrl1', [ '$scope', function($scope) {


}]).controller('MyCtrl2', [ '$scope', function($scope) {


}]);

Что я хочу, так это увидеть вывод Web Worker.

Ошибка, которую я получаю с этой настройкой:

Uncaught TypeError: невозможно вызвать метод factory из неопределенного


angularjs factory web-worker angular-services worker
person achudars    schedule 08.08.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

У вас есть синтаксическая ошибка?

сдача

/* Services */
var app = angular.module('myApp.services', []).

to

/* Services */
var app = angular.module('myApp.services', []);
person coreyb    schedule 09.08.2013
comment
Я исправил эту ошибку, спасибо! Ошибок больше нет, но я все еще не вижу сообщения от моего Web Worker. В консоли не появляется ничего, что могло бы подтвердить, что Web Worker что-то сделал. - person achudars; 09.08.2013
comment
Вы сказали работнику что-нибудь сделать? Возможно, он просто сидит и ждет вас. Вам нужно внедрить свой $HelloWorldService в контроллер и вызвать $HelloWorldService.doWork(something). app.controller('MyCtrl1', [ '$scope', '$HelloWorldService', function($scope, $HelloWorldService) { $HelloWorldService.doWork("something"); }]).controller('MyCtrl2', [ '$scope', function($scope) { }]); - person coreyb; 09.08.2013

arrow_upward
1
arrow_downward

У вас должно быть что-то, чтобы разрешить обещание, возвращенное вашей службой. Что-то в духе

var promise = HelloWorldService.doWork( input );
promise.then( function( allWentGoodMessage ){
    // green path code goes here
}, function( somethingWentBadMessage ){
    // error handling code goes here
} );

Кроме того, вам нужно будет внедрить службу в контроллер, который вызывает службу.

Взгляните на это post для другого способа работы с веб-воркерами в AngularJS.

И вы также можете ознакомиться с реализацией промисов, $q в AngularJS.

person Steen    schedule 28.10.2014