Continuous WebWorker Communication and querying

Question

I am trying to create a WebWorker, I mean I already created it, it's in a Angular application, and I want to query that worker for various things, permissions mostly (No need for answers like "It is not that resource intensive to user workers etc, I am planning to offload more work on these web workers in the future").

The problem is that it appears that I am losing some messages - as in I am throwing 3-4 requests at it and I receive only 2 responses, or things like these, I abandoned this thing 2 months ago but I thought to start it again with a question here.

The code looks like this:

.factory('permissionsWorker', ['$q', '$timeout', function ($q, $timeout) {

        'use strict';

        // Returns a function, that, as long as it continues to be invoked, will not
        // be triggered. The function will be called after it stops being called for
        // N milliseconds. If `immediate` is passed, trigger the function on the
        // leading edge, instead of the trailing.
        function debounce(func, wait, immediate) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) {func.apply(context, args);}
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) {func.apply(context, args);}
            };
        }

        var makeWorker;

        var myWorker = new Worker('/src/workers/permissionsWEeBWorkerSource.js');


        makeWorker = function(functionName, functionParams) {
            //console.log('makeWorker instance for ', functionName);
            var deferred;
            deferred = $q.defer();

            myWorker.postMessage({
                'functionName': functionName,
                'functionArgs': Array.prototype.slice.call(functionParams)
            });

            myWorker.onmessage = function(oEvent) {

                if (oEvent.data) {
                    console.info('Worker responded TRUE', oEvent.data);
                    deferred.resolve(oEvent.data);
                } else {
                    console.info('Worker responded FALSE', oEvent.data);
                    deferred.reject('Action not allowed');
                }
            };

            return deferred.promise;
        };

        return {

            canI: function canI(permission){
                return makeWorker('canI', [permission]); // jshint ignore:line
            },
            setRole: function setRole(role){
                return makeWorker('setRole', [role]);
            },
            setRoleSettings: function setRoleSettings(roleSettings){
                return makeWorker('setRoleSettings', [roleSettings]);
            },
            setActions: function setActions(allActions){
                return makeWorker('setActions', [allActions]);
            }

            /*f: function f(functionName, functionParams) {

             if (arguments.length < 2) {
             throw new TypeError('Not enough arguments. ' +
             'The first param is a function name as string. ' +
             'The second is an array of data types');
             }

             if (typeof arguments[0] !== 'string') {
             throw new TypeError('First parameter must be a string. ' +
             'This is the name of the function');
             }

             if (!Array.isArray(arguments[1])) {
             throw new TypeError('Second parameter must be an array. ' +
             'This is an array of data to be processed');
             }

             return makeWorker(functionName, functionParams);

             }*/

        };

    }

The worker itself looks like this:

/*global onmessage:true */

'use strict';

/** Methods:
 * - canI > param string
 * - setRole > param string
 * - setRoleSettings > param object
 * - setActions > param object
 * */

var role, roles, roleSettings, actions;


var functionsObject = {

    canI: function canI(permission) {
        console.group('WebWorker - Ask for permission:');
        console.info(permission);
        console.groupEnd();
        //TODO: Logic here
        postMessage(true); // jshint ignore:line
    },

    setRole: function setRole(activeRole) {

        console.group('WebWorker - Role received');
        console.table(actions);
        console.groupEnd();

        role = activeRole;

        //TODO: Logic here
        postMessage(true); // jshint ignore:line
    },

    setRoleSettings: function setRoleSettings(settings) {
        console.group('WebWorker - Role Settings received');
        console.table(settings);
        console.groupEnd();
        //TODO: Logic here
        postMessage(true); // jshint ignore:line
    },

    setActions: function setActions(actions) {
        console.group('WebWorker - Configuration received');
        console.table(actions);
        console.groupEnd();
        //TODO: Logic here
        postMessage(true); // jshint ignore:line
    }
};



onmessage = function onmessage(oEvent) {
  if (oEvent.data instanceof Object &&
    oEvent.data.hasOwnProperty('functionName') &&
    oEvent.data.hasOwnProperty('functionArgs')) {

    functionsObject[oEvent.data.functionName].apply(self, oEvent.data.functionArgs);

  }

};

I know that workers themselves are mostly used for single instances - single use case, but it seems to be half working for me. I feed it some data, then I query it for responses, I am wondering if I am doing it wrong, maybe the promises or so.

I will continue to try and make this work and hopefully I'll get some good feedback from here too.

Thanks!

Answer 1

It looks like every time you're calling the worker, you're setting a new onmessage callback. If the previous call hasn't yet returned, then when it does, it would try to resolve/reject the promise for another call, which could appear that messages are lost, since each promise can only be resolved/rejected once.

A way to sort this, is to have one permanent onmessage callback for the worker, and for each request to the worker

• Create a unique id
• Store a deferred object by this id
• Pass the id to the worker, along with the actual data it needs to do its work

Then when the worker has finished, it can pass the id back to the main thread, which can retrieve the deferred object associated with this id, and resolve/reject its promise appropriately.