javascript - 以流方式从 HTTP 服务器接收 Web 浏览器中的二进制数据

Question

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

我在网上搜索了一下，发现通过 XMLHttpRequest 似乎是不可能的，原因有二(引自 this article )，

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

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

Answer 1

使用 XMLHttpRequest 无法满足我所有的请求。但是，通过一些技巧，我可以在 block 二进制数据到达后读取它。一般来说，覆盖 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;
}

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