将大文件传输到webworker / websocket

Question

使用chrome / edge时，我在尝试将20mb +文件传输到worker / websocket时遇到问题，小于20mb的文件可以正常工作。在主js代码中，如果我注释掉ww.postmessage行并使用主websocket（ws.send（results [i]）发送大文件，它可以按预期的方式工作，以免出现工作js代码中的问题。

奇怪的是工作器中的console.log（evt.data.byteLength）正确显示了文件大小，并且没有错误，但是由于其长度保持为0，所以未填充arraybuffer（ab）。

当我试图通过websocket发送它时，是否仍在填充worker数组缓冲区（ab）（大文件）？

main.js

function handle_file_reader(evt) {

    ww = new Worker("/worker.js");

    ww.onmessage = function (evt){
        document.getElementById("id_output").innerHTML = evt.data;
    }

    var file_list = evt.target.files;
    let results=[];

    for (let i = 0, file_cnt = file_list.length; i < file_cnt; i++) {
        const file = file_list[i];

        var file_reader = new FileReader();

        file_reader.onload = function (event) {
            results[i] = event.target.result;
            console.log(results[i].byteLength);
            ww.postMessage(results[i], [results[i]]);
            //ws.send(results[i]);
        };

        file_reader.readAsArrayBuffer(file);
    }
}

worker.js

ws_start();//start websocket
let ab = [];

self.addEventListener('message', function (evt) {

    if (evt.data instanceof ArrayBuffer) {
        console.log(evt.data.byteLength);//showing correct file size
        ab.push(evt.data);//add to array    
    }

}, false);

function ws_start() {
    ws = new WebSocket("wss://www.example:7070");
    ws.binaryType = "arraybuffer";

    ws.onopen = function (evt) {
        self.postMessage("ws_started");
        upload_files();
    };
}

function upload_files() {
    console.log("ws.readystate:" + ws.readyState);//1 ok
    console.log("ab.length:" + ab.length);//0 not ok, should be 1

    ab.forEach(function(item, index, array) {
        ws.send(item);
      })

    ws.close();//close websocket
    ab.length = 0;//clear array
}

Answer 1

我通过使用setinterval检查ab.length！= 0解决了该问题。这为在通过网络套接字上传之前填充ab提供了时间。

ws.onopen = function (evt) {
    self.postMessage("ws_started"); 
    id = setInterval(upload_files, 1000);//interval timer
};

function upload_files() {
    console.log("ws.readystate:" + ws.readyState);
    console.log("ab.length:" + ab.length);

    if (ab.length != 0) {//check if ab has data
        clearInterval(id);//clear

        ab.forEach(function (item, index, array) {
            console.log(item, index);
            ws.send(item);
        })
        ws.close();//close websocket
        ab.length = 0;//clear array
    }
}