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 - 在发送1MB数据后更新bufferedAmount

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

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

1 个答案: