HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Worker — basic demo</title>
</head>
<body>
  <h1>Basic Web Worker</h1>
  <p>Click the button. The worker receives <b>5</b> and replies with <b>10</b>.</p>
  <button type="button" id="runBtn">Send 5 to worker</button>
  <p id="status">Ready.</p>

  <script>
    if (typeof Worker === 'undefined') {
      document.getElementById('status').textContent =
        'Web Workers are not supported in this browser.';
    } else {
    // Step 1: worker code (runs in background thread)
    var workerCode =
      'self.onmessage = function(e) {' +
      '  postMessage(e.data * 2);' +
      '};';

    // Step 2: create worker from inline code (no separate file)
    var blob = new Blob([workerCode], { type: 'application/javascript' });
    var worker = new Worker(URL.createObjectURL(blob));

    // Step 3: show result on the page
    worker.onmessage = function (e) {
      document.getElementById('status').textContent =
        'Worker sent back: ' + e.data;
    };

    // Step 4: send data when button is clicked
    document.getElementById('runBtn').onclick = function () {
      document.getElementById('status').textContent = 'Waiting...';
      worker.postMessage(5);
    };
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Web Workers — Basic postMessage Demo