Consuming chunked data asyncrhonously in javascript

Question

I have a (GET) endpoint that sends data in chunks (Transfer-Encoding: chunked). The data is JSON encoded and sent line by line.

Is there a way to consume the data sent by this endpoint in an asynchronous manner in JavaScript (or using some JavaScript library)?

To be clear, I know how to perform an asynchronous GET, but I would like to have the GET request not waiting for the whole data to be transfered, but instead read the data line by line as it arrives. For instance, when doing:

curl  http://localhost:8081/numbers

The lines below are shown one by one as they become available (the example server I made is waiting a second between sending a line and the second).

{"age":1,"name":"John"}
{"age":2,"name":"John"}
{"age":3,"name":"John"}
{"age":4,"name":"John"}

I would like to reproduce the same behavior curl exhibits, but in the browser. I don't want is leave the user wait till all the data becomes available in order to show anything.

The future answer would likely be developer.mozilla.org/en-US/docs/Web/API/Streams_API — Dan D.
– Dan D., Commented Mar 10, 2018 at 8:39
Thanks! That's why I cannot find an answer to this problem anywhere. — Damian Nadales
– Damian Nadales, Commented Mar 10, 2018 at 9:00
Well Streams_API doesn't look like coming to Firefox anytime soon but ReadableStream is already available with Fetch API. You might find this article on how to handle streams with Fetch API interesting. — Redu
– Redu, Commented Mar 10, 2018 at 14:18
Damn! I wish I had seen your answer before re-implementing the end-point to use server sent events :) I'm gonna give ReadableStream a try. — Damian Nadales
– Damian Nadales, Commented Mar 10, 2018 at 14:29
Right, you may save some workload and a websockets library dependency at the server side. — Redu
– Redu, Commented Mar 10, 2018 at 14:39

Damian Nadales · Accepted Answer · 2018-03-10 16:30:47Z

9

Thanks to Dan and Redu I was able to put together an example that consumes data incrementally, using the Fetch API . The caveat is that this will not work on Internet Explorer, and it has to be enabled by the user in Firefox:

   /** This works on Edge, Chrome, and Firefox (from version 57). To use this example
    navigate to about:config and change

    - dom.streams.enabled preference to true
    - javascript.options.streams to true


    See https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
*/

fetch('http://localhost:8081/numbers').then(function(response) {

  console.log(response);

  const reader = response.body.getReader();

  function go() {
    reader.read().then(function(result) {
      if (!result.done) {
        var num = JSON.parse(
          new TextDecoder("utf-8").decode(result.value)
        );
        console.log(
          "Got number " + num.intVal
        );        
        go ();
      }
    })
  }

  go ();
})

The full example (with the server) is available at my sandbox. I find it illustrative of the limitations of XMLHttpRequest to compare this version with the this one, which does not use the fetch API.

answered Mar 10, 2018 at 16:30

Damian Nadales

5,0571 gold badge23 silver badges41 bronze badges

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

6 Comments

Redu Over a year ago

Glad to see that you have worked it out with the ReadStream. Just one quick reminder; unlike in Haskell, in JS using recursion in production code might turn out to be hazardous since your call stack might get blown up eventually if you have like 200K+ chunks to read. So if you know the chunk count in advance you might as well fill an array of that size with reader.read() promises and then chain their .then() stages up by reducing the array, sequencing the promises. Just an idea.

Damian Nadales Over a year ago

Thanks for the reminder Redu. I spent too much time doing Haskell :)

Vidar Over a year ago

Note that there is no guarantee that the body stream will give you the full chunks in one read (stackoverflow.com/questions/57412098/…). You might be better off using NDJSON (buffering the decoded text until you hit a newline, then parsing the JSON in the buffer up until then).

moxched Over a year ago

@Vidar your answer pretty much covers every use case, but i have a hard time applying ndjson parsing to my reader, do you have any usage sample?

Vidar Over a year ago

@moxched This might be of some assistance: github.com/deanhume/streams

|

Collectives™ on Stack Overflow

Consuming chunked data asyncrhonously in javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related