Question

I’m working on a project in which a client must be able to communicate with a server via WebSockets. Since the application which we develop as to be highly responsive on user input we have decided to let a WebWorker do all the communication over the network so that a slow connection cannot interrupt the GUI. That works fine so far.

Now we thought about optimizations which will be necessary if the network is slow and the amount of messages to send is high. Since most of these messages will be only to synchronize some other clients user interface we can drop some of them if necessary. But to do so we need the possibility to detect the situations when there is congestion.

We came up with the idea of a queue: Each message to be sent is pushed in a queue and the WebWorker does nothing else than permanently iterating over the queue and sending all the messages it finds there. With that we can later let the Worker act differently if there is a certain number of elements in the queue (i.e. messages are sent too slowly). The idea is simple and straightforward, however, the implementation doesn’t seem to be.

var ws;
var queue = new Array();

function processMessageQueue() {
    while(true)
        if(queue.length > 0) ws.send(queue.shift());
}

self.addEventListener('message', function(e) {
    var msg = e.data;
    switch(msg.type) {
        case 'SEND':
            queue.push(JSON.stringify(msg));
            break;
        case 'CREATE_WS':
            ws = new WebSocket(msg.wsurl);
            ws.onmessage = function(e) {
                self.postMessage(JSON.parse(e.data));
            }
            processMessageQueue();
    }
}, false);

As you can see, the worker creates the WebSocket as soon as it received the message to do so. It then executes the function processMessageQueue() which is the loop which permanently empties the queue by sending their data via the WebSocket. Now, my problem is that there seems to be no possibility to push messages into the queue. That should happen when a message of type ‘SEND’ arrives but it cannot for the Worker is too busy to handle any events. So it can either loop over the queue or push messages, not both.

What I need is a way to somehow push data on this queue. If that is not easily possible I would like to know if anyone can think of another way to find out when messages arrive faster then they are sent. Any hints?

Thanks in advance!

Answer 1

You have to give the worker time to handle the onmessage event. Doing while(true) will take all the processing time and not allow any events to be executed.

You could for instance change it to

function processMessageQueue() {
    if(queue.length > 0) ws.send(queue.shift());
    setTimeout(processMessageQueue, 50);
}