DEV Community

Cover image for How to stream data over HTTP using Node and Fetch API

How to stream data over HTTP using Node and Fetch API

bsorrentino on February 11, 2024

Abstract This article presents a practical guide to using HTTP streaming for efficient data visualization in web applications. I was i...
Read full post
Collapse
 
dchahla profile image
Daniel Chahla •

I found this article to be very well written.

I’m excited to do some generator benchmarking against my byte-barometer. I haven’t done a write up yet but feel free to give it a try.

chahla.net/static/byte-barometer/

Collapse
 
dami2 profile image
dami •

Great article, I found it very interesting.

I would love to see a comparison, to think about the pros and cons of using HTTP streaming against Servers sent events or websockets communication

Collapse
 
bsorrentino profile image
bsorrentino •

Interesting topic

I think that SSE and/or WebSocket fit for different (and more complex) scenarios when user interactions are thought purely in asynchronous fashion, while streaming is mostly an optimization to improve the overall user experience minimizing the negative impact upon waiting of data

Collapse
 
rezaerfani67 profile image
RezaErfani67 •

Great , can i work with json as Content-Type?

Collapse
 
bsorrentino profile image
bsorrentino • • Edited

Absolutely yes

Simply to have to change content-type accordingly and parse JSON after client decoding

for await ( let chunk of streamingFetch( () => fetch('http://localhost:3000/') ) ) {
    try { 
         const json = JSON.parse( chunk );        
         console.log( json );
    }
    catch( e ) {
      console.error( 'error parsing chunks of data', e );
    }
}
Enter fullscreen mode Exit fullscreen mode

Take in account that you are responsible to produce from the server a valid JSON chunk of data

Collapse
 
karam_af21e0f07a837da159c profile image
Karam •

Isn't using await counterintuitive to streaming ?

Await means, wait for the api call to finish, then proceed

Collapse
 
bsorrentino profile image
bsorrentino • • Edited

Await is needed because we expect that chunk of data is ready, the asynchronous iterator is used for this purpose.
At the end you have multiple await and for each of them the chunk of data produced is returned to the client.