HTML Web Worker and Jquery Ajax call

Question

I'm wondering if I can use jQuery inside the web worker file. Google Chrome gives me this error: "Uncaught ReferenceError: $ is not defined".

Here is the code: The parent file:

var loader = new Worker(BASE_URL + "js/rss_loader_worker.js");
// Ask the worker to start loading the RSS from the server
loader.postMessage("loadRss");
// When receive the response from the server
loader.onmessage = function (event) {
  console.log(event.data);
}

The worker file:

onmessage = function (event) {
  if (event.data === "loadRss") {
    loadRss();
  }
}

/**
 * This function handles the AJAX request to the server side
 * then pass the content to the view page
 * @param none
 * @return html text
 */
loadRss = function () {
  $.ajax({
    data: {city: CITY_LOCATION},
    url: BASE_URL + "/getfeeds",
    onsucess: function (data) {

    }
  });
}

Please help, thank you :)

Answer 1

No you cannot. There's no access to non-thread safe components or the DOM and you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code. jQuery is a JavaScript DOM library.

But you can use a native XMLHttpRequest in your worker however.

And, importing external scripts does not go via the page with a script tag : use importScripts() for that in your worker file.

Answer 2

Here's what I found:

You can load external script files or libraries into a worker with the importScripts() function.

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-loadingscripts

importScripts('script1.js');
importScripts('script2.js');

or

importScripts('script1.js', 'script2.js');

Although, you cannot load jQuery, because jQuery requires DOM access, which web workers don't have.

Answer 3

Since web workers are in external files, they do not have access to the following JavaScript objects:

• The window object
• The document object
• The parent object

So you can't use $ inside worker file. Better you can use traditional AJAX something like this

if (window.XMLHttpRequest)
{
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Reference at http://www.w3schools.com/html/html5_webworkers.asp

Answer 4

The execution environment in Node.JS also lacks a native DOM implementation. I think it's fair to say that Node.JS and HTML5 Web Workers share certain restrictions.

There are ways to simulate a DOM implementation for the purpose of using jQuery in Node.JS. If you still want to use jQuery in Web Workers, I think you should search for the Node.JS solutions and see if they apply.

Answer 5

jQuery is mostly for working with the DOM and working with web pages. So it is not so suitable for Web Workers that do not have access to the DOM.

You might want to use a utility library instead of a DOM library, such as underscore.js, or perhaps someone ought to make a jQuery Worker library, a stripped down light version of jQuery without all the DOM manipulation functionality, just keeping the utility functions.

Answer 6

take a look on this plug-in https://github.com/rwldrn/jquery-hive