Arthis Arthis - 1 month ago 5
Javascript Question

Using importsScripts within Blob in a karma environment

I am working on a small project of mine using karma, and jasmine. My targeted browser is chrome 32.

I am trying to import scripts within a web worker whom I have instanciated through a blob as follows :

describeAsyncAppliPersephone("When the application project to DOM", function()
{
it("it should call the function of DomProjection in the project associated with its event", function()
{
var eventSentBack = {
eventType: 'testReceived',
headers: { id: 14, version: 4 },
payLoad: { textChanged: 'newText' }
};
var isRendered = false;
var fnProjection = function(event, payload)
{
isRendered = true;
}

var bootstrap = [
{ eventType: 'testReceived', projection: fnProjection },
{ eventType: 'test2Received', projection: function() { } }
];

runs(function()
{
var factory = new WorkerFactory();

var worker = factory.CreateByScripts('importScripts("/base/SiteWeb/project/js/app/application.js"); var app = new application(self); app.projectOnDOM(' + JSON.stringify(eventSentBack) + '); ');

console.log(worker.WorkerLocation);

var applicationQueue = new queueAsync(worker);
var projectQueue = new queueSync(worker);
var p = new project(applicationQueue, persephoneQueue, bootstrap);

applicationQueue.publish(eventSentBack);
});

waitsFor(function() { return isRendered }, "Projection called", 500);

runs(function()
{
expect(isRendered).toBe(true);
});


});
});


workerFactory is as follows :

this.CreateByScripts = function(scripts, fDefListener, fOnError)
{
var arrayScripts = scripts;

if (!arrayScripts)
throw "unable to load worker for undefined scripts";

if (Object.prototype.toString.call(arrayScripts) !== '[object Array]')
arrayScripts = [arrayScripts];

var blob = new Blob(arrayScripts, { type: "text/javascript" });

var w = createWorker(window.URL.createObjectURL(blob));

return new QueryableWorker(w, fDefListener, fOnError);
}


where createWorker is :

createWorker = function(sUrl)
{
return new Worker(sUrl);
}


But the importScripts throws me the following error :


Uncaught SyntaxError: Failed to execute 'importScripts': the URL
'/base/SiteWeb/project/js/app/application.js' is invalid.


I have tried with the path within the browser :

http://mylocalhost:9876/base/SiteWeb/project/js/app/application.js


and it does work well.

What is the path I should use to make importScripts working successfully ?

Thanks,

Answer

You can't use relative path in worker created with Blob.

Had this problem today. Solution is explained in "The Basics of Web Workers", but a little hidden in length of the article:

The reason being: the worker (now created from a blob URL) will be resolved with a blob: prefix, while your app will be running from a different (presumably http://) scheme. Hence, the failure will be due to cross origin restrictions.

If you are determined to avoid hardcoding domain name in your workers the article has also a solution for this. Import your scripts on receiving a message with URL as one of its parameters:

self.onmessage = function(e) {
    importScripts(e.data.url + 'yourscript.js');
};

and start your worker with sending that url

worker.postMessage({url: document.location.protocol + '//' + document.location.host});

The code above is simplified for clarity.

Comments