node中的http会了吗? 来手写一个属于自己的'cgp-server'静态服务

序言

手写一个静态服务可以对node中http模块有更深的理解，这是我们的初衷。http-server相信大家都用过，这里我们要实现类似个功能。功能如下

启动我们写好的模块后，输入localhost:3000打开我们public目录下的文件(默认打开index.html)
用到debug插件，主要用于在命令行输出一些日志，我们只用基本的功能，所以没有难点。不会戳这里
可能用到chalk插件，就是把命令行输出的日志五颜六色，变得好看，没什么太大作用，用法戳这里

准备工作

我们的目录解构如下

大家应该一看就懂啦，启动我们服务，自动打开public/index.html
bin/www.js 是我们后面用命令行启动服务的配置
public是我们的静态目录
app.js 主文件
config.js 配置文件
tmpl.html是我们用ejs编译的模板，后面讲到

先写最简单的config.js

let path = require('path');
let config = {
    hostname:'127.0.0.1', //默认主机
    port:3000,  //默认端口
    dir:path.join(__dirname,'../public') //默认打开的目录(绝对路径)
};
module.exports = config;
复制代码

以上代码都能看得懂，下面开始写我们主文件

核心代码 app.js

1、引入所需的依赖包

let http = require('http');
let url = require('url');
let path = require('path');
let util = require('util');
let fs = require('fs');
let zlib = require('zlib');
let mime = require('mime'); // 得到内容类型
let debug = require('debug')('*'); // 打印输出 会根据环境变量控制输出
let chalk = require('chalk'); // 粉笔
let ejs = require('ejs'); // 模板引擎

//先声明好，下面解释
let config = require('./config');
let stat = util.promisify(fs.stat);//promise化 fs.stat方法
let readdir = util.promisify(fs.readdir);
let template = fs.readFileSync(path.join(__dirname,'tmpl.html'),'utf8'); //读取ejs的模板文件
复制代码

mime解析文件给你内容类型，用法
ejs渲染引擎，我们用最简单功能，不会也能看懂

2、http模块开启服务

/*运行的条件 指定主机名
* 指定启动的端口号
* 指定运行的目录
 */
let config = require('./config'); //引入配置文件
class Server { //声明类
    constructor() {
        this.config = config; //讲配置挂载再我们的实例上
    }
    handleRequest(req,res){ //确保这里的this都是实例

    }
    start(){//服务开始的方法
        let server =http.createServer(this.handleRequest.bind(this));
        let {hostname,port} = this.config; //解构主机名和端口
        server.listen(port,hostname);
        debug(`http://${hostname}:${port} start`) //命令行中打印
    }
}
//开启一个服务
let server = new Server();
server.start(); //调用start方法

复制代码

截至到目前位置，简单的服务已经开启了，先来测试下效果吧

完美，控制台打印出了内容，

3、实现handleRequest方法，即处理请求逻辑

列出我们要做什么

