在 Web 浏览器中以流式传输方式从 HTTP 服务器接收二进制数据

Question

我正在寻找一个仅客户端的 JavaScript 解决方案，它可以以流式传输方式从 HTTP 服务器接收大型二进制文件到我的 Web 客户端，通过这种方式，我可以在收到数据包后立即响应，而无需等待所有它们都加载到内存中，我什至可以在处理完每个数据后丢弃数据，以减少内存占用。

我在网上搜索了一下，发现通过XMLHttpRequest似乎不可能，因为两个原因（引自这篇文章），

• XHR 阻止在请求完成之前访问二进制响应（具有 arraybuffer 响应类型）数据。
• XHR 响应本质上是一个大缓冲区，随着响应数据的进入而不断线性增长，这意味着它无法被垃圾收集。

我想知道是否可以通过 websocket 实现这一点，是否有任何好的开源代码已经解决了这个问题？我发现了一些似乎相关的内容，例如Oboe.js和Binary.js，但它要么处理 JSON 流，要么需要服务器端支持。

Answer 1

使用 XMLHttpRequest 无法满足我所有的请求。但是，通过一些技巧，我可以在块二进制数据到达后读取它。一般来说，将minetype覆盖为'text/plain; charset=x-user-define' 它将把二进制数据作为文本进行流式传输，一旦一个包准备好，我就可以获取它并将其转换为 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;
}

虽然，通过这种方式，我可以以流方式获取二进制数据，但在处理每个块之后直到请求完成之前它不能被丢弃。不管怎样，这让我有机会在二进制数据到达后立即对其进行处理。