11

I am currently researching the possibility of reading partial XHR responses with binary data. Our current approach is based on the 'responseText' property and base64 encoding. Clearly, this is far from optimal.

How could we read partial Blob/ArrayBuffer responses using XHR? When I try in Chrome, the entire ArrayBuffer/Blob is made available when readyState = 4, but not before that.

To summarize, it seems to me that:

  • Reading XHR's responseText property: Responses can be read before readyState = 4, and we can stream base64 encoded binary data back to the client
  • Reading XHR's response property with responseType = 'arraybuffer': No partial response reading, but the entire buffer is made available when readyState = 4

Am I missing something here? What approach could we take to read partial binary responses?

Improve this question

3 Answers 3

Reset to default
6

Keep your eyes on the fetch API, currently supported by Firefox and Chrome.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks! That looks like the way to do it. As an added benefit, in our case, we can easily use a standard XHR request for non-supporting browsers.
6

There is a way, though it's not standard yet. Firefox allows you to set responseType on XHR to "moz-blob", "moz-chunked-text" or "moz-chunked-arraybuffer", depending on which one works for you. Then, when you listen for the progress event, you will be able to access partial data as it comes in. MDN has more info on that here and here.

Chrome will support the Streams API, but it's not ready yet. Firefox may also eventually support it. I read somewhere that IE does already, though I can't seem to find any official documentation to confirm that.

Improve this answer

3 Comments

Thanks for the reply. We've already implemented our streaming/chunking mechanism. It's based on base64 encoding and responseType=text, since that seems to be the most widely supported solution today.
Might switch our approach to a way relying more on binary multiplexed WebSocket communication, chunked as per a proprietary protocol. The chunks would have to be rather small and of a predicable size, to allow efficient multiplexing but also to reliably be able to detect a disconnection. Seems to be a viable option for now.
Yeah, Websockets are another good option, assuming you have the server for it.
1

The best API to use as an XHR replacement is fetch with readableStream.

This is explained here: https://developers.google.com/web/fundamentals/primers/async-functions#example_streaming_a_response

Chrome already supports it. Firefox implements it but it must be activated manually for the moment (it will be activated by default in a future version). While waiting for this activation, Firefox implements the XHR with the non-standard response type moz-chunked-arraybuffer

The library https://www.npmjs.com/package/fetch-readablestream proposes an API that implements these two methods. It uses https://www.npmjs.com/package/web-streams-polyfill.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.