javascriptweb-worker

How to create a SharedWorker using a blob?


I would like to create a SharedWorker as described in a chapter of an excellent book: https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch5.md

I was able to cook up a very good example for normal web workers:

function createAsker(limit) {
    var blob = new Blob(["onmessage = function(e) { " +
                           "if (self.higher === undefined) self.higher = " + limit + "; " +
                           "if (self.lower === undefined) self.lower = 1;" +
                           "if (e.data === 'correct') { " +
                             "postMessage('Party time'); " +
                           "} else {" +
                             "if (e.data === 'greater') self.lower = parseInt((self.lower + self.higher) / 2);" +
                             "if (e.data === 'lower') self.higher = parseInt((self.lower + self.higher) / 2);" +
                             "postMessage(parseInt((self.lower + self.higher) / 2));" +
                           "}" +
                         "}"]);
    var blobURL = window.URL.createObjectURL(blob);
    var worker = new Worker(blobURL);
    return worker;
}

var asker = createAsker(1000);

function createAnswerer(limit) {
    var blob = new Blob(["onmessage = function(e) { " +
                            "postMessage((e.data == " + limit + ") ? 'correct' : ((e.data < " + limit + ") ? 'greater' : 'lower'));" +
                         "}"]);
    var blobURL = window.URL.createObjectURL(blob);
    var worker = new Worker(blobURL);
    return worker;
}

var answerer = createAnswerer(42);

asker.onmessage = function(e) {
  console.log('Asker says: ' + e.data);
  if (e.data !== "Party time") {
    setTimeout(function() {answerer.postMessage(e.data)}, 1000);
  }
};

answerer.onmessage = function(e) {
  console.log('Answerer says: ' + e.data);
  setTimeout(function() {asker.postMessage(e.data)}, 1000);
};

asker.postMessage('start');

Yet, I have difficulty on creating a shared worker. I attempted to create one with this code:

function createWorker() {
    var blob = new Blob(['addEventListener( "connect", function(evt){ ' +
                            'var port = evt.ports[0]; ' +
                            'port.addEventListener( "message", function(evt){' +
                              'port.postMessage( .. );debugger;' +
                            '} );' +
                            'port.start();' +
                          '} );']);
    var blobURL = window.URL.createObjectURL(blob);
    var w = new SharedWorker(blobURL);
    return w;
}

var w = createWorker();

w.port.start();

w.port.onmessage = function(e) {
  console.log(e.data);
};

w.port.onmessage('foobar');

and after sending the message of foobar I would expect my shared worker to post a message, or at least I expect to be guided into the code by the debugger, yet, when I run this code the console gives two undefined as a response.


Solution

  • Base64 encoding gives a permanent URL until the source code changes.

    const source = 'importScripts("https://anotherhost/worker.js")';
    const url = 'data:application/javascript;base64,' + btoa(source);
    const worker = new SharedWorker(url);
    

    It works at least in Chrome 73 and Firefox 66.

    There is a limit to the length of the encoded URL of about 65 kilobytes.