how to use web worker in angular js for calling service?

Question

I make a simple program to call http service.First I call http service in my controller and display data on view given plunker

http://plnkr.co/edit/sHLQJaH7ElHVU6xweQuS?p=preview

but I need to call service using web workers and send data to my controller .can we call service in background ? I got one solution this but not working for me

AngularJS and web workers

I used this solution in my plunker http://plnkr.co/edit/7OZvbFnHxuVLUtDFf1hm?p=catalogue

not able to implement web worker in my project could you please tell me how to use webworkser in angular js

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

    var worker = new Worker('https://dl.dropboxusercontent.com/s/9wkl32e23vdvs6h/default.json?dl=0');
    var defer = $q.defer();
    worker.addEventListener('message', function(e) {
      console.log('Worker said: ', e.data);
      defer.resolve(e.data);
    }, false);

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

}]);

Are you sure that your worker file is being loaded? You are strangely loading something that should be a worker.js file from Dropbox — nicholaswmin, Jul 21 '15 at 05:33
@NicholasKyriakides I never use webwork before try to use this first time — Shruti, Jul 21 '15 at 05:45
I sure can - https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers — nicholaswmin, Jul 21 '15 at 05:46
@NicholasKyriakides from this link how user call http server request in background .could you please change some on my plunker ..or make simple program on plunker of webwork — Shruti, Jul 21 '15 at 05:48
First, get a workable example of a proper web-worker set up by following the link I gave you - Then edit your answer with your updated code. Then hopefully someone can lend you a hand if it's still not working. — nicholaswmin, Jul 21 '15 at 05:52
It looks like you're trying to load json data as a worker. This doesn't really make any sense... a worker contains code to run, not (just) data. If you're just trying to load data from somewhere, you should be able to use `$http`, with no need for a worker. I would look in the docs/other tutorials around for `$http`, and then post back if that isn't what you want. — Michal Charemza, Jul 21 '15 at 12:14
@MichalCharemza mean what is basic use of workers ..?can you please give one simple example — Shruti, Jul 22 '15 at 03:14

JanisP · Accepted Answer · 2015-07-22T03:16:56.837

I fixed your code and build small sample for you.

pnkr is a bit slow for your sample data, so you'll have to be patient to see the result (wait som 30sec for sure)
http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview

Due to the fact that the worker is plain JS, and for sample reasons I wanted to keep everything in one file and wanted the source to be compatible in IE as well, I used URL.createObjectURL, but you can just put the download scipt in seperate file.

In this case using worker is useless, because you are not doing any work there, just downloading stuff, better use $http.get

The important part for worker:

 doWork : function(){
       var worker = new Worker(blobURL);
        var defer = $q.defer();

        worker.addEventListener('message', function(e) {
        console.log('Worker said: ', e.data);
           defer.resolve(e.data);
          }, false);

        worker.postMessage("random data to worker"); // Send data to our worker. 
        return defer.promise;
    }

And worker it self:

var blobURL = URL.createObjectURL(new Blob([
    "onmessage = function (event) { \
        var xhr = new XMLHttpRequest(); \
        xhr.onreadystatechange=function(){\
        if (xhr.readyState==4 && xhr.status==200){\
            postMessage(xhr.responseText);\
        }\
    }; \
    xhr.open('GET', 'https://dl.dropboxusercontent.com/s/9wkl32e23vdvs6h/default.json?dl=0' , false); \
    xhr.send(); \
    }"
    ], { type: 'application/javascript' }));

Calling from your controller

   HelloWorldService.doWork().then(function(data){
     console.log("data received to Ctrl");
   $scope.results = data;})

For displaying results, I am just pushing out raw response in html, because question was about web workers.

I understand your code..But I one problem I know I can achieve this using $http in angular .but where I will use woker ? where we use web worker ..could you please give simple example so that it better understand using doc I am not able to understand properly — Shruti, Jul 22 '15 at 03:15
I just need simple example where we go for worker .As every body saying we create thread in that ..So could you just make simple example in which two function run simultaneously .on that function there is loop of 100 — Shruti, Jul 22 '15 at 03:18
I have updated link in my response as well, but here is correct link: http://plnkr.co/edit/JXoylu9RbkY4hepTgirJ?p=preview — JanisP, Jul 22 '15 at 03:18
http://plnkr.co/edit/HvHKUskRqtLLAl2G8Nkv?p=preview Basically the worker just waits for few seconds and sends response. I have called the same worker twice with different arguments so it is more clearly visible. — JanisP, Jul 22 '15 at 07:04

how to use web worker in angular js for calling service?

1 Answers1