深入理解Node中可讀流和可寫流

duffy發表於2018-02-03

流是什麼？

這個字進入我腦海我第一時間想到的是一句詩，抽刀斷水水更流，舉杯消愁...額，今天的主角是流。不好意思差點跑題了，嗯，流是一個抽象介面，被 Node 中的很多物件所實現。比如HTTP伺服器request和response物件都是流。本人最近研究node，特意記下，分享一下。

對於流，官方文件是這樣描述的：

流（stream）在 Node.js 中是處理流資料的抽象介面（abstract interface）

Node.js 中有四種基本的流型別：

Readable - 可讀的流 (例如 fs.createReadStream()).
Writable - 可寫的流 (例如 fs.createWriteStream()).
Duplex - 可讀寫的流 (例如 net.Socket).
Transform - 在讀寫過程中可以修改和變換資料的 Duplex 流 (例如 zlib.createDeflate())

今天主要分享的是node可讀流和可寫流

可寫流

先上個流程圖讓大家直觀瞭解整個流程

Open（）後write（）開始寫入
判斷是否底層寫入和快取區是否小於最高水位線同步或非同步進行
如果底層在寫入中放到快取區裡面，否則就呼叫底層_write()
成功寫入後判斷快取區是否有資料，如果有在寫入則存加入緩衝區佇列中，緩衝區排空後觸發 drain 事件；
當一個流不處在 drain 的狀態，對 write() 的呼叫會快取資料塊，並且返回 false。一旦所有當前所有快取的資料塊都排空了（被作業系統接受來進行輸出），那麼 'drain' 事件就會被觸發，一旦 write() 返回 false，在 'drain' 事件觸發前，不能寫入任何資料塊。

可寫流的模擬實現：

let EventEmitter = require('events');

class WriteStream extends EventEmitter {
    constructor(path, options) {
        super(path, options);
        this.path = path;
        this.flags = options.flags || 'w';
        this.mode = options.mode || 0o666;
        this.start = options.start || 0;
        this.pos = this.start;//檔案的寫入索引
        this.encoding = options.encoding || 'utf8';
        this.autoClose = options.autoClose;
        this.highWaterMark = options.highWaterMark || 16 * 1024;
        this.buffers = [];//快取區，原始碼用的連結串列
        this.writing = false;//表示內部正在寫入資料
        this.length = 0;//表示快取區位元組的長度
        this.open();
    }

    open() {
        fs.open(this.path, this.flags, this.mode, (err, fd) => {
            if (err) {
                if (this.autoClose) {
                    this.destroy();
                }
                return this.emit('error', err);
            }
            this.fd = fd;
            this.emit('open');
        });
    }

    //如果底層已經在寫入資料的話，則必須當前要寫入資料放在緩衝區裡
    write(chunk, encoding, cb) {
        chunk = Buffer.isBuffer(chunk)?chunk:Buffer.from(chunk,this.encoding);
        let len = chunk.length;
        //快取區的長度加上當前寫入的長度
        this.length += len;
        //判斷當前最新的快取區是否小於最高水位線
        let ret = this.length < this.highWaterMark;
        if (this.writing) {//表示正在向底層寫資料，則當前資料必須放在快取區裡
            this.buffers.push({
                chunk,
                encoding,
                cb
            });
        } else {//直接呼叫底層的寫入方法進行寫入
            //在底層寫完當前資料後要清空快取區
            this.writing = true;
            this._write(chunk, encoding, () => this.clearBuffer());
        }
        return ret;
    }

    clearBuffer() {
        //取出快取區中的第一個buffer
        //8 7
        let data = this.buffers.shift();
        if(data){
            this._write(data.chunk,data.encoding,()=>this.clearBuffer())
        }else{
            this.writing = false;
            //快取區清空了
            this.emit('drain');
        }
    }

    _write(chunk, encoding, cb) {
       if(typeof this.fd != 'number'){
           return this.once('open',()=>this._write(chunk, encoding, cb));
       }
        fs.write(this.fd,chunk,0,chunk.length,this.pos,(err,bytesWritten)=>{
            if(err){
                if(this.autoClose){
                    this.destroy();
                    this.emit('error',err);
                }
            }
            this.pos += bytesWritten;
            //寫入多少字母，快取區減少多少位元組
            this.length -= bytesWritten;
            cb && cb();
       })
    }

    destroy() {
        fs.close(this.fd, () => {
            this.emit('close');
        })
    }
}
module.exports = WriteStream;
複製程式碼

可讀流

可讀流事實上工作在下面兩種模式之一：flowing 和 paused

在 flowing 模式下，可讀流自動從系統底層讀取資料，並通過 EventEmitter 介面的事件儘快將資料提供給應用。
在 paused 模式下，必須顯式呼叫 stream.read() 方法來從流中讀取資料片段。

flowing 流動模式

流動模式比較簡單，程式碼實現如下：

let EventEmitter = require('events');
let fs = require('fs');
class ReadStream extends EventEmitter {
    constructor(path, options) {
        super(path, options);
        this.path = path;
        this.flags = options.flags || 'r';
        this.mode = options.mode || 0o666;
        this.highWaterMark = options.highWaterMark || 64 * 1024;
        this.pos = this.start = options.start || 0;
        this.end = options.end;
        this.encoding = options.encoding;
        this.flowing = null;
        this.buffer = Buffer.alloc(this.highWaterMark);
        this.open();//準備開啟檔案讀取
        //當給這個例項新增了任意的監聽函式時會觸發newListener
        this.on('newListener',(type,listener)=>{
            //如果監聽了data事件，流會自動切換的流動模式
            if(type == 'data'){
              this.flowing = true;
              this.read();
            }
        });
    }
    read(){
        if(typeof this.fd != 'number'){
            return this.once('open',()=>this.read());
        }
        let howMuchToRead = this.end?Math.min(this.end - this.pos + 1,this.highWaterMark):this.highWaterMark;
        //this.buffer並不是快取區
        console.log('howMuchToRead',howMuchToRead);
        fs.read(this.fd,this.buffer,0,howMuchToRead,this.pos,(err,bytes)=>{//bytes是實際讀到的位元組數
            if(err){
                if(this.autoClose)
                    this.destroy();
                return this.emit('error',err);
            }
            if(bytes){
                let data = this.buffer.slice(0,bytes);
                this.pos += bytes;
                data = this.encoding?data.toString(this.encoding):data;
                this.emit('data',data);
                if(this.end && this.pos > this.end){
                   return this.endFn();
                }else{
                    if(this.flowing)
                      this.read();
                }
            }else{
                return this.endFn();
            }

        })
    }
    endFn(){
        this.emit('end');
        this.destroy();
    }
    open() {
        fs.open(this.path,this.flags,this.mode,(err,fd)=>{
           if(err){
               if(this.autoClose){
                   this.destroy();
                   return this.emit('error',err);
               }
           }
           this.fd = fd;
           this.emit('open');
        })
    }
    destroy(){
        fs.close(this.fd,()=>{
            this.emit('close');
        });
    }
    pipe(dest){
        this.on('data',data=>{
            let flag = dest.write(data);
            if(!flag){
                this.pause();
            }
        });
        dest.on('drain',()=>{
            this.resume();
        });
    }
    //可讀流會進入流動模式，當暫停的時候，
    pause(){
        this.flowing = false;
    }
    resume(){
       this.flowing = true;
       this.read();
    }
}
module.exports = ReadStream;
複製程式碼

paused 暫停模式：

暫停模式邏輯有點複雜, 畫了一張圖梳理一下

_read 方法是把資料存在快取區中，因為是非同步的，流是通過readable事件來通知消耗方的。說明一下，流中維護了一個快取，當快取中的資料足夠多時，呼叫read()不會引起_read()的呼叫，即不需要向底層請求資料。state.highWaterMark是給快取大小設定的一個上限閾值。如果取走n個資料後，快取中保有的資料不足這個量，便會從底層取一次資料

暫停模式程式碼模擬實現：

let fs = require('fs');
let EventEmitter = require('events');

class ReadStream extends EventEmitter {
    constructor(path, options) {
        super(path, options);
        this.path = path;
        this.highWaterMark = options.highWaterMark || 64 * 1024;
        this.buffer = Buffer.alloc(this.highWaterMark);
        this.flags = options.flags || 'r';
        this.encoding = options.encoding;
        this.mode = options.mode || 0o666;
        this.start = options.start || 0;
        this.end = options.end;
        this.pos = this.start;
        this.autoClose = options.autoClose || true;
        this.bytesRead = 0;
        this.closed = false;
        this.flowing;
        this.needReadable = false;
        this.length = 0;
        this.buffers = [];
        this.on('end', function () {
            if (this.autoClose) {
                this.destroy();
            }
        });
        this.on('newListener', (type) => {
            if (type == 'data') {
                this.flowing = true;
                this.read();
            }
            if (type == 'readable') {
                this.read(0);
            }
        });
        this.open();
    }

    open() {
        fs.open(this.path, this.flags, this.mode, (err, fd) => {
            if (err) {
                if (this.autoClose) {
                    this.destroy();
                    return this.emit('error', err);
                }
            }
            this.fd = fd;
            this.emit('open');
        });
    }

    read(n) {
        if (typeof this.fd != 'number') {
            return this.once('open', () => this.read());
        }
        n = parseInt(n, 10);
        if (n != n) {
            n = this.length;
        }
        if (this.length == 0)
            this.needReadable = true;
        let ret;
        if (0 < n < this.length) {
            ret = Buffer.alloc(n);
            let b;
            let index = 0;
            while (null != (b = this.buffers.shift())) {
                for (let i = 0; i < b.length; i++) {
                    ret[index++] = b[i];
                    if (index == ret.length) {
                        this.length -= n;
                        b = b.slice(i + 1);
                        this.buffers.unshift(b);
                        break;
                    }
                }
            }
            if (this.encoding) ret = ret.toString(this.encoding);
        }
        //資料存快取區中
        let _read = () => {
            let m = this.end ? Math.min(this.end - this.pos + 1, this.highWaterMark) : this.highWaterMark;
            fs.read(this.fd, this.buffer, 0, m, this.pos, (err, bytesRead) => {
                if (err) {
                    return
                }
                let data;
                if (bytesRead > 0) {
                    data = this.buffer.slice(0, bytesRead);
                    this.pos += bytesRead;
                    this.length += bytesRead;
                    if (this.end && this.pos > this.end) {
                        if (this.needReadable) {
                            this.emit('readable');
                        }

                        this.emit('end');
                    } else {
                        this.buffers.push(data);
                        if (this.needReadable) {
                            this.emit('readable');
                            this.needReadable = false;
                        }
                    }
                } else {
                    if (this.needReadable) {
                        this.emit('readable');
                    }
                    return this.emit('end');
                }
            })
        }
        if (this.length == 0 || (this.length < this.highWaterMark)) {
            _read(0);
        }
        return ret;
    }

    destroy() {
        fs.close(this.fd, (err) => {
            this.emit('close');
        });
    }

    pause() {
        this.flowing = false;
    }

    resume() {
        this.flowing = true;
        this.read();
    }

    pipe(dest) {
        this.on('data', (data) => {
            let flag = dest.write(data);
            if (!flag) this.pause();
        });
        dest.on('drain', () => {
            this.resume();
        });
        this.on('end', () => {
            dest.end();
        });
    }
}
module.exports = ReadStream;
複製程式碼

小弟我能力有限，歡迎各位大神指點，謝謝~

Node.js 可讀流和可寫流
2019-03-01
Node.js
詳解node.js中的可讀流(Readable)和可寫流(Writeable)
2018-04-08
Node.js
Node.js流(一) 可讀流及可讀流的實現
2018-06-02
Node.js
手寫node可讀流之流動模式
2018-05-31
模式
NodeJS Stream（可讀流、可寫流） API解讀
2018-09-18
NodeJSAPI
NodeJs Stream的整理總結 (一) --可讀流與可寫流
2018-04-28
NodeJS
node那點事(二) — Writable streams（可寫流）、自定義流
2019-03-01
node那點事(二) -- Writable streams（可寫流）、自定義流
2018-04-10
極簡 Node.js 入門 - 4.4 可寫流
2020-09-29
Node.js
極簡 Node.js 入門 - 4.3 可讀流
2020-09-27
Node.js
淺析node中流應用(二) 可寫流(fs.createWriteStream)
2018-07-08
淺析node中流應用(一) 可讀流(fs.createReadStream)
2018-07-05
node的讀寫流簡易實現
2018-06-03
javascript:深入理解事件流
2015-08-27
JavaScript事件
node.js中的流
2018-02-11
Node.js
讀取檔案流並寫入檔案流
2018-07-18
IO流-檔案的寫入和讀取
2014-09-27
node.js中的流(stream)
2018-08-22
Node.js
Java 字元流檔案讀寫
2018-05-22
Java字元
IO流的檔案讀寫
2016-09-28
理解JavaScript中的事件流
2014-10-20
JavaScript事件
深入理解學習Git工作流
2015-06-23
Git
java處理流和節點流（在位元組流和字元流中，又分為處理流和節點流）
2024-08-13
Java字元
深入理解Linux許可權
2019-06-16
Linux
深入理解檔案許可權
2014-06-27
io流對資料的讀寫
2018-06-29
丐版stream流理解和使用
2024-04-26
.NET 許可權工作流框架 TOP 榜
2024-07-30
框架
Node.js 指南（流中的背壓）
2019-02-16
Node.js
淺談node.js中的stream(流)
2019-02-16
Node.js
初識Node.js中的stream(流)：
2018-04-09
Node.js
Node.js 中的一股清流：理解 Stream（流）的基本概念
2019-12-06
Node.js
編寫可讀的程式碼
2012-07-11
深入理解js Dom事件機制（一）——事件流
2017-11-10
JS事件
Node.js Stream(流)
2019-02-24
Node.js
Node.js Stream(流)
2018-07-27
Node.js
Node.js Streams(流)
2018-04-05
Node.js
理解Underscore中的節流函式
2019-03-04
函式