3

i'm using WebSockets to send data from my node.js server to my clients. Since the data can be kind of large, the UI thread used to block, so no user interaction or video playing was possible during the data was received. That's when i stumbled over WebWorkers, and i also managed to get them work together with WebSockets.

app.js:

...

var worker = new Worker('worker.js');

worker.addEventListener('message', function(e) {
    console.log('Worker said: ', e.data);
}, false);

worker.postMessage('init');

...

worker.js:

function initWebSocket() {

var connection = new WebSocket('ws://host:port', ['soap', 'xmpp']);

connection.onopen = function () {
    connection.send('Ping'); // Send the message 'Ping' to the server
};

// Log errors
connection.onerror = function (error) {
  console.log('WebSocket Error ' + error);
};

// Log messages from the server
connection.onmessage = function (e) {
  console.log('Server: ' + e.data);
  //self.postMessage('Worker received : ' + e.data);
};

};

self.addEventListener('message', function(e) {
switch (e.data) {
    case 'init':
        initWebSocket();
        break;
    default:
        self.postMessage('Unknown command: ' + e.data);
    };
}, false);

All i'm doing so far is receive the data. Of course, later on i intend to do more stuff with it. But my problem is: The UI thread is still blocking when large files arrive. Did i get something wrong here?

UPDATE:

Actually, i have to revise my previous comment. Obviously chrome had cached some of my files i was sending before, so i didn't realize the problem starts already with files way smaller than 300MB (currently, i'm testing a 50MB file). The ui blocks until the file has been completly received. What i'm currently doing is the following: I'm loading an index page with a video playing. Also, on the same page, i put a button which starts a worker. The worker does send an xhr request to the server and gets a 50MB file. So i just dismissed WebSockets for the sake of it. What's happening when i click the button: The video freezes until the complete data has been received. When i do the same and let the worker just calculate numbers in a for-loop, the video keeps playing. So it seems to have something to work with using the network, but not specifically WebSockets. Is it possible that WebWorkers just can't work with network stuff?

mneundorfer
  • 109
  • 1
  • 11
  • Please define "kind of large". Also, what browser and version? – kanaka Jan 17 '14 at 18:50
  • i'm talking about file sizes above 300MB, but actually it should also be possible to receive video files in the range of 1-10GB later on. Currently, im running Chrome 32. Btw: i'm running in the same problem if i'm spliting those large files to pieces of e.g. 50MB and send them in sequence. Still, the ui is blocking until all files have been received – mneundorfer Jan 18 '14 at 11:36
  • updated my answer, cause it was too much text for a comment. – mneundorfer Jan 18 '14 at 18:03
  • if you're really running into a situation where network is blocking UI (worker or not) then that's probably a bug that should be reported to Chrome (worth trying an alpha or Canary first though). You'll probably get more traction if you create a self-contained test (which perhaps pre-generates the 50MB data files) with which you can reproduce the problem and link to that in the bug report. If you do, post back here and I'll try and reproduce the problem too. – kanaka Jan 18 '14 at 21:52
  • I did some more testing, and to me it seems the problem has to do with using WebSockets in WebWorkers per se. But i really can't say for sure. All i could find so far was that issue https://code.google.com/p/chromium/issues/detail?id=138506 that also seems to be true for sending files via WebSockets. That would at least explain some of the problems i expirienced. I think i'll have to do some more testing, i'll keep your advise in mind! Thanks for your help anyway – mneundorfer Jan 21 '14 at 14:25
  • Possible duplicate of [HTML5 Websocket within Webworker](https://stackoverflow.com/questions/17998011/html5-websocket-within-webworker) – Paul Sweatte Sep 13 '17 at 21:44
  • This should be fixed by default in Chrome 68: https://bugs.chromium.org/p/chromium/issues/detail?id=825740 – Matt Vollrath Nov 01 '18 at 21:29

0 Answers0