BeStelios BeStelios - 1 year ago 88
Javascript Question

BreezeJs with dedicated web worker

I am trying to initialize a Breeze manager inside a 'Web Worker'.

RequireJs, knockout, q, breeze are being imported inside the worker.

After a call to:


the following error appears:

Uncaught Error: Q is undefined. Are you missing Q.js? See

A live preview is uploaded here

(plunk supports downloading for easier debug).

EDIT -- relevant code


importScripts('knockout.js', 'q.js', 'breeze.js', 'require.js');
define('jquery', function () { return jQuery; });
define('knockout', ko);
define('q', Q); //Just trying to assign q since breeze requests Q as q
require(function () {
var self = this;
this.q = this.Q; //Just trying to assign q since breeze requests Q as q

var manager = new breeze.EntityManager("breeze/Breeze");

var EntityQuery = breeze.EntityQuery;

// Q or q here is defined (TESTED)

var test = function (name) {
return EntityQuery.from(name)
.using(manager).execute() // <-- Here q/Q breaks (I think on execute)

var primeData = function () {
return test('Languages')

setTimeout(function () { postMessage("TestMan"); }, 500);

Worker will be initialized on main page as:

var myWorker = new Worker("worker.js");

Answer Source

Ok here it goes:

  1. Create a new requireJs and edit the
    isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document)
    isBrowser = false

  2. Create a new Jquery so it uses nothing related to window and generally anything that a WebWorker cannot access. Unfortunatelly i can't remember where i got this Custom JQueryJs but i have uploaded it here "".
    Please if you find the author or the original change link and give credit.

  3. My workerJs file looks like:

    importScripts('Scripts/test.js', 'Scripts/jqueydemo.js', 'Scripts/q.js', 'Scripts/breeze.debug.js', 'Scripts/require2.js');
    define('jquery', function () { return jQuery; });
        baseUrl: "..",
    function () {
    var manager = new breeze.EntityManager("breeze/Breeze");
    var EntityQuery = breeze.EntityQuery;
    var primeData = function () {
        return EntityQuery.from(name)
                .using(manager).execute()  // Get my Data
                .then(function (data) {
                    console.log("fetced!\n" + ((new Date()).getTime()));
                    var exportData = manager.exportEntities(); // Export my constructed entities
                    console.log("created!\n" + ((new Date()).getTime()));
                    var lala = JSON.stringify(exportData)
                    postMessage(lala); // Send them as a string to the main thread 
  4. Finally on my mainJs i have something like:

        this.testWorker = function () {
        var myWorker = new Worker("worker.js"); // Init Worker
        myWorker.onmessage = function (oEvent) { // On worker job finished
            toastr.success('Worker finished and returned');
            var lala = JSON.parse(; // Reverse string to JSON
            manager.importEntities(lala);  // Import the pre-Constructed Entities to breezeManager
            toastr.success('Import done');

So we have managed to use breeze on a WebWorker enviroment to fetch and create all of our entities, pass our exported entities to our main breeze manager on the main thread(import).

I have tested this with 9 tables fully related to each other and about 4MB of raw data.

PROFIT: UI stays fully responsive all the time.
No more long execution script, application not responding or out of memory errors) at least for chrome

*As it makes sense breeze import entities is way more faster than the creation a full 4MB raw data plus the association process following for these entities.
By having all the heavy work done on the back, and only use import entities on the front, breeze allows you to handle large datasets 'like a breeze'.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download