Question

我正在使用WebSockets将数据从我的node.js服务器发送到我的客户端。由于数据可能很大，用于阻止的UI线程，因此在接收数据期间不可能进行用户交互或视频播放。那当我偶然发现WebWorkers时，我也设法让它们与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);

我到目前为止所做的就是接收数据。当然，后来我打算用它做更多的事情。但我的问题是：当大文件到达时，UI线程仍然阻塞。我在这里弄错了吗？

更新：

实际上，我必须修改我之前的评论。显然chrome已经缓存了我之前发送的一些文件，所以我没有意识到问题已经开始，文件小于300MB（目前，我正在测试一个50MB的文件）。 ui会阻塞，直到文件被完全接收为止。我目前正在做的是：我正在加载一个带有视频播放的索引页面。此外，在同一页面上，我放了一个启动工人的按钮。工作人员确实向服务器发送xhr请求并获取50MB文件。所以我只是为了它而解雇了WebSockets。单击按钮时发生了什么：视频冻结，直到收到完整数据。当我这样做并让工作人员只计算for循环中的数字时，视频会继续播放。所以似乎有一些东西可以使用网络，但不是特别的WebSockets。 WebWorkers是否有可能无法处理网络内容？

WebWorker内部的WebSocket - UI线程仍然阻塞

0 个答案: