Node构建一个静态文件服务器

静态文件服务器实现的功能

读取静态文件
MIME类型支持
缓存支持/控制 
支持gzip压缩 
Range支持，断点续传 
发布为可执行命令并能够后台运行,能够经过npm install -g安装

 首先先构建好项目目录，项目目录以下：

project
 |---bin 命令行实现放置脚本
 |
 |---public 静态文件服务器默认静态文件夹
 |
 |---src 实现功能的相关代码
 |   |
 |   |__template 模板文件夹
 |   |
 |   |__app.js 主要功能文件（main文件）
 |   |__config.js 配置文件
 |
 |---package.josn （初始化）复制代码

要启动一个服务器，咱们须要知道这个服务器的启动时的端口号,在config.js配置一下：  

let config = {
 host:'localhost' //提示用 ,
port:8080 //服务器启动时候的默认端口号,
path:path.resolve(__dirname,'..','test-dir') //静态服务器启动时默认的工做目录
 }
复制代码

读取静态文件以前首先要先启动服务器,以后全部的方法都在class Server方法里

//handlebar 编译模板，获得一个渲染的方法,而后传入实际数据数据就能够获得渲染后的HTML了
function list() {
let tmpl = fs.readFileSync(path.resolve(__dirname, 'template', 'list.html'),'utf8');
return handlebars.compile(tmpl);//进行编译，最后渲染
}class Server {
    constructor(argv) {
        this.list = list();
        this.config = Object.assign({}, this.config, argv);
    }
    start() {
        let server = http.createServer();//建立服务器
        //当客户端向服务端发出数据的时候，会出发request事件
        server.on('request', this.request.bind(this));
        server.listen(this.config.port, () => {//监听端口号
            let url = `http://${this.config.host}:${this.config.port}`;
            debug(`server started at ${chalk.green(url)}`);
        });
    }
//发送错误信息，
sendError(err, req, res) {
    res.statusCode = 500;
    res.end(`${err.toString()}`);
}}
module.exports = Server;复制代码

读取静态文件

设计思路

首先输入一个url时，可能对应服务器上的一个文件，或者对应一个目录，
检查是否文件仍是目录
若是文件不存在，返回404状态码，发送not found页面到客户端
若是文件存在：
打开文件读取
设置response header
发送文件到客户端
若是是目录就打开目录列表

async request(req, res) {
    //先取到客户端想要的是文件或文件夹路径 
    let { pathname } = url.parse(req.url);//获取路径的文件信息
    let filepath = path.join(this.config.root, pathname);//服务器上的对应服务器物理路径
    try {
        let statObj = await stat(filepath);//获取路径的文件信息
        if (statObj.isDirectory()) {//若是是目录的话，应该显示目录 下面的文件列表
            let files = await readdir(filepath);//读取文件的文件列表
            files = files.map(file => ({//把每一个字符串变成对象
                name: file,
                url: path.join(pathname, file)
            }));
            //handlebar 编译模板
            let html = this.list({
                title: pathname,
                files
            });
            res.setHeader('Content-Type', 'text/html');设置请求头
            res.end(html);
        } else {
            this.sendFile(req, res, filepath, statObj);//读取文件
        }
    } catch (e) {//不存在访问内就发送错误信息
        debug(inspect(e));//inspect把一个对象转成字符
        this.sendError(e, req, res);
    }
}复制代码

缓存支持/控制 

设计思路

缓存分为强制缓存和对比缓存: 

• 两类缓存规则能够同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，若是缓存生效，直接使用缓存，再也不执行对比缓存规则. 
  
• 强制缓存若是生效，不须要再和服务器发生交互，而对比缓存无论是否生效，都须要与服务端发生交互

1. 第一次访问服务器的时候，服务器返回资源和缓存的标识，客户端则会把此资源缓存在本地的缓存数据库中。

 2. 第二次客户端须要此数据的时候，要取得缓存的标识，而后去问一下服务器个人资源是不是最新的。若是是最新的则直接使用缓存数据，若是不是最新的则服务器返回新的资源和缓存规则，客户端根据缓存规则缓存新的数据。

经过最后修改时间来判断缓存是否可用

1. Last-Modified：响应时告诉客户端此资源的最后修改时间 
   
2. If-Modified-Since：当资源过时时（使用Cache-Control标识的max-age），发现资源具备Last-Modified声明，则再次向服务器请求时带上头If-Modified-Since。
   
3.  服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应最新的资源内容并返回200状态码； 
   
4. 若最后修改时间和If-Modified-Since同样，说明资源没有修改，则响应304表示未更新，告知浏览器继续使用所保存的缓存文件。
   

ETag是资源标签。若是资源没有变化它就不会变。

1. 客户端想判断缓存是否可用能够先获取缓存中文档的ETag，而后经过If-None-Match发送请求给Web服务器询问此缓存是否可用。
   
2.  服务器收到请求，将服务器的中此文件的ETag,跟请求头中的If-None-Match相比较,若是值是同样的,说明缓存仍是最新的,Web服务器将发送304 Not Modified响应码给客户端表示缓存未修改过，可使用。
   
3.  若是不同则Web服务器将发送该文档的最新版本给浏览器客户端
   

handleCache(req, res, filepath, statObj) {
    let ifModifiedSince = req.headers['if-modified-since'];
    let isNoneMatch = req.headers['is-none-match'];
    res.setHeader('Cache-Control', 'private,max-age=30');//max-age=30缓存内容将在30秒后失效
    res.setHeader('Expires', new Date(Date.now() + 30 * 1000).toGMTString());
    let etag = statObj.size;
    let lastModified = statObj.ctime.toGMTString();
    res.setHeader('ETag', etag);//获取ETag
    res.setHeader('Last-Modified', lastModified);//服务器文件的最后修改时间
    //任何一个对比缓存头不匹配，则不走缓存
    if (isNoneMatch && isNoneMatch != etag) {//缓存过时
        return fasle;
    }
    if (ifModifiedSince && ifModifiedSince != lastModified) {//缓存过时
        return fasle;
    }
    //当请求中存在任何一个对比缓存头，则返回304，不然不走缓存
    if (isNoneMatch || ifModifiedSince) {//缓存有效
        res.writeHead(304);
        res.end();
        return true;
    } else {
        return false;
    }
}复制代码

支持gzip压缩 

设计思路

浏览器都会携带本身支持的压缩类型，最经常使用的两种是gzip和deflate。根据请求头Accept-Encoding，返回不一样的压缩格式.

getEncoding(req, res) {

    let acceptEncoding = req.headers['accept-encoding'];//获取客户端发送的压缩请求头的信息
    if (/\bgzip\b/.test(acceptEncoding)) {//若是是gzip的格式
        res.setHeader('Content-Encoding', 'gzip');
        return zlib.createGzip();
    } else if (/\bdeflate\b/.test(acceptEncoding)) {//若是是deflate的格式
        res.setHeader('Content-Encoding', 'deflate');
        return zlib.createDeflate();
    } else {
        return null;//不压缩
    }
}复制代码

Range支持，断点续传 

设计思路

• 该选项指定下载字节的范围，常应用于分块下载文件
  
• 服务器告诉客户端可使用range response.setHeader('Accept-Ranges', 'bytes')
  
•  Server经过请求头中的Range: bytes=0-xxx来判断是不是作Range请求，若是这个值存在并且有效，则只发回请求的那部分文件内容，响应的状态码变成206,若是无效，则返回416状态码，代表Request Range Not Satisfiable  

getStream(req, res, filepath, statObj) {
    let start = 0;//可读流起始位置
    let end = statObj.size - 1;//可读流结束位置
    let range = req.headers['range'];//获取客户端的range请求头信息，
    if (range) {//断点续传
        res.setHeader('Accept-Range', 'bytes');
        res.statusCode = 206;//返回整个内容的一块
        let result = range.match(/bytes=(\d*)-(\d*)/);//断点续传的分段内容不能有小数，网络传输的最小单位为一个字节
        if (result) {
            start = isNaN(result[1]) ? start : parseInt(result[1]);
            end = isNaN(result[2]) ? end : parseInt(result[2]) - 1;
        }
    }
    return fs.createReadStream(filepath, {
        start, end
    });
}复制代码

发布为可执行命令

首先在

package.json配置一下 "bin": { " http-static ": "bin/www" }

#! /usr/bin/env node //这段代码必定要写在开头，为了兼容各个电脑平台的差别性
// -d --root 静态文件目录 -o --host 主机 -p --port 端口号let yargs = require('yargs');
let  Server = require('../src/app.js');
let argv = yargs.option('d',{   
 alias:'root', 
 demand:'false',  
 type:'string',   
 default:process.cwd(),  
 description:'静态文件跟目录'    })
.option('o',{  
  alias:'host',  
  demand:'localhost',  
  type:'string',    
description:'请配置监听的主机'})
.option('p',{  
  alias:'root',  
  demand:'false',   
 type:'number',   
 default:8080,  
  description:'请配置端口号'})
.usage('http-static [options]').example(  
  'http-static -d / 8080 -o localhost','在本机的9090端口上监听客户端的请求'
).help('h').argv;
// argv = {d,root,o,host,p,port}let server = new Server(argv);//启动服务server.start();
复制代码

这样命令行当中经过输入http-static来直接启动静态文件服务器了，那么命令行调用的功能也就实现了，最后用npm publish发布一下，发布到npm上面去了，咱们就能够经过npm install -g来进行全局安装了