ajax stream 一边下载二进制数据一边处理

最近有在做 stream 下载，并且边下载 stream 边处理功能、解析二进制的功能。最初参考了 flv.js 的 flv stream 下载处理功能，发现他并没有使用的 XMLHttpRequest 的 responseType = ‘arraybuffer’ 这个功能，而是使用的fetch api 里面的 body.getReader API。（fetch 支持一边下载二进制数据一边处理）

后来查询了资料发现， XMLHttpRequest 里不支持下载 stream 的同时边处理的 stream。如果你这么做了，你的 xhr.response 一直为null，直到stream完整下载。

• XHR prevents to access the binary response (with arraybuffer response type) data before the request is complete.
• XHR response is essentially one big buffer that keeps growing linearly as the response data comes in which means it can't get garbage collected.

https://stackoverflow.com/questions/30287813/receive-binary-data-in-web-browser-from-http-server-in-a-streaming-style

但是可以用另外一种方法绕过去。比如指定找个类型为 text。xhr 就不会下载完才会返回完整数据，而是可以做到边下载边获取数据，但是需要做编码转换

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;
}

上面的方法是在对webkit 内核浏览器做的兼容，但是其实在火狐浏览器和ie浏览器中有对这种场景的实现。

XMLHttpRequestResponseType

如下是常见的值：

"arraybuffer"	ArrayBuffer
"blob"	Blob
"document"	Document
"json"	JavaScript object, parsed from a JSON string returned by the server
"text"	DOMString

自己的说明可以参考我之前写的文章：前端多媒体（2）—— xhr异步接收处理二进制数据

但是我阅读了一下 flv.js 对非weikit内核的流下载发现其实还有别的浏览器类型的实现。在IE和火狐浏览器可以做到边下载留边获取流边处理，而不用等到下载完以后才能处理流

• moz-blob
  • Used by Firefox to allow retrieving partial Blob data from progress events. This lets your progress event handler start processing data while it's still beingreceived.
  • 在火狐浏览器你设置这个值，你可以在progress 事件里获取到 blob 数据
• moz-chunked-text
  • Similar to "text", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.This mode currently only works in Firefox.
  • 在火狐浏览器你设置这个值，和 text 类型相似，但是可以在 response 里获取 text stream
• moz-chunked-arraybuffer
  • Similar to "arraybuffer", but is streaming. This means that the value in response is only available during dispatch of the "progress" event and only contains the data received since the last "progress" event.When response is accessed during a "progress" event it contains a string with the data. Otherwise it returns null.This mode currently only works in Firefox.
  • 在火狐浏览器你设置这个值, 和 arraybuffer 类型相似，但是可以在 response 里获取 arraybuffer stream
• ms-stream
  • Indicates that the response is part of a streaming download. It is supported only for download requests. This mode is available only in Internet Explorer.
  • 在 IE 浏览器里，可以实现 stream 下载

参考资料

• https://stackoverflow.com/questions/30287813/receive-binary-data-in-web-browser-from-http-server-in-a-streaming-style
• https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType