JSFiddle - React, Tailwind, and code Playground

by Mike Gleeson

HTML

<body>
<button onclick="sayHI()">Say HI</button>
<button onclick="unknownCmd()">Send unknown command</button>
<button onclick="stop()">Stop worker</button>
<output id="result"></output>

    <script>
function sayHI() {
    worker.postMessage({'cmd': 'start', 'msg': 'Hi'});
  }

function stop() {
    // worker.terminate() from this script would also stop the worker.
    worker.postMessage({'cmd': 'stop', 'msg': 'Bye'});
  }

function unknownCmd() {
    worker.postMessage({'cmd': 'foobard', 'msg': '???'});
  }    
  </script>    
  <div id="log"></div>

  <script id="worker1" type="javascript/worker">
    // This script won't be parsed by JS engines
    // because its type is javascript/worker.
    self.onmessage = function(e) {
      self.postMessage('msg from worker:'+e.data.msg);
      
      console.log(e.data.cmd);
      
      if(e.data.cmd == 'stop')
          self.close();
    };
    // Rest of your worker code goes here.
  </script>

  <script>
    function log(msg) {
      // Use a fragment: browser will only render/reflow once.
      var fragment = document.createDocumentFragment();
      fragment.appendChild(document.createTextNode(msg));
      fragment.appendChild(document.createElement('br'));

      document.querySelector("#log").appendChild(fragment);
    }

    var blob = new Blob([document.querySelector('#worker1').textContent]);

    var worker = new Worker(window.URL.createObjectURL(blob));
    worker.onmessage = function(e) {      
      log("Received: " + e.data);
    }
    worker.postMessage({'cmd': 'test', 'msg': 'HELLOWORLD!!!'}); // Start the worker.
  </script>
</body>