├── .gitignore
├── backpressure
├── index.html
├── main.js
└── readme.md
├── fetch-non-stream
├── index.html
├── main.js
└── readme.md
├── index.html
├── piping
├── index.html
├── main.js
└── readme.md
├── readable-basic
├── index.html
├── main.js
└── readme.md
├── readme.md
└── streaming-fetch
├── file.txt
├── index.html
├── main.js
└── readme.md
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # Typescript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
--------------------------------------------------------------------------------
/backpressure/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Backpressure
6 |
7 |
8 |
9 | Open your DevTools console panel
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/backpressure/main.js:
--------------------------------------------------------------------------------
1 |
2 | async function init() {
3 | const countStrategy = new CountQueuingStrategy({
4 | highWaterMark: 2
5 | });
6 |
7 | const writableStream = new WritableStream({}, countStrategy);
8 |
9 | const writer = writableStream.getWriter();
10 |
11 | console.log(writer.desiredSize); // 2
12 | writer.write('1');
13 | console.log(writer.desiredSize); // 1
14 | writer.write('1');
15 | console.log(writer.desiredSize); // 0
16 | await writer.write('1');
17 | console.log(writer.desiredSize); // 2
18 | }
19 |
20 | init();
21 |
--------------------------------------------------------------------------------
/backpressure/readme.md:
--------------------------------------------------------------------------------
1 |
2 | This demo demonstrates creating a `CountQueuingStrategy` and applying it to a writable stream. Notice how the `desiredSize` property changes over time.
--------------------------------------------------------------------------------
/fetch-non-stream/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Fetch without stream
6 |
11 |
12 |
13 | Open your DevTools console panel
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/fetch-non-stream/main.js:
--------------------------------------------------------------------------------
1 |
2 | async function init() {
3 | console.time('Network Request');
4 | const response = await fetch('https://jsonplaceholder.typicode.com/photos');
5 | const text = await response.text();
6 | console.timeEnd('Network Request');
7 | document.body.innerHTML = text;
8 | }
9 |
10 | init();
11 |
--------------------------------------------------------------------------------
/fetch-non-stream/readme.md:
--------------------------------------------------------------------------------
1 |
2 | This demo demonstrates download a large network resource and updating the UI only when the entire download has finished. You can compare and contrast this with the streaming fetch example.
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Streams Examples
6 |
7 |
8 |
9 | Listing of code examples
10 |
11 |
28 |
29 |
30 | GitHub Repo
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/piping/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Readable piped into writable
6 |
7 |
8 | Open your DevTools console panel
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/piping/main.js:
--------------------------------------------------------------------------------
1 |
2 | async function init() {
3 | const readableStream = new ReadableStream({
4 | start(controller) {
5 | controller.enqueue(1);
6 | controller.enqueue(2);
7 | controller.enqueue(3);
8 | controller.close();
9 | }
10 | });
11 |
12 | const writableStream = new WritableStream({});
13 |
14 | await readableStream.pipeTo(writableStream);
15 | console.log('Piping has finished');
16 | }
17 |
18 | init();
19 |
--------------------------------------------------------------------------------
/piping/readme.md:
--------------------------------------------------------------------------------
1 |
2 | This demo demonstrates piping a readable stream into a writable stream.
--------------------------------------------------------------------------------
/readable-basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Readable Basic
6 |
7 |
8 | Open your DevTools console panel
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/readable-basic/main.js:
--------------------------------------------------------------------------------
1 |
2 | async function init() {
3 | const stream = new ReadableStream({
4 | start(controller) {
5 | controller.enqueue(1);
6 | controller.enqueue(2);
7 | controller.enqueue(3);
8 | },
9 |
10 | pull(controller) {
11 | console.log('Data was pulled from me!', controller);
12 |
13 | controller.enqueue(4);
14 | controller.enqueue(5);
15 | controller.enqueue(6);
16 | controller.close();
17 | },
18 |
19 | cancel(reason) {
20 | console.log('Stream was cancelled because: ', reason);
21 | }
22 | });
23 |
24 | const reader = stream.getReader();
25 |
26 | console.log(await reader.read());
27 | console.log(await reader.read());
28 | console.log(await reader.read());
29 | console.log(await reader.read());
30 | console.log(await reader.read());
31 | console.log(await reader.read());
32 | console.log(await reader.read());
33 | }
34 |
35 | init();
36 |
--------------------------------------------------------------------------------
/readable-basic/readme.md:
--------------------------------------------------------------------------------
1 |
2 | This demo demonstrates a basic example of creating a readable stream and consuming it with a readable stream reader.
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 |
2 | # Streams examples
3 |
4 | Some JavaScript streams examples to accompany a blog post.
5 |
6 | Demos: [sitepen.github.io/javascript-streams-blog-examples](https://sitepen.github.io/javascript-streams-blog-examples)
--------------------------------------------------------------------------------
/streaming-fetch/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Simple Stream Download Example
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/streaming-fetch/main.js:
--------------------------------------------------------------------------------
1 |
2 | async function init() {
3 | const response = await fetch('file.txt');
4 | const reader = response.body.getReader();
5 | const contentLengthHeader = response.headers.get('Content-Length');
6 | const resourceSize = parseInt(contentLengthHeader, 10);
7 |
8 | async function read(reader, totalChunkSize = 0, chunkCount = 0) {
9 | const {value: {length} = {}, done} = await reader.read();
10 |
11 | if (done) {
12 | return chunkCount;
13 | }
14 |
15 | const runningTotal = totalChunkSize + length;
16 | const percentComplete = Math.round((runningTotal / resourceSize) * 100);
17 |
18 | const progress = `${percentComplete}% (chunk ${chunkCount})`;
19 |
20 | console.log(progress);
21 | document.body.innerHTML += progress + '
';
22 |
23 | return read(reader, runningTotal, chunkCount + 1);
24 | }
25 |
26 | const chunkCount = await read(reader);
27 | console.log(`Finished! Received ${chunkCount} chunks.`);
28 | }
29 |
30 | init();
31 |
--------------------------------------------------------------------------------
/streaming-fetch/readme.md:
--------------------------------------------------------------------------------
1 |
2 | Warning: This example includes a large 4.6 MB text file.
3 |
4 | This demo demonstrates streaming a large textual response from the network to the client.
--------------------------------------------------------------------------------