Node.js之connect中间件的源码解析

对于connect中间件进行源码解析，源码地址，总共不超过300行。

connect中间件

　　connect是一个基于HTTP服务器的工具集，它提供了一种新的组织代码的方式来与请求和响应对象进行交互，称为中间件（书上原话）。通俗的来说，http创建服务器接收请求时，所有的响应都要写在一个回调函数里面，对于不同的请求路径，所返回的响应信息都是通过if和else来区分，所有的逻辑都是在一个函数中，当逻辑复杂起来会有各种回调，极容易出现问题，故有了让问题简单起来的connect中间件的产生，connect把所有的请求信息都拆分开，形成多个中间件，http请求就相当于是水流一样流过中间件，当路径相同时，就会响应该请求，否则就继续往下流，直到结束。中间件就是函数组成的。
　　下面代码就是原生的Node.js写的响应请求，这是比较简单的，但是当服务器要处理无数个请求时，这样写会很容易出错。

    var http=require('http');
    var server=http.createServer(function (req,res) {
          if('/'==req.url){
              res.writeHead(200,{'Content-Type':'text/html'});
              res.write('...');
              res.end();
          }else if('/url'==req.url&&req.method=='POST'){
              var reqBody='';
              req.on('data',function (data) {
              reqBody += data;
          });
          req.on('end',function () {//用于数据接收完成后再获取
              res.writeHead(200,{'Content-Type':'text/html'});
              res.write('...');
              res.end();
          })
          }else{
              res.writeHead(404);
              res.write('Not Found');
              res.end();
          }
      }).listen(3000,function () {
          console.log('server is listening 3000');
      });

　　下面代码是使用connect中间件写的http响应请求的代码，用app.use将代码拆分成更小的单元，具有更强的表达能力了。

    var connect=require('connect');
    var app=connect();
    app.use(function(req,res,next){
        if('/'==req.url){
            res.writeHead(200,{'Content-Type':'text/html'});
            res.write('...');
            res.end();
        }else{
            next();
        }
    });
    app.use(function(req,res,next){
        if('/'==req.url){if('/url'==req.url&&req.method=='POST')
            res.writeHead(200,{'Content-Type':'text/html'});
            res.write('...');
            res.end();
        }else{
            next();
        }
    });
    app.use(function(req,res,next){
        res.writeHead(404);
        res.write('Not Found');
        res.end();
    });
    app.listen(3000);

connect中间件源码解析

createServer函数

　　中间件其实就是函数，中间件有点类似JavaScript事件循环的一个概念，将所有的中间件函数都存在一个栈中，请求到达时然后按顺序调用。
　　先看一下开头部分已引入的模块，debug模块是用来开发调试的，EventEmitter是事件模块，finalhandler模块是让函数作为最后一个响应request，http模块是控制客户端请求与服务端响应的模块，merge是将属性从源对象合并到目标对象，parseUrl是解析给定请求对象的URL（查看req.url属性）并返回结果。

    var debug = require('debug')('connect:dispatcher');
    var EventEmitter = require('events').EventEmitter;
    var finalhandler = require('finalhandler');
    var http = require('http');
    var merge = require('utils-merge');
    var parseUrl = require('parseurl');

　　由module.exports = createServer可以看出connect模块的出口是createServer，那前面代码中var app=connect()就可以看成var app=createServer()，那createServer函数到底是怎么定义的：

    var env = process.env.NODE_ENV || 'development';
    var proto = {};

    /* istanbul ignore next */
    var defer = typeof setImmediate === 'function'? setImmediate:function(fn){ process.nextTick(fn.bind.apply(fn, arguments)) }

    function createServer() {
      function app(req, res, next){ app.handle(req, res, next); }
      merge(app, proto);
      merge(app, EventEmitter.prototype);
      app.route = '/';
      app.stack = [];
      return app;
    }

