在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（），這個 將繼續攀升。

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是如何處理的結論：

當發送字節時不斷更新 bufferedAmount
• Firefox 53 - 更新bufferedAmount只有當文件被髮送（ 在Firefox bufferedAmount只有2個值file.size和0
• Edge 14 - 1MB的數據被髮送

注後更新bufferedAmount：如果您發送多個文件bufferedAmount將返回所有這些文件中未發送字節的數量