解析url的路径名
与默认配置中路径(G://cgp-server/public)拼接
判断是文件还是文件夹还是404

let stat = util.promisify(fs.stat);//promise化 fs.stat方法
 async  handleRequest(req,res){ //确保这里的this都是实例
        let {pathname} = url.parse(req.url,true); //获取url的路径
        let p = path.join(this.config.dir,pathname); // 可能是G:/cgp-server/public 可能是G://cgp-server/public/index.html
        //1、根据路径 返回不同结果 如果是文件夹 显示文件夹里的内容
        //2、如果是文件 显示文件的内容
        try{
            let statObj=await stat(p);
        }catch (e) {
            //文件不存在情况
            this.sendError(req,res,e)
        }
    }
复制代码

try catch用于捕获错误，当文件不存在，调用sendError方法，先来实现这个错误的处理方法

4、文件不存在的逻辑，sendError()

sendError(req,res,e){
        debug(util.inspect(e)); //输出错误,util模块提供方法
        res.statusCode = 404;
        res.end('Not Found');
    }
复制代码

写了这么多了，测试下错误文件能否打印错误

测试完美,此时我们应该判断打开的是文件还是目录，并给对应的方法，下面我们开始目录的渲染方法

5、ejs渲染目录列表

先声明一个template模板，挂载到实例上

let template = fs.readFileSync(path.join(__dirname,'tmpl.html'),'utf8'); //读取ejs的模板文件
class Server{
    constructor(){
        this.template = template //挂载到实例上
    }
}
复制代码

如果是目录，渲染出一个html页展示目录结构

if(statObj.isDirectory()){
                //如果是目录 列出目录内容可以点击
                let dirs = await readdir(p); //public下面的目录结构=>[index.html,style.css]
                dirs =dirs.map(dir=>{
                    return {
                        filename:dir,
                        path:path.join(pathname,dir)
                    }
                });
                //dirs就是要渲染的数据 
                //格式如下[{filename:index.html,path:'/index.html'},{{filename:style.css,path:''/style.css}}]
                let str =ejs.render(this.template,{dirs}); //ejs渲染方法
                // console.log(str);
                res.setHeader('Content-Type', 'text/html;charset=utf-8');
                res.end(str);
            }
复制代码

我们来看下tmpl.html模板是怎么写的,ejs用法,我们只用最简单的，所以应该能看懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
//循环dirs中的内容到页面中
<% dirs.map(item=>{%>
    <li><a href="<%=item.path%>"><%=item.filename%></a></li>
<%})%>
</body>
</html>

复制代码

渲染目录结构，我们已经写完了，测试下看能不能运行

目前来看，无bug，接下来实现如果是文件的话，直接把文件内容渲染出来

6、文件的渲染方法,即this.sendFile()方法

sendFile(req,res,p,statObj){
     res.setHeader('Content-Type', mime.getType(p) + ';charset=utf-8');
        fs.createReadStream(p).pipe(res);//可读流pipe到可写流
}
复制代码

功能已经实现拉，不信我们测下

功能已经实现，但我们要求再增加三个功能
1、检测是否支持缓存
2、检测是否支持压缩
3、检测是否支持范围请求

6.1增加缓存功能

修改下sendFile()方法添加三个功能

 sendFile(req,res,p,statObj){
        // 1、检测是否有缓存
        if(this.cache(req,res,p,statObj)){ //如果有缓存
            res.statusCode = 304;
            res.end();
            return
        }
        //2、检测是否支持压缩
            ....
        //3、检测是否有范围请求
            ....
        
    }
复制代码

cache()缓存方法

缓存有两种方式，强制缓存和协商缓存

强制缓存服务端Catch-Control 、 Expires
协商缓存服务端Last-Modified 、Etag
协商缓存客户端if-modified-since if-none-match 与服务端对应
贴下百度缓存的解构给大家看下

看完这个图，相信大家应该懂啦。下面开始写缓存方法

cache(req,res,p,statObj){  //实现缓存
        /* 强制缓存 服务端 Cache-Control Expires
            协商缓存  服务端 Last-Modified Etag
            协商缓存  客户端 if-modified-since  if-none-match
            etag ctime + 文件的大小
            Last-modified ctime
            强制缓存
            */
        res.setHeader('Cache-Control', 'no-cache');
        res.setHeader('Expires', new Date(Date.now() + 10 * 1000).toGMTString());//10秒后重新发请求
        let etag = statObj.ctime.toGMTString() + statObj.size; //文件修改时间和文件大小
        let lastModified = statObj.ctime.toGMTString(); //文件的修改时间
        res.setHeader('Etag', etag);
        res.setHeader('Last-Modified', lastModified);
        let ifNoneMatch = req.headers['if-none-match']; 
        let ifModifiedSince = req.headers['if-modified-since']; 
        if (etag != ifNoneMatch) { //不相等，不走缓存
            return false;
        }
        if (lastModified != ifModifiedSince) { //同理
            return false;
        }
        return true; //否则走缓存
    }

复制代码

缓存功能写完了，我们测试下设置的头有没有添加上

缓存我们就已经实现啦

6.2 实现压缩功能

node中zlib提供压缩功能，这里就不讲怎么用啦，用法戳官网

gzip(req,res,p,statObj){
        // 客户端 Accept-Encoding: gzip, deflate, br
        // 服务端 Content-Encoding: gzip
        let encoding = req.headers['accept-encoding']; //获取请求头的接收的压缩格式
        if (encoding) {
            if (encoding.match(/\bgzip\b/)) {
                res.setHeader('Content-Encoding', 'gzip')
                return zlib.createGzip();//返回一个gzip的压缩流
            } else if (encoding.match(/\bdeflate\b/)) {
                res.setHeader('content-encoding', 'deflate');
                return zlib.createDeflate(); //返回createDeflate的压缩流
            } else {
                return false; //否则不支持压缩
            }
        } else {
            return false;//否则不支持压缩
        }
    }
复制代码

修改下sendFile()方法

sendFile(req,res,p,statObj){
        // 1、检测是否有缓存
        if(this.cache(req,res,p,statObj)){ //如果有缓存
            res.statusCode = 304;
            res.end();
            return
        }
        //2、检测是否支持压缩
        res.setHeader("Content-Type",mime.getType(p)+";charset=utf8");
        let compress =this.gzip(req,res,p,statObj);
        if(compress){ //检测是否压缩。返回的是压缩流
           return fs.createReadStream(p).pipe(compress).pipe(res);
        }else{ //不支持压缩直接把文件读出来即可
           return fs.createReadStream(p).pipe(res)
        }
        //3、检测是否有范围请求
            ....
        
    }
复制代码

用1.txt文件测试下

目前来看都还ok,还剩最后一个功能，实现范围请求

6.3 实现范围请求功能

客户端发送Range:bytes=0-3
服务端对应Accept-Range:bytes Content-Range:bytes 0-3/xxx Content-Length:xxx

由于可能同时会有压缩和范围请求，我们稍微改下前面的代码

  sendFile(req,res,p,statObj){
        // 1、检测是否有缓存
            ....
        //2、检测是否支持压缩同时加上范围请求
        res.setHeader("Content-Type",mime.getType(p)+";charset=utf8");
        let compress =this.gzip(req,res,p,statObj);
        let {start,end} = this.range(req,res,p,statObj); //解构开始和结束的位置
        if(compress){ //检测是否压缩。返回的是压缩流
           return fs.createReadStream(p,{start,end}).pipe(compress).pipe(res);
        }else{
            // res.setHeader("Content-Type",mime.getType(p)+";charset=utf8");
           return fs.createReadStream(p,{start,end}).pipe(res)
        }

    }
复制代码

range()范围请求的方法

range(req, res, statObj, p) {
        //客户端 Range:bytes=0-3
        //服务端 Accept-Range:bytes Content-Range:bytes 0-3/8777

        let range = req.headers['range']; //如果有范围请求
        if (range) {
            let [, start, end] = range.match(/(\d*)-(\d*)/); //解构出开始和结束的位置
            start = start ? Number(start) : 0; //start设置默认值
            end = end ? Number(end) : statObj.size - 1; //end设置默认值
            res.statusCode = 206; //状态码 206范围请求
            res.setHeader('Accept-Ranges',"bytes");
            res.setHeader('Content-Length',end-start+1);
            res.setHeader('Content-Range',`bytes ${start}-${end}/${statObj.size}`);
            return {start,end};
        }else {
            return {start:0, end:statObj.size};
        }
    }
复制代码

基本功能已经实现，测试下代码,我们用curl工具发送请求，用法

1.txt的内容123456789。我们只想要前4个字符

测试完美，接下来我们还想实现输入cgp-server ，自动开启浏览器，打开目录。我们需要引用一个模块 yargs

7、yargs模块配置命令行的输入

yargs配置用法`
这里我们只用最基本用法，一看就懂，详细了解请看官网

7.1 npm link作用

npm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。

7.2 修改下package.json文件

7.3 www.js的配置

7.3.1我们把app.js主文件导出给www.js使用

7.3.2修改www.js文件

#! /usr/bin/env node   //执行命令后会执行 bin/www.js
const yargs = require('yargs');
let argv = yargs.option('port',{ //yargs的基础用法
    alias: 'p', //别名
    default: 3000, //默认值
    description:'this is port',  //描述
    demand:false // 是否必须
}).option('hostname',{
    alias: 'h',
    default: 'localhost',
    description:'this is hostname',
    demand:false
}).option('dir',{
    alias: 'd',
    default: process.cwd(),
    description:'this is cwd',
    demand:false
}).usage('cgp-server  [options]' ).argv;

//开启服务
let Server = require('../src/app.js');
new Server(argv).start();

// 判断是win还是mac平台
let platform = require('os').platform();
//开启子进程
let {exec} = require('child_process');
//win系统   win32
if(platform==="win32"){
    exec(`start http://${argv.hostname}:${argv.port}`)
}else {
    exec(`open http://${argv.hostname}:${argv.port}`)
}
复制代码

简单介绍yargs用法。然后我们输入 cgp-server --help看效果

yargs.option('port',{ //yargs的基础用法
    alias: 'p', //别名
    default: 3000, //默认值
    description:'this is port',  //描述
    demand:false // 是否必须
})
复制代码

解释下流程，先开启服务，然后判断系统，再然后根据不同的平台执行自动打开浏览器

测试下看能不能启动

结尾

如果你能看到这里，真的不容易，点个赞再走吧，源码分享给你

node中的http会了吗? 来手写一个属于自己的'cgp-server'静态服务

序言

准备工作

我们的目录解构如下

先写最简单的config.js

核心代码 app.js

1、引入所需的依赖包

2、http模块开启服务

3、实现handleRequest方法，即处理请求逻辑

4、文件不存在的逻辑，sendError()

5、ejs渲染目录列表

6、文件的渲染方法,即this.sendFile()方法

6.1增加缓存功能

6.2 实现压缩功能

6.3 实现范围请求功能

7、yargs模块配置命令行的输入

7.1 npm link作用

7.2 修改下package.json文件

7.3 www.js的配置

7.3.1我们把app.js主文件导出给www.js使用

7.3.2修改www.js文件

结尾

猜你喜欢