　　这里首先定义了env确定代码是在什么环境下运行，若没有定义则为开发环境，proto是一个空对象，defer定义了setImmediate函数，相当于一个插队的函数。后面就是createServer函数的定义了，它返回的是一个app，而app是定义的一个函数，参数为req，res，next三个参数，并且app函数中调用的是app.handle(req,res,next)，可是app没有handle方法，代码往下走发现app合并了proto和EventEmitter.prototype的属性和方法，app的handle方法是来自proto对象的。app创建了两个属性app.route以及app.stack，app.route是一个路径地址，app.stack是一个存放中间件函数的堆栈。

connect中间件的方法有：app.use、app.handle、app.listen，是合并了proto对象得来的方法。

app.use

　　在上面的代码中，app.use()是用来添加中间件的，而这个方法是来自于proto.use()方法。

proto.use(route,fn)

　　route是请求的路径，可以写也可以不写，如果route不是string，则默认第一个参数是fn，路径默认为‘/’；

　　fn是中间件函数，可以是传入3个或者4个参数，fn(req,res,next)或fn(err,req,res,next)，fn(req,res,next)是正常处理函数，fn(err,req,res,next)是异常处理函数。

next()

　　next函数用来做流控制，即用来触发下一个中间件的回调函数，调用next()后，程序会继续从app.stack堆栈中调用下一个中间件的回调函数，一直匹配合适的路由，若如果没有调用next()，则会在该中间件回调函数处理完之后停止。所以响应内容和next()都是在if和else中，否则当服务器已经响应请求之后还在调用next()，之后的中间件还会继续匹配路由，匹配到的路由的响应信息会被忽略。

  function next(err) {
     …
  }

　　从上面代码知道，next()接收一个参数err，当err不为空时，err会被传递到next(err)中，进入异常处理函数，如果err为空，则会进入正常处理请求的函数。当所有的中间件函数都被调用之后仍旧没有匹配到路由，则会出现错误，如果next的err参数非空，则会给页面返回500错误，表示server出现了内部错误；如果err为空，则返回404错误，即访问的资源不存在。

proto.use()源码

　　use()是用来添加中间件的，添加的方法是this.stack.push({ route: path, handle: handle })，传递了一个对象，对象包含两个属性route和handle，它们的值是path和handle，从下面proto.use的源码可以看出，新定义handle变量就是use要添加的中间件，path是请求的路径，handle和path是要存储到app.stack中的。如果path不是string，则默认第一个参数是中间件fn，路径默认为‘/’。代码分了几种情况讨论fn的情况，当fn=connect()时，即fn也为一个中间件时，那么堆栈中存储的handle为这个子中间件的fn.handle()方法，。当fn是http.Server类的实例时，那么request事件的第一个监听器为新的handle的值。

    proto.use = function use(route, fn) {
        var handle = fn;
        var path = route;
    
        // default route to '/'
        if (typeof route !== 'string') {
            handle = route;
            path = '/';
        }
    
        // wrap sub-apps
        if (typeof handle.handle === 'function') {
            var server = handle;
            server.route = path;
            handle = function (req, res, next) {
                server.handle(req, res, next);
            };
        }
    
        // wrap vanilla http.Servers
        if (handle instanceof http.Server) {
            handle = handle.listeners('request')[0];
        }
    
        // strip trailing slash
        if (path[path.length - 1] === '/') {
            path = path.slice(0, -1);
        }
    
        // add the middleware
        debug('use %s %s', path || '/', handle.name || 'anonymous');
        this.stack.push({ route: path, handle: handle });
    
        return this;
    };

call函数

　　前面说app函数中调用了handle方法，handle是proto对象的一个方法，并合并到了app上。由于proto.handle方法中有用到call函数，这里就先介绍call函数

    function call(handle, route, err, req, res, next) {
        var arity = handle.length;
        var error = err;
        var hasError = Boolean(err);
    
        debug('%s %s : %s', handle.name || '<anonymous>', route, req.originalUrl);
    
        try {
            if (hasError && arity === 4) {
                // error-handling middleware
                handle(err, req, res, next);
                return;
            } else if (!hasError && arity < 4) {
                // request-handling middleware
                handle(req, res, next);
                return;
            }
        } catch (e) {
            // replace the error
            error = e;
        }
    
        // continue
        next(error);
    }

