阅读 1216

尝试手写一个 nodejs http-server(含发布到npm的流程)

前言: 关于 http server

应该有小伙伴了解或用过http-serverhttp-server是一个node环境下的命令行http服务器,这里是npm官网的链接 www.npmjs.com/package/htt… , 可以从npm的官网查到其用法:
即npm安装后,在命令行输入指令http-server直接开启服务器,在服务器启动的目录下,默认会找public静态资源目录,去访问默认的127.0.0.1:8080 可以访问到静态目录站点。

非常易用和方便,如果我们想改变端口,默认目录,或者主机名等等,可以在启动时在命令行直接配置

具体用法就是cmd: http-server -p 3001 那么启动时就会访问3001端口,其他配置可以参考npm官网了解,在这里就不赘述了。本篇主要想通过http-server的底层原理,实现一个简易的http-server包,实现后还可以发到npm上成为自己的作品哦,一起看看吧。

npm 注册

想要了解发布npm的同学可以在npm官网注册属于自己的npm账号,注意邮箱一定要验证哦,不然发布不了自己的包

开始项目前最好提前了解的一些内容

  • nodejs环境
  • fs模块,包括读取文件,读写流等
  • async,promise
  • http知识
  • ejs模板引擎

一 项目搭建

package.json

首先要安装node环境,因为我们的项目是基于nodejs的http工具。 创建项目文件夹后用npm或yarn初始化都可以,创建项目的package.json文件,配置过程跟随包管理工具的提示即可,输入name的时候,可以使用你想要发布的包的名字;author输入你在npm官网注册的用户名,版本就默认是1.0.0就好,我的pachage.json配置如下

这里bin我们配置为 启动命令行自定义名:"bin/www.js",作为我们的命令行启动配置文件
main: index.js是我们主要逻辑脚本
author是作者名,这里使用npm官网的用户名保持一致即可

文件夹结构

建议大家这样配置 首先有bin文件夹,下放www.js,这里我们用于配置命令行工具,也是启动包的关键所在
node_modules为安装依赖后生成的,请忽略
public是我们想要让用户访问的静态资源目录,可以随意放一些文件夹和文件
src是我们的核心js和配置
src/template.html是展示的界面,因为我们要搭建的是一个静态资源站点,用户需要访问页面,可以点击目录或文件等操作。

二 核心代码

1. src/config.js

首先我们构建config.js,即默认配置项

module.exports = {
    port: 8080, // 默认端口
    host: 'localhost', // 默认主机名
    dir: process.cwd() // 默认读取目录
}
复制代码

我们导出默认的端口号,默认的主机名,和默认的文件目录,
其中 process.cwd()是读取进程当前的工作目录,你在哪启动,就读哪个目录

2. src/template.html

上面讲到了template.html用于展示目录,我们这里采用ejs模板引擎,服务器端渲染的方式展示。 这里有ejs介绍,可以简单了解写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2><%=name%></h2>
    <%arr.forEach(item=>{%>
      <li><a href="<%=item.href%>"><%=item.name%></a></li>
    <%})%>
</body>
</html>
复制代码

h2标签中我们展示当前路径 li为文件目录结构,可供点击进入文件或文件夹;可以看出,我们要给这个页面输出name和arr两个数据,在核心js中会详细讲如何渲染template.

3. src/index.js

这里是我们的主要逻辑脚本了,本js里会封装Server类,用于在www.js中启动服务器
简要架构:

我们引入的模块主要有:

  • http http模块
  • util util工具模块,主要使用promisify方法
  • url url模块 可方便获取路径
  • zlib 文件压缩模块,用于创建gzip或deflate的转化流
  • fs 文件系统模块
  • path 路径拼接
  • querystring 路径处理
  • ejs 模板引擎
  • chalk 粉笔模块 可以给输出的命令行文本加颜色喔
  • mime 获取文件类型
  • debug debug模块
  • config 我们自己写的配置文件

下面开始构建 Server 类,用于处理请求中的各种情况,返回不同的内容

① 构造Server

class Server {
    constructor(command) {
        this.config = {...config,...command} // config和命令行的内容展示
        this.template = template;
    }
}
复制代码

② 主要的请求处理方法 ※

