在Websocket中发送二进制文件的进度条

Question

有没有一种方法可以跟踪通过一个Websocket连接发送了多少字节，所以我可以显示一个进度条。

例如，我要发送图像。我已经知道图像的大小，我只需要有一个事件，例如最后一秒已传输多少字节或类似的事件。

这是我的代码

//html
<input type="file" accept="image/*" id="input">

//js
var inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
    var fileList = this.files;

    var connection = new WebSocket('ws://localhost:8080');
    connection.binaryType = "arraybuffer";
    connection.onopen = () => {
        connection.send(fileList[0]);
    };
}

Answer 1

我已经设法做到了WebSocket.bufferedAmount：https : //developer.mozilla.org/en-US/docs/Web/API/WebSocket

使用send（）调用已排队但尚未传输到网络的数据字节数。发送所有排队的数据后，此值将重置为零。当连接关闭时，该值不会重置为零。如果您继续调用send（），它将继续上升。

function sendBinary(binMsg, callback) {
        ws.send(binMsg);

        if (callback != null) {
            var interval = setInterval(function () {
                if (ws.bufferedAmount > 0) {
                    callback(ws.bufferedAmount)
                } else {
                    callback(0)
                    clearInterval(interval);
                }
            }, 100);
        }
    }
}

然后我会这样调用方法

var file = fileList[0];
sendBinary(file , function(bytesNotSent){
    if(amount==0){
       console.log('file sent');
    }else{
       var loaded = file.size - bytesNotSent;
       var percentage = Math.round((loaded * 100) / file.size );
       console.log(percentage);
    }
});

我测试过这一点Chrome 58，Firefox 53而Edge 14这里是我的结论是如何bufferedAmount被处理：

• Chrome 58- bufferedAmount发送字节时不断更新
• Firefox 53- bufferedAmount仅在发送文件时更新（Firefox bufferedAmount中只有2个值file.size，0
• Edge 14- bufferedAmount发送1MB数据后进行更新

注意：如果您发送多个文件bufferedAmount，将从所有这些文件中返回未发送字节的数量