JSFiddle - React, Tailwind, and code Playground

Custom WebWorker API (2-way function calling): myWorker.post("add", 1, 3); // Logs 4 at parent

by skibulk

JavaScript

function createWorker(fn) {

    var self = arguments.callee;

    // Internal Util
    function post() {
        postMessage(JSON.stringify([].slice.call(arguments)), origin);
    }

    // Internal & External Util
    function messageRouter(event) {
        var params = JSON.parse(event.data);
		console.log( origin, self, params[0] );
        var fn = self[params.shift()];
        if (typeof fn === "function") {
            return fn.apply(self, params);
        }
    }

    var code = [
        'var post=' + post.toString(),
        'onmessage=' + messageRouter.toString(),
        'var self=' + fn.toString(),
        'self()',
    ].join(";\r\n");

    var url = URL.createObjectURL(
        new Blob(
            [code], {
                type: 'application/javascript'
            }
        )
    );

    code = '';
    var myWorker = new Worker(url);
    URL.revokeObjectURL(url);
    url = '';

    // External Worker Util
    myWorker.post = function() {
        myWorker.postMessage(JSON.stringify([].slice.call(arguments)));
    };

    myWorker.onmessage = messageRouter;

    return myWorker;
}

function myTask() {
    var add = function(a, b) {
        post("console.log", a + b);
		return a + b;
    }
}

var myTaskWorker = createWorker(myTask);
myTaskWorker.post("add", 1, 3);