class Server {
    ...
    async handleRequest(req, res) {
        let { dir } = this.config; // 需要将请求的路径和dir拼接在一起
        //如 http://localhost:8080/index.html
        let { pathname } = url.parse(req.url);
        // 如果独到的是网站小图标,就直接输出
        if (pathname === '/favicon.ico') return res.end();
        pathname = decodeURIComponent(pathname); // 对文件夹名称进行转码处理
        // p是决定文件路径
        let p = path.join(dir, pathname);
        try {
          // 判断当前路径是文件 还是文件夹
          let statObj = await stat(p);
          if (statObj.isDirectory()) {
            // 读取当前访问的目录下的所有内容 readdir 数组 把数组渲染回页面
            res.setHeader('Content-Type', 'text/html;charset=utf8')
            let dirs = await readdir(p);
            dirs = dirs.map(item=>({
              name:item,
              // 因为点击第二层时 需要带上第一层的路径,所有拼接上就ok了
              href:path.join(pathname,item)
            }))
            // 渲染template.html中需要填充的内容,name是当前文件目录,arr为当前文件夹下的目录数组
            let str = ejs.render(this.template, {
              name: `Index of ${pathname}`,
              arr: dirs
            });
            
            // 响应中返回填充内容
            res.end(str);
        
          } else {
          // 如果不是文件夹,则直接输出文件内容
            this.sendFile(req, res, statObj, p);
          }
        } catch (e) {
          debug(e); // 发送错误
          this.sendError(req, res);
        }
  }
    ...
}
复制代码

③ 处理用户缓存

用于告知服务器是否本次缓存,如果是浏览器客户端已经缓存的文件,直接读取缓存即可,优化性能

class Server {
    ...
    
    cache(req, res, statObj, p ) {
        // 设置缓存头
        res.setHeader('Cache-Control', 'no-cache');
        res.setHeader('Expires', new Date(Date.now() + 10 * 1000).getTime());
        // 设置etag和上次最新修改时间
        let eTag = statObj.ctime.getTime() + '-' + statObj.size;
        let lastModified = statObj.ctime.getTime();
        // 传给客户端
        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 && lastModified !== ifModifiedSince) {
            return false;
        }

        return true;
    }
    
    ...
}
复制代码

④ 是否压缩

返回压缩文件,优化访问速度

class Server {
    ...

     // 是否压缩
    gzip(req, res, statObj, p) {
        // 判断请求头是否设置了接收编码
        let encoding = req.headers['accept-encoding'];
        // 如果有则判断是否有gzip或者deflate
        if (encoding) {
            // gzip
            if (encoding.match(/\bgzip\b/)) {
                res.setHeader('Content-Encoding', 'gzip');
                return zlib.createGzip();
            }
            // deflate
            if (encoding.match(/\bdeflate\b/)) {
                res.setHeader('Content-Encoding', 'deflate');
                return zlib.createDeflate();
            }
            return false;
        }
        else {
            return false;
        }
    }
    
    ...
}

复制代码

⑤ 判断是否有范围请求

判断是否请求头

class Server {
    ...
    range(req, res, statObj, p) {
        let range = req.headers['range'];
        // 有范围请求时返回读流,断点续传
        if (range) {
            let [, start, end] = range.match(/bytes=(\d*)-(\d*)/);
            start = start ? Number(start) : 0;
            end = end ? Number(end) : statObj.size - 1;
            res.statusCode = 206;
            res.setHeader('Content-Range', `bytes ${start}-${end}/${statObj.size - 1}`);
            fs.createReadStream(p, {start, end}).pipe(res);
        }
        else {
            return false;
        }
    }
    ...
    
}
复制代码

⑥ 发送文件

发送文件方法,即我们在 handleRequest时如果判断走到认为读取的是一个文件,则发送这个文件展示给用户

class Server {
    ...
     sendFile(req, res, statObj, p) {
        if (this.cache(req, res, statObj, p)) {
            res.statusCode = 304;
            return res.end();
        }
        // 是范围请求就忽略
        if (this.range(req, res, statObj, p)) return;
        // 设置文件类型头,如果不设置,我们访问一个html文件可能会导致下载
        res.setHeader('Content-Type', mime.getType(p) + ';charset=utf8');
        // 如果是需要压缩则定义gzip转化流,讲文件压缩后输出
        let transform = this.gzip(req, res, statObj, p);
        if (transform) {
            return fs.createReadStream(p).pipe(transform).pipe(res);
        }
        // 如果不是不需要压缩则直接返回文件
        fs.createReadStream(p).pipe(res);
    }
    ...
    
}
复制代码

⑦ 处理报错

在handleRequest方法中的处理错误方法,

class Server {
    ...
   sendError(req, res){
    // 返回的状态码设置为404
        res.statusCode = 404;
        // 页面返回文字
        res.end(`404 Not Found`);
        this.start();
    }
    ...
    
}
复制代码

⑧ 启动方法

原生http模块的创建服务器方法,创建成功后再cmd界面输出,告知主机和端口

class Server {
    ...
   start() {
        let server = http.createServer(this.handleRequest.bind(this));
        server.listen(this.config.port, this.config.host, ()=> {
            console.log(`server start http://${this.config.host}:${chalk.green(this.config.port)}`);
        });
    }
    ...
    
}
复制代码

至此,我们的核心代码已经写完了,简易处理了服务器端需要处理的一些状况,有兴趣的同学可以补充和完善

三 bin/www.js 执行脚本

我们在命令行中输入的指令,调器执行脚本,并开启服务器
注意在www.js开头一定要写 #! /usr/bin/env node 告知操作系统node环境执行,以下为www.js的内容

#! /usr/bin/env node
let Server = require('../src/index.js'); // 导入Server
let commander = require('commander'); // 导入命令行模块
let {version} = require('../package.json'); // 读取package.json的版本

// 配置命令行
commander
.option('-p,--port <n>', 'config port') // 配置端口
.option('-o,--host [value]', 'config hostname') // 配置主机名
.option('-d,--dir [value]', 'config directory') // 配置访问目录
.version(version, '-v,--version').parse(process.argv); // 展示版本

let server = new Server(commander);
server.start(); // 启动

let config =require('../src/config');

commander = {...config, ...commander}

let os = require('os');
// 执行模块
let {exec} = require('child_process')

// 判断操作系统平台,win32是windows,执行访问程序,会自动弹出默认浏览器喔
if (os.platform() === 'win32') {
    exec(`start http://${commander.host}:${commander.port}`);
}
else {
    exec(`open http://${commander.host}:${commander.port}`);
}
复制代码

再看一下我们在package.json中的配置

"bin": {
    "zyx-http-server": "bin/www.js"
  },
复制代码

即我们的启动命令是 zyx-http-server,也可以根据自己的配置,补充其他命令,如 zyx-http-server -d public,则读取public作为静态资源根目录

npm link

处理npm install 我们包中的依赖(ejs, chalk, debug等)之外还需要执行
npm link:将一个任意位置的npm包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该npm包

四 运行

在文件夹启动命令行工具 执行zyx-http-server -d public,没有什么问题的话,我们会弹出

浏览器并访问public目录
点击a文件夹

打开文件

源文件:

至此,我们实现了传说中的http-server静态服务器,由于我叫zyx啦,所以取名叫zyx-http-server

五 发布到npm官网

没有注册的同学看到这一步的话请先去npm官网注册一个属于自己的账号,然后我们才能发布到自己包。
进行之前有这么几点需要注意

  • 切换源到npm节点,如果平时使用cnpm或者其他节点的同学,请在命令行输入nrm use npm切换
  • 在npm的注册邮箱一定要验证才可以,官网会发一份验证邮件给你,点击进行验证;我遇到了一种情况是验证过了,但是没生效,这时候你去官网再改一次邮箱试试
  • 要发的包的命名,是package.json中的name配置项,一开始没有配置的,可以去写一个自己的包名,可以通过访问 www.npmjs.com/package/ + 你的包名,看看在npm有没有被占用,被占用的话就换一个哦,一般被占用的话,你也无法提交

npm login

需要在命令行执行 npm login登录npm,如果你一开始没有切换到npm官网节点,cnpm用npm账号也是可以登录的,所以请提前先切换到npm

注意密码输入的时候是看不见的,我一开始也不知道,实际是输入对的 _ _(:з」∠)__,邮箱必须是你的认证邮箱

npm publish

登录成功后,就可以执行
npm publish指令,发布成功有如下提示

这时候就可以去官网看一下你的包是不是成功了。
更新代码的流程和发布是一样的,但是你要更新package.json中的version号。 这是我的包的地址,大家有兴趣可以看看 zyx-http-server

使用自己的包

依然是使用 npm i zyx-http-server -g 全局安装或局部安装这个包,我们试一下:

可以启动

中文文件夹bug已修复

在handleRequest方法中对pathname进行转码处理


希望我的文章可以帮到你~

关注下面的标签,发现更多相似文章
评论

查看更多 >