　　不需要了解每一句代码的意思，只要懂这个函数的作用就可以了，当发生错误且传递了4个参数时就会调用handle(err,req, res, next)这个函数，当没有发生错误且传递的参数小于4个时就会调用handle(req, res, next)，这里的handle函数是传进来的一个函数。

app.handle

　　app.handle方法来自于proto.handle。proto.handle方法最主要的作用就是定义了next函数，是用来解决http请求的，layer=stack[index++]表示layer保存了当前的请求路径和中间件函数，用来匹配http请求的route和中间件里layer.route属性的值是否匹配，如果不匹配则会返回next(err)重新调用next函数，此时layer的值是下一个中间件的相关信息，这样就会一直循环下去，直到堆栈已经没有值或者route的值匹配成功为止。如果匹配成功，则会调用call(layer.handle, route, err, req, res, next)，这个layer.handle就是中间件函数，call的作用就是调用layer.handle(err,req, res, next)或layer.handle(req, res, next)。

　　下面代码是proto.handle的代码，主要就是获取请求的url并和存储的layer.route进行比较，这里就不说了，可以仔细看一下代码。

    proto.handle = function handle(req, res, out) {
        var index = 0;
        var protohost = getProtohost(req.url) || '';
        var removed = '';
        var slashAdded = false;
        var stack = this.stack;
    
        // final function handler
        var done = out || finalhandler(req, res, {
                env: env,
                onerror: logerror
            });
    
        // store the original URL
        req.originalUrl = req.originalUrl || req.url;
    
        function next(err) {
            if (slashAdded) {
                req.url = req.url.substr(1);
                slashAdded = false;
            }
    
            if (removed.length !== 0) {
                req.url = protohost + removed + req.url.substr(protohost.length);
                removed = '';
            }
    
            // next callback
            var layer = stack[index++];
    
            // all done
            if (!layer) {
                defer(done, err);
                return;
            }
    
            // route data
            var path = parseUrl(req).pathname || '/';
            var route = layer.route;
    
            // skip this layer if the route doesn't match
            if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
                return next(err);
            }
    
            // skip if route match does not border "/", ".", or end
            var c = path[route.length];
            if (c !== undefined && '/' !== c && '.' !== c) {
                return next(err);
            }
    
            // trim off the part of the url that matches the route
            if (route.length !== 0 && route !== '/') {
                removed = route;
                req.url = protohost + req.url.substr(protohost.length + removed.length);
    
                // ensure leading slash
                if (!protohost && req.url[0] !== '/') {
                    req.url = '/' + req.url;
                    slashAdded = true;
                }
            }
    
            // call the layer handle
            call(layer.handle, route, err, req, res, next);
        }
    
        next();
    };

app.listen

　　app.listen方法来自于proto.listen。proto.listen的代码特别简单，就是调用了http模块的createServer()和listen()方法，那么app.listen(3000)的作用就是创建了一个服务器并监听端口3000。

    proto.listen = function listen() {
      var server = http.createServer(this);
      return server.listen.apply(server, arguments);
    };

总结

　　1、从代码可以发现，所有的中间件函数传递的都是req与res，req与res分别是http服务器端的请求信息和响应信息，中间件只对req和res进行操作，故将请求信息比喻成水流流过这些中间件，遇到响应信息，这道水流就停止了，否则会一直流下去。
　　2、app=connect()相当于app=createServer()，返回的是一个函数，故app本身就是一个函数，可以app(req,res,next)，因为app的函数中调用了app.handle()函数。
　　3、app.handle(req,res,next)用来处理http的请求信息，一般不是自行调用，而是添加中间件时app.use调用其中的next函数。
　　4、app.use(route,fn)用来添加中间件，也可以是app.use(fn)，此时route默认为‘/’。
　　5、app.listen(port)就是创建服务器并监听端口，这一行代码是必须要调用的，当然也可以使用http自己创建服务器。