Skip to content

Shows how an application can use HTTP streaming to start showing results while the rest of the data is still loading

Notifications You must be signed in to change notification settings

Nivani/http-streaming

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTTP streaming

This repository shows how an application can use HTTP streaming to start showing results while the rest is still loading.

This codebase accompanies the article Implement HTTP Streaming with Node.js and Fetch API.

Get started

Step 1: Run the API

  1. cd ./api
  2. npm install
  3. node ./api.js

Step 2: Host the webapp

  1. cd ./webapp
  2. npm install -g http-server
  3. http-server .

Step 3: See HTTP streaming in action

  1. Open http://localhost:8080 in your favorite web browser
  2. Open devtools (F12)
  3. Go to the network tab
  4. Set network throttling to 3G
  5. Have fun!

Using HTTP/2

Preperation: HTTP/2 requires HTTPS, so make sure you have a cert and key file available that you can use for local develoment. More information on how to set this up can be found here: https://web.dev/how-to-use-local-https/

Step 1: Update the paths in api/api.js so that they point to to your own cert and key files:

// update the paths, so that they point to your own cert and key files
http2.createSecureServer(
    {
        cert: fs.readFileSync(path.resolve('../../../.https/localhost.pem')),
        key: fs.readFileSync(path.resolve('../../../.https/localhost-key.pem')),
    },
    app.callback(),
).listen(http2Port);

Step 2: Run the API with HTTP/2 enabled:

node ./api.js -http2

Step 3: See it in action by clicking the button that says "Stream with HTTP/2!".

About

Shows how an application can use HTTP streaming to start showing results while the rest of the data is still loading

Resources

Stars

Watchers

Forks