how to restart web worker after stop

Question

I am using web worker in my application. At certain point I want to stop my web worker and restart it. Stopping web worker is working fine, then I post some message to web worker, its not responding unless I reload the page. So I want to know how to restart the web worker after stop it without reloading the page.

Main.js

var ww = new Worker("worker.js");

function mainFunction(){
  //some code to form data
 f1(data,function(res){
      return res;
};

function f1(data,callback){
  ww.postMessage({'action':'action1'});
  ww.onmessage = function(event){
  var response = event.data;
  callback(response);
}

function f2(){
  ww.postMessage({'action':'stopWW'});
  ww.postMessage({'action':'reStartWW'});
  ww.onmessage = function(event){
    mainFunction();
  }
}

In worker.js

self.addEventListener('message',function(e){
   var functionName=e.data.action;

   switch(functionName){
      case 'stopWW':
        self.close();
      break;
      case 'reStartWW':
        var test = {'key':1}
        self.postMessage(test);
      break;
      case 'action1':
         //do something
         self.postMessage(somedata);
         break;
      }
  });

Answer 1

I would suggest you to create a webworker in a function, with this in you can call it multiple times.

var ww;
function setWebWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(ww) == "undefined") {
              ww = new Worker("worker.js");
       }
    }
}
setWebWorker();

just like this page suggests.

Answer 2

Once close() or terminate() have been called, your worker is effectively closed and should be unreachable. You could create a new worker by calling ww = new Worker("worker.js"); again, but the internal state of the first worker won't be acessible anymore.

Now if what you want is to essentially pause the worker, but keep it ready for restart with its internal state, I'd recommend simply switching listeners. Something like this :

function whenActive(event){
   var functionName=e.data.action;

   switch(functionName){
      case 'stopWW':
        self.removeEventListener("message", whenActive);
        self.addEventListener("message", whenNotActive);
        //do other stopping actions
        break;
      [...]//your other cases, but not "restartWW"
   }
}
function whenNotActive(event){
   var functionName=e.data.action;

   if(functionName === 'reStartWW'){
        self.addEventListener("message", whenActive);
        self.removeEventListener("message", whenNotActive);

       [...]//do other re-startup actions
   }
}

//start the cycle
self.addEventListener("message", whenActive);

Answer 3

How do you restart your worker?

Your declaration of the web worker is only done once at page load from looking at your code.

Please see: https://www.w3schools.com/html/html5_webworkers.asp for some color.

var w;

function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() { 
    w.terminate();
    w = undefined;
}