CODEWITHSUNDEEP
javascriptmultithreadinghtmlweb-worker
Lemex
Lemex

Reputation: 3794

HTML5 Webworkers - All One File

Currently i have the following code:

This is within my HTML document.

<script language="JavaScript" type="text/javascript" src="workerTest.js"></script>

Now from my understanding and research a worker must be from an external file.

So within my workerTest.js i have 

var iWorker = new Worker('workerTest.js');

I would prefer to declare all my works and there code within my workerTest.js and be able to create them line about i would from an external file.

So something like

var iWorker2 = new Worker('scripttagid');

Obviously the above code is wrong but i hope it illustrates my point.

Is this possible? If it is could someone point me in the right direction? Possibly some example code?

If this isn't possible what's the best way to do it to avoid lots of worker files. As there will be a lot of works.

Upvotes: 1

Views: 1180

Answers (3)

zevero
zevero

Reputation: 2402

You may use my tiny plugin https://github.com/zevero/worker-create

var worker_url = Worker.create(function(e){
  self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);

Upvotes: 0

Esailija
Esailija

Reputation: 140210

Well, kind of:

<!-- won't be executed by browser because of the invalid type -->
<script type="text/worker" id="worker-code">
while(true) {

}
</script>

Javascript:

var workerCode = document.getElementById("worker-code").innerHTML;
//Could also just be var workerCode = 'while(true){}';

var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.OBlobBuilder || window.BlobBuilder,
    blobBuilder = new BlobBuilder(),
    URL = window.webkitURL || window.URL,
    blob, workerURL;

blobBuilder.append(workerCode);
blob = blobBuilder.getBlob("text/javascript");

workerURL = URL.createObjectURL( blob );
var iWorker = new Worker(workerURL);

Please note that you don't need the element either, it's just that storing code in strings like 'while(true){}' is hard to maintain.

Demo: http://jsfiddle.net/pmSSf/ (Processor usage will spike but you can use the page since it doesn't run in the UI thread)

Upvotes: 2

Kasapo
Kasapo

Reputation: 5374

Also, from these docs, I found you can load external scripts, or implement subworkers or inline workers.

Inline workers use the BlobBuilder technique described by Esailija.

Quote:

LOADING EXTERNAL SCRIPTS

You can load external script files or libraries into a worker with the importScripts() function. The method takes zero or more strings representing the filenames for the resources to import.

This example loads script1.js and script2.js into the worker:

worker.js:

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

Which can also be written as a single import statement:

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

SUBWORKERS

Workers have the ability to spawn child workers. This is great for further breaking up large tasks at runtime. However, subworkers come with a few caveats:

Subworkers must be hosted within the same origin as the parent page. URIs within subworkers are resolved relative to their parent worker's location (as opposed to the main page). Keep in mind most browsers spawn separate processes for each worker. Before you go spawning a worker farm, be cautious about hogging too many of the user's system resources. One reason for this is that messages passed between main pages and workers are copied, not shared. See Communicating with a Worker via Message Passing.

For an sample of how to spawn a subworker, see the example in the specification.

INLINE WORKERS

What if you want to create your worker script on the fly, or create a self-contained page without having to create separate worker files? With the new BlobBuilder interface, you can "inline" your worker in the same HTML file as your main logic by creating a BlobBuilder and appending the worker code as a string:

Upvotes: 0

Related Questions