diff --git a/nodejs-stream.md b/nodejs-stream.md index f23cb4903..a6d46fdca 100644 --- a/nodejs-stream.md +++ b/nodejs-stream.md @@ -1,8 +1,22 @@ --- -title: Stream +title: Node.js streams category: Node.js +layout: 2017/sheet --- +### Types + +| Stream | Description | +| --- | --- | +| `Readable` | Data emitter | +| `Writable` | Data receiver | +| `Transform` | Emitter and receiver | +| `Duplex` | Emitter and receiver (independent) | + +See: [Stream](https://nodejs.org/api/stream.html#stream_stream) _(nodejs.org)_ + +### Streams + ```js const Readable = require('stream').Readable const Writable = require('stream').Writable @@ -12,36 +26,71 @@ const Transform = require('stream').Transform ### Piping ```js -clock() // Readable stream - .pipe(xformer()) // Transform stream - .pipe(renderer()) // Writable stream +clock() // Readable stream + .pipe(xformer()) // Transform stream + .pipe(renderer()) // Writable stream ``` -### Readable streams +### Methods -Readable streams are generators of data. Write data using `stream.push()`. +```js +stream.push(/*...*/) // Emit a chunk +stream.emit('error', error) // Raise an error +stream.push(null) // Close a stream +``` + +### Events + +```js +const st = source() +st.on('data', (data) => { console.log('<-', data) }) +st.on('error', (err) => { console.log('!', err.message) }) +st.on('close', () => { console.log('** bye') }) +st.on('finish', () => { console.log('** bye') }) +``` + +Assuming `source()` is a readable stream. + +### Flowing mode + +```js +// Toggle flowing mode +st.resume() +st.pause() +``` + +```js +// Automatically turns on flowing mode +st.on('data', /*...*/) +``` + +Stream types +------------ +{: .-three-column} + +### Readable ```js function clock () { const stream = new Readable({ objectMode: true, - read: () => {} // implement this if you need on-demand reading + read() {} }) setInterval(() => { stream.push({ time: new Date() }) - - if (error) return stream.emit('error', error) - if (eof) return stream.push(null) }, 1000) return stream } + +// Implement read() if you +// need on-demand reading. ``` -### Transform streams +Readable streams are generators of data. Write data using `stream.push()`. -Pass the updated chunk to `done(null, chunk)`. +### Transform ```js function xformer () { @@ -50,13 +99,15 @@ function xformer () { return new Transform({ objectMode: true, transform: (data, _, done) => { - done(null, { time: data.time, index: count++ }) + done(null, { ...data, index: count++ }) } }) } ``` -### Writable streams +Pass the updated chunk to `done(null, chunk)`. + +### Writable ```js function renderer () { @@ -70,14 +121,16 @@ function renderer () { } ``` -### Reading +### All together now ```js -const st = source() -st.on('data', (data) => { console.log('<-', data) }) -st.on('close', () => { console.log('** bye') }) +clock() // Readable stream + .pipe(xformer()) // Transform stream + .pipe(renderer()) // Writable stream ``` ## Also see +{: .-one-column} +- - diff --git a/react.md b/react.md index a9ac20d91..0f644ec61 100644 --- a/react.md +++ b/react.md @@ -12,6 +12,11 @@ Example ### Basic example +```jsx +import React from 'react' +import ReactDOM from 'react-dom' +``` + ```jsx class Hello extends React.Component { render () {