Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
stream between nodejs and whatwg
Search
Jxck
August 08, 2016
Technology
5
2.1k
stream between nodejs and whatwg
Talk about Stream API difference between node.js and whatwg
at #tng11 2016/08/08
Jxck
August 08, 2016
Tweet
Share
More Decks by Jxck
See All by Jxck
IE Graduation (IE の功績を讃える)
jxck
22
16k
IE Graduation Certificate
jxck
6
6.1k
RFC 9111: HTTP Caching
jxck
1
710
tc39_study_2
jxck
1
11k
IETF における ABNF とプロトコルパーサの話 / ABNF for Protocol Parser @ IETF
jxck
2
1.2k
Web Components 元年 v3 / Web Components first year v3
jxck
1
1k
Periodic Background Sync
jxck
0
580
Podcast over PWA
jxck
0
270
Yearly Web 2019
jxck
0
190
Other Decks in Technology
See All in Technology
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
170
OPENLOGI Company Profile
hr01
0
67k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
120
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
110
AI専用のリンターを作る #yumemi_patch
bengo4com
5
3.8k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
380
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
120
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
180
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
390
5min GuardDuty Extended Threat Detection EKS
takakuni
0
180
怖くない!はじめてのClaude Code
shinya337
0
330
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Producing Creativity
orderedlist
PRO
346
40k
Being A Developer After 40
akosma
90
590k
Become a Pro
speakerdeck
PRO
28
5.4k
RailsConf 2023
tenderlove
30
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Transcript
Stream b/w node.js & whatwg Tokyo Node Gakuen #tng22 2016/8/8
Jxck
• id: Jxck • github: Jxck • twitter: @jxck_ •
blog: https://blog.jxck.io • podcast: http://mozaic.fm • Love: music Jack
mozaic.fm ep10 Node.js 3 https://mozaic.fm/episodes/10/nodejs.html
4 Node.js の Stream API で「データの流れ」を扱う方法 - Block Rockin’ Codes
“Stream を制す者は Node を制す” 5
“Stream を制す者は Node を制す” 6 から 5 年...
7 WHATWG Streams Stream API がブラウザにやってくる - Block Rockin’ Codes
先に結論 8 互換性など無い
Stream とは?(哲学) 9
Common Terminology 10
11 概念としての Stream File Process Network File Process Network Without
Stream(データをまとめて次に渡す) With Stream(データを得られた順に次に渡す) then(buffer) pipe(chunk) then(buffer) pipe(chunk)
12 両者の供述を聞く
• 非同期は Callback が基本 • 引数にルールを決めて扱いやすくしよう • 連続するイベントは EventEmitter •
EventEmitte の上位 API が Stream • Multi-Consumer • カスタマイズは継承 13 In Node.js Stream data data data data data data data data data data data data
14 In WHATWG • 非同期は Promise を返してこう • Async/Await でそれを便利にしよう
• もちろん Stream は Promise のジェネレータ • (≠ ES6 Generator) • Single-Consumer • カスタマイズはコンストラクタ Stream Promise
diff of Basic Async Handling 15 // Node.js - Callback
file.readFile(path, (error, data) => { console.log(error, data); }); // WHATWG(@2016) - Promise cache.match(req).then((res) => { console.log(res); }).catch((error) => { console.error(errror); });
node.js stream // ReadableStream extends Stream (extends EventEmitter) readableStream.on(‘data’, (value)
=> { console.log(value); }); readableStream.on(‘end’, () => { console.log(‘done’); }); readableStream.on(‘error’, (error) => { console.error(error); }); 16
whatwg stream let reader = readableStream.getReader(); // read() を呼ぶと chunk
を resolve する promise が返る reader.read().then(function processResult({done, value}) { if (done) return; console.log(value); // read() の呼び出しを再帰する return reader.read().then(processResult); }).catch((error) => { console.error(error); }); 17
node.js pipe readable .pipe(transform) // return readable .pipe(transform) // return
readable .pipe(writable) // return readable .on('end') .on('error'); 18
whatwg pipe readable .pipeThrough(transform1) // return readable .pipeThrough(transform2) // return
readable .pipeTo(writable) // return promise .then(done) .catch(fail); 19
whatwg tee() const [r1, r2] = readableStream.tee(); Promise.all([ r1.pipeTo(cache), //
データは同一参照 r2.pipeTo(upload) ]) .then(() => console.log('done')) .catch((err) => console.error(err)); 20
Push/Pull Source/Sync • Source ◦ underlying source ◦ データの生成元 •
Sink ◦ underlying sink ◦ データの渡す先 • Push Underlying Source ◦ 勝手に湧き出てくる ◦ TCP, Click, Timer etc • Pull Underlying Source ◦ 欲しい時に取り出す ◦ File, Random etc 21
backpressure • read の生成が write の消費より早い場合 ◦ そのままだと write が間に合わず溢れる
◦ write の buffer を見て read を止める方法 • いつ backpressure をかけるか ◦ queuing strategy で決める 22 File Process Network 速 遅 ちょっと待って!
queuing stragtegy • backpressure の戦略 ◦ 内部の queue の管理戦略 ◦
high-water mark を決める ◦ queue の空き < hwm だったら backpressure • 組み込み queuing strategy ◦ count queuing strategy (HWM == count) ◦ bytelength queuing strategy (HWM == size) 23 速 遅 二つ空くまでは ストップで HWM
独自 Stream socketStream = new ReadableStream({ start(controller) { socket.on('data', (e)
=> controller.enqueue(e.data)); socket.on('end', () => controller.close()); socket.on('error', (err) => controller.error(err)); }, cancel() { socket.close(); } }); 24
backpressure 付き readable socketStream = new ReadableStream({ start(controller) { socket.on('data',
(e) => { if (controller.desiredSize <= 0) { socket.readStop(); // backpressure } controller.enqueue(e.data); }); }, pull() { // resume socket.readStart(); }); 25
backpressure 付き writable fileStream = new WritableStream({ start() { return
fs.open(filename, "w").then(result => { this.fd = result; }); }, write(chunk) { // promise を返す return fs.write(this.fd, chunk, 0, chunk.length); } close() { return fs.close(this.fd); } }); 26
Observable ? 27 • Stream ◦ WHATWG Spec ◦ あくまで
I/O の抽象化 ◦ 伝達対象はデータの Chunk ◦ backpressure のサポート ◦ tee() を覗き、基本 single-comsumer • Observable ◦ ECMAScript Spec ◦ 連続イベントの抽象化 ◦ イベントそのものだから間引くなどの発想がある ◦ backpressure 無し ◦ multi-consumer 前提 How do readable streams relate to observables or EventTarget?
まとめ 28 • node - whatwg 間で Stream に互換はない ◦
非同期の表現(promise) から来る差 ◦ stream は promise のジェネレータ ◦ 変換するなら node2whawg の方が楽そう • 似てるけど違う用途 ◦ whatwg stream は I/O のため ◦ observable は event のため • お気持ち ◦ i8c なんてなかった
Fin 29
Jack