Method for streaming data from browser to server via HTTP

Viewed 14036

Are there any XHR-like browser APIs available for streaming binary to a server over HTTP?

I want to make an HTTP PUT request and create data programmatically, over time. I don't want to create all this data at once, since there could be gigs of it sitting in memory. Some psueudo-code to illustrate what I'm getting at:

var dataGenerator = new DataGenerator(); // Generates 8KB UInt8Array every second
var streamToWriteTo;
http.put('/example', function (requestStream) {
  streamToWriteTo = requestStream;
});

dataGenerator.on('data', function (chunk) {
  if (!streamToWriteTo) {
    return;
  }
  streamToWriteTo.write(chunk);
});

I currently have a web socket solution in place instead, but would prefer regular HTTP for better interop with some existing server-side code.

EDIT: I can use bleeding edge browser APIs. I was looking at the Fetch API, as it supports ArrayBuffers, DataViews, Files, and such for request bodies. If I could somehow fake out one of these objects so that I could use the Fetch API with dynamic data, that would work for me. I tried creating a Proxy object to see if any methods were called that I could monkey patch. Unfortunately, it seems that the browser (at least in Chrome) is doing the reading in native code and not in JS land. But, please correct me if I'm wrong on that.

6 Answers

I think the short answer is no. As of writing this response (November 2021) this is not available in any of the major browsers.

The long answer is:

I think you are looking in the right place with the Fetch API. ReadableStream is currently a valid type for the body property of the Request constructor:
https://developer.mozilla.org/en-US/docs/Web/API/Request/Request#parameters

However, sadly if you look at the browser support matrix:
https://developer.mozilla.org/en-US/docs/Web/API/Request/Request#browser_compatibility
you can see that "Send ReadableStream in request body" is still No for all the major browsers. Though it is currently available in experimental mode in some browsers (including Chrome).

There is a nice tutorial on how to do it in experimental mode here:
https://web.dev/fetch-upload-streaming/

Looking at the dates of the posts and the work done on this feature, I think it looks pretty clear that this technology is stagnating and we probably won't see it anytime soon. Consequently, WebSockets are probably still sadly one of our few good options (for unbounded stream transfers):
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API

Related