nodejs篇-手写koa中间件

码农天地 - 2020-11-12 22:12:57

---

koa-statickoa-static可以处理静态资源，参数是静态资源文件夹路径，官方的实现包含了更多的参数配，具体可以查看 koajs/static

实现分析：

获取请求url路径，查找静态文件夹下的路径是否能匹配如果是路径是文件夹，查找文件夹下index.html文件设置响应头文件类型（mime）gzip压缩，设置压缩类型并返回可读流出错或文件不存在next继续下一个中间件

const fs = require("fs")
const path = require("path")
const mime = require("mime")
const zlib = require("zlib")

function static(dir) {
  return async (ctx, next) => {
    try {
      let reqUrl = ctx.path
      let abspath = path.join(dir, reqUrl)
      let statObj = fs.statSync(abspath)
      // 如果是文件夹，拼接上index.html
      if (statObj.isDirectory()) {
        abspath = path.join(abspath, "index.html")
      }
      // 判断路径是否准确
      fs.accessSync(abspath);
      // 设置文件类型
      ctx.set("Content-Type", mime.getType(abspath) + ";charset=utf8")
      // 客户端允许的编码格式，判断是否需要gzip压缩
      const encoding = ctx.get("accept-encoding")
      if (/\bgzip\b/.test(encoding)) {
        ctx.set("Content-Encoding", "gzip")
        ctx.body = fs.createReadStream(abspath).pipe(zlib.createGzip())
      } else if (/\bdeflate\b/.test(encoding)) {
        ctx.set("Content-Encoding", "bdeflate")
        ctx.body = fs.createReadStream(abspath).pipe(zlib.createDeflate())
      } else {
        ctx.body = fs.createReadStream(abspath)
      }
    } catch (error) {
      await next()
    }
  }
}

module.exports = static

koa-bodyparser

koa-bodyparser可以处理POST请求的数据，将form-data数据解析到ctx.request.body，官方地址：koa-bodyparser

实现分析：

读取请求数据设置响应头类型application/json判断客户端请求头content-type类型解析数据并绑定到ctx.request.body

function bodyParser() {
  return async (ctx, next) => {
    await new Promise((resolve, reject) => {
      let data = []
      ctx.req.on("data", (chunk) => {
        data.push(chunk)
      })
      ctx.req.on("end", () => {
        let ct = ctx.get("content-type")
        let body = {}
        ctx.set("Content-Type", "application/json")
        if (ct === "application/x-www-form-urlencoded") {
          body = require("querystring").parse(Buffer.concat(data).toString())
        }
        if (ct === "application/json") {
          body = JSON.parse(Buffer.concat(data).toString())
        }
        ctx.request.body = body
        resolve()
      })
      ctx.req.on("error", (error) => {
        reject(error)
      })
    })
    await next()
  }
}

module.exports = bodyParser

koa-router

koa-router可以让koa像express一样控制路由，源码koa-router实现比较复杂，这里实现一个简单版本。

实现分析：

先将请求保存到数组middlewares中routes返回中间件函数，获取ctx和next从数组middlewares过滤出路径/方法相同的数据中间件处理，传入ctx和封装后的next，处理结束才调用真正的next方法

class Router {
  constructor() {
    // 保存中间件方法的数组
    this.middlewares = []
  }
  get(path, handler) {
    // get、post、delete、put这些方法都要处理，这里只实现get
    this.middlewares.push({ path, handler })
  }
  compose(routes, ctx,next) {
    // 派发每一个存储的中间件方法
    const dispatch = (index) => {
      // 处理完成才执行上下文的next
      if (routes.length === index) return next();
      // 将中间件的next包装成下个执行的dispath，防止多次执行上下文的next方法
      routes[index].handler(ctx, () => dispatch(++index))
    }
    dispatch(0)
  }
  routes() {
    return async (ctx, next) => {
      // 过滤出相同的存储对象
      let routes = this.middlewares.filter((item) => item.path === ctx.url)
      this.compose(routes, ctx,next)
    }
  }
}

module.exports = Router;

koa-better-body

koa里面处理文件上传使用的是koa-better-body，这里需要保证表单中带有multipart/form-data：

<form action="/submiturl" method="POST" enctype="multipart/form-data">

下面是通过表单enctype为multipart/form-data提交后台拿到的数据：

------WebKitFormBoundaryfCunWPksjjur83I5
Content-Disposition: form-data; name="username"

chenwl
------WebKitFormBoundaryfCunWPksjjur83I5
Content-Disposition: form-data; name="password"

1234567
------WebKitFormBoundaryfCunWPksjjur83I5
Content-Disposition: form-data; name="avatar"; filename="test.txt"
Content-Type: text/plain

这里是文件内容
------WebKitFormBoundaryfCunWPksjjur83I5--

实现分析：

获取请求信息，请求头需要有multipart/form-data切割请求信息，提取有用的信息包含filename的为文件，写入到对应路径提取其它信息保存到ctx.request.fields

const fs = require("fs");
const path = require("path");

Buffer.prototype.split = function(sep){
    let arr = [];
    let offset = 0;
    let len = Buffer.from(sep).length;
    let current = this.indexOf(sep,offset);
    while (current !== -1) {
        let data=this.slice(offset,current)
        arr.push(data);
        offset = current+len;
        current = this.indexOf(sep, offset)
    }
    arr.push(this.slice(offset));
    return arr;
}

module.exports = function ({ uploadDir }) {
  return async (ctx, next) => {
    // 结果放到 req.request.fields
    await new Promise((resolve, reject) => {
      let data = []
      ctx.req.on("data", (chunk) => {
        data.push(chunk)
      })
      ctx.req.on("end", () => {
        // multipart/form-data; boundary=----WebKitFormBoundaryvFyQ9QW1McYTqHkp
        const contentType = ctx.get("content-type")
        if (contentType.includes("multipart/form-data")) {
          const boundary = "--"+contentType.split("=")[1];
          const r = Buffer.concat(data);
          const arr = r.split(boundary).slice(1,-1);
          const fields = {};
          arr.forEach(line=>{
              let [head,body] = line.split("\r\n\r\n");
              body = body.slice(0,-2); // 取出有效的内容
              head = head.toString();  
              if(head.includes("filename")){
                // 处理文件 
                // 请求头长度  = 总共的内容长度 - 头部长度 - 4个换行符长度 
                const filecontent = line.slice(head.length+4,-2);
                const filenanme = head.match(/filename="(.*?)"/)[1] || uid();
                const uploadPath = path.join(uploadDir, filenanme)
                fs.writeFileSync(uploadPath, filecontent)
              }else{
                fields[head.match(/name="(.*?)"/)[1]] = body.toString();
              }
          })
          ctx.request.fields = fields
        }

        resolve()
      })
      ctx.req.on("error", (error) => {
        reject(error)
      })
    })
    await next()
  }
}

function uid(){
    return Math.random().toString(32).slice(2);
}

Tags 标签