以流方式从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;
}

虽然，通过这种方式，我可以以流方式获取二进制数据，但在处理每个块之后，它不能丢弃，直到请求完成。 无论如何，这让我有机会在二进制数据到达时立即处理它。