Thursday, April 28, 2011

JavaScript Web Workers Local Chrome : Enable via Flag / Parameter

If you are a JavaScript developer that is interested in writing multi-threaded applications with JavaScript, you may be looking into using Web Workers to accomplish this.  And, if you are using the Google Chrome browser for running and/or testing your web worker code, you may have run into what appears to be a problem with running web workers on your local machine. But, do not worry, there is a way to enable local Web Workers in Chrome Browser without too much difficulty.

Symptom
Web-Workers will appear not to work when using the Chrome browser to run local HTML / JavaScript that uses web workers. This same code works fine when hosted on a web server though. (this is the case through at least the Stable version 10 of Chrome Browser).
Solution / Fix Local Web Workers in Chrome
OK, so how to you get Web Workers to execute locally when using the Chrome browser? Well, currently there is a flag that you will have to pass to the browser on startup.  But, even that can look as though it did not work unless you have also closed down all instances of Chrome before launching the browser.  So, be sure to do this:
  1. Close any open instances of the Google Chrome web browser
  2. Launch the Google Chrome browser with the --allow-file-access-from-files flag; this will make your chrome.exe launch look like the following example (or similar):

    "C:\Users\UserNameHere\AppData\Local\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

  3. NOTE: do not make this your default chrome execution setup unless you are willing to take the security risk associated with having that "allow-file-access-from-files" flag active; as the flag implies, it opens up some additional paths to file access that may ultimately provide a path to security exploits.  I personally was not worried, as I was running my JavaScript / HTML5 testing of Web Workers code within a virtual machine and not on my production desktop.  I always suggest using virtual machines for this type of thing.
Some Web Workers Example Code
This was quickly copied from Wikipedia's web-worker example (for using threads to calculate prime numbers), and very slightly modified to include a reminder of why the local Web Worker code may appear not to work in the Chrome Browser.

C:\WebWorker-ThreadTest\Prime-Webworker-Test.html
<!DOCTYPE HTML>
<html>
 <head>
  <title>Worker example: One-core computation</title>
 </head>
 <body>
  <p>The highest prime number discovered so far is: <output id="result"></output></p>
  <p>You must close ALL Chrome windows first...<br />
  Then, launch chrome from command-line with this flag to enable web-workers:<br />
  "C:\Users\UserNameHere\AppData\Local\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files</p>
  <script>
   var worker = new Worker('Prime-Webworker-Test.js');
   worker.onmessage = function (event) {
     document.getElementById('result').textContent = event.data;
   };
  </script>
 </body>
</html>


C:\WebWorker-ThreadTest\Prime-Webworker-Test.js 
(place in same directory as above HTML file)

var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

You should be able to run the local Web Workers test using Chrome browser now...
Be sure to launch Google Chrome browser using the command-line parameter / flag specified earlier in this Blog.  Just open the HTML file (Prime-Webworker-Test.html) and if all is working properly, you should see a series of prime number displayed at the top of the web-page in quick succession.

Web workers offer a VERY BASIC means for implementing some multi-threaded code in JavaScript.  It is not anywhere near as powerful and flexible as a higher-level coding language or framework like Delphi or DotNet or Java may offer, but at least it provides a way to do some rudimentary multithreading.  Also, JavaScript web workers are not exactly "light weight" thread implementations, so be sure to take not of resource usage as you implement threading with this technique.

Webworkers are not implemented in all browsers, but they do exist in the only browsers that matter  -- is this an obvious slam on IE  :)

No comments: