以流方式從HTTP服務器接收Web瀏覽器中的二進制數據

Question

我正在尋找一個客戶端唯一的JavaScript解決方案，它可以以流媒體方式從HTTP服務器接收到我的Web客戶端的大型二進制文件，這樣一旦我獲得數據包而不必等待所有數據，我就可以立即響應它們加載到內存中，我甚至可以在處理每個數據后丟棄數據，以減少內存占用。

我在網上搜索，發現似乎不可能通過XMLHttpRequest，因為有兩個原因（引自本文 ），

• XHR阻止在請求完成之前訪問二進制響應（使用arraybuffer響應類型）數據。
• XHR響應本質上是一個大緩沖區，隨着響應數據的進入而線性增長，這意味着它無法收集垃圾。

我想知道這是否可以通過websocket實現，並且是否有任何好的開源已經解決了這個問題？ 我找到了一些似乎相關的東西，例如Oboe.js和Binary.js ，但它要么應對JSON流，要么需要服務器端支持。

Answer 1

使用XMLHttpRequest無法滿足我的所有要求。 但是，有了一些技巧，我可以在它到達時讀取塊二進制數據。 一般來說，將minetype覆蓋為'text / plain; charset = x-user-defined'將二進制數據作為文本流傳輸，一旦一個包准備好，我就可以得到它並將其轉換為arrayBuffer。

var xhr = new XMLHttpRequest();
var streamOffset = 0;

xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function () {
    var textBuffer = xhr.responseText;
    var arrayBuffer = textToArrayBuffer(textBuffer, streamOffset);
}
function textToArrayBuffer(textBuffer, startOffset) {
    var len = textBuffer.length - startOffset;
    var arrayBuffer = new ArrayBuffer(len);
    var ui8a = new Uint8Array(arrayBuffer, 0);
    for (var i = 0, j = startOffset; i < len; i++, j++)
        ui8a[i] = (textBuffer.charCodeAt(j) & 0xff);
    return arrayBuffer;
}

雖然，通過這種方式，我可以以流方式獲取二進制數據，但在處理每個塊之后，它不能丟棄，直到請求完成。 無論如何，這讓我有機會在二進制數據到達時立即處理它。