Websocketでバイナリファイルを送信するためのプログレスバー

Question

Websocket接続を介して送信されたバイト数を追跡​​する方法があるので、プログレスバーを表示できます。

たとえば、画像を送信したいとします。私はすでにイメージのサイズを知っている、私はちょうど最後の秒にいくつかのバイトが転送されたか、または同様の何かのイベントを持っている必要があります。ここで

は私のコードは、私がWebSocket.bufferedAmountでこれを行うことができた

//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

です：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket

（ 送信への呼び出しを使用してキューに入ってきたデータのバイト数）が、まだネットワークに送信されていません。キューに入れられたすべてのデータが送信されると、この値は0にリセットされ、 にリセットされます。接続が閉じられている場合、この値は にリセットされません。 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); 
     } 
    } 
} 

その後、私はChrome 58、Firefox 53とEdge 14でこれをテストし、ここbufferedAmountが処理される方法についての私の結論ですしました。この

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 - バイトが送信されると、常にbufferedAmountが更新されます
• Firefox 53 - アップデートbufferedAmountファイルが送信されるだけ（ FirefoxのbufferedAmountでは唯一の2値file.sizeと0
• Edge 14持っています - データの1メガバイトを

NOTEに送られた後、更新bufferedAmountを：あなたの場合複数のファイルを送信するbufferedAmountは、すべてのファイルから未送信のバイト数を返します。