JSFiddle - React, Tailwind, and code Playground

by Eric Pias

HTML

<body>
    <h1>Testing web worker.</h1>

    <hr>
    <h2>Messages:</h2>
        
        <div id="messages">
            
        </div>
        
</body>

JavaScript

function printMsg(msg) {
        var newdiv=document.createElement("div");
        var newtext=document.createTextNode(msg);
        newdiv.appendChild(newtext);
        document.getElementById("messages").appendChild(newdiv);
};

// makeWorker is a little wrapper for generating web workers from strings
function makeWorker(script) {
    var URL = window.URL || window.webkitURL;
    var Blob = window.Blob;
    var Worker = window.Worker;
    
    if (!URL || !Blob || !Worker || !script) {
        return null;
    }
    
    var blob = new Blob([script]);
    var worker = new Worker(URL.createObjectURL(blob));
    return worker;
};


printMsg("Starting");

/*var blob = new Blob([
    "onmessage = function(e) { postMessage('msg from worker'); }"]);
    */

var blob = new Blob([
    "onmessage = function(e) { postMessage('from worker: ' + e.data.msg); \
           var data = e.data; \
           var f = function() { \
              postMessage('msg on timer: '+data.msg); \
              setTimeout(f, 5000); \
           }; \
           setTimeout(f, 5000); \
    }"]);
    

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  printMsg("****"+e.data);
};
printMsg("Starting Worker: "+worker);

worker.postMessage({id:'1', msg:'some data'}); // Start the worker.
printMsg("Worker Started");