HTML5 Game - Use WebWorker to calculate prime numbers

  1. HOME
  2. HTML5 Game
  3. Web Worker
  4. Use webworker to do multithread in browser

Description

Use WebWorker to calculate prime numbers 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prime Number Search</title>

<style>
body {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin: 20px;
}

#primeContainer {
  border: solid 1px black;
  padding: 3px;
  height: 300px;
  max-width: 500px;
  overflow: scroll;
  overflow-x: hidden;
  font-size: x-small;
  margin-top: 20px;
  margin-bottom: 10px;
}

input {
  width: 60px;
}

button {
  padding: 3px;
}

p {
  margin-bottom: 3px;
}

#status {
  color: darkred;
}
</style>

<script>
let statusDisplay;
let worker;
let searchButton;

window.onload = function() {
  statusDisplay = document.getElementById("status");
  searchButton = document.getElementById("searchButton");
};

function doSearch() {
  searchButton.disabled = true;

  let fromNumber = document.getElementById("from").value;
  let toNumber = document.getElementById("to").value;

  worker = new Worker("PrimeWorker.js");
  worker.onmessage = receivedWorkerMessage;
  worker.onerror = workerError;
  
  worker.postMessage(
   { from: fromNumber,
     to: toNumber
   }
  );

  statusDisplay.innerHTML = "A web worker is on the job ("+
   fromNumber + " to " + toNumber + ") ...";  
}

function receivedWorkerMessage(event) {
  let message = event.data;

  if (message.messageType == "PrimeList") {
    let primes = message.data;

    let primeList = "";
    for (let i=0; i<primes.length; i++) {
      primeList += primes[i];
      if (i != primes.length-1) primeList += ", ";
    }
    let displayList = document.getElementById("primeContainer");
    displayList.innerHTML = primeList;

    if (primeList.length == 0) {
      statusDisplay.innerHTML = "Search failed to find any results.";
    }
    else {
      statusDisplay.innerHTML = "The results are here!";
    }
    searchButton.disabled = false;
  }
  else if (message.messageType == "Progress") {
    statusDisplay.innerHTML = message.data + "% done ...";
  }
}

function workerError(error) {
  statusDisplay.innerHTML = error.message;
}

function cancelSearch() {
  worker.terminate();
  worker = null;
  statusDisplay.innerHTML = "";
  searchButton.disabled = false;
}
</script>
</head>

<body>
  <p>Do a prime number search from <input id="from" value="1"> to <input id="to" value="200000">.</p>
  <button id="searchButton" onclick="doSearch()">Start Searching</button>
  <button onclick="cancelSearch()">Cancel</button>

  <div id="primeContainer">
  </div>

  <div id="status"></div>
</body>
</html>

PrimeWorker.js 

onmessage = function(event) {

  
  let primes = findPrimes(event.data.from, event.data.to);
  postMessage(
   {messageType: "PrimeList", data: primes}
  );
};


function findPrimes(fromNumber, toNumber) {
  // Create an array containing all integers between the two specified numbers.
  let list = [];
  for (let i=fromNumber; i<=toNumber; i++) {
    if (i>1) list.push(i);
  }

  // Test for primes.
  let maxDiv = Math.round(Math.sqrt(toNumber));
  let primes = [];

  let previousProgress;

  for (let i=0; i<list.length; i++) {
    let failed = false;
    for (let j=2; j<=maxDiv; j++) {
      if ((list[i] != j) && (list[i] % j == 0)) {
        failed = true;
      } else if ((j==maxDiv) && (failed == false)) {
        primes.push(list[i]);
      }
    }

    // Give a progress update.
    let progress = Math.round(i/list.length*100);
    if (progress != previousProgress) {
      postMessage(
       {messageType: "Progress", data: progress}
      );
      previousProgress = progress;    
    }
  }

  return primes;
}

Related Topic