简介

Connect](https://github.com/senchalabs/connect) 是一个可扩展(中间件作为插件)的 Http 服务器框架，Connect 刚出道之时自带了许多中间件，为保证其框架的轻量级以及扩展性，最终还是将这些中间件的实现抛给了社区。可能在搜索 Connect 的相关项目时，你会发现 connect().use(connect.bodyParser())这些的写法，这对于现在的 Connect (最新版本3.6.0) 是不支持的，而只能通过 npm 下载第三方的模块 (如 body-parser) 替代原先的中间价。

基本使用

  1. const connect = require('connect');
  2. var createError = require('http-errors');
  3. var http = require('http');
  5. var app = connect()
  7. app.use('/', function(req, res, next) {
  8.   res.writeHead(200,'OK',{
  9.     //'content-type': 'text/plain' //纯文本
  10.     'content-type': 'text/html;charset=utf-8'
  11.   })
  12.   res.write('<h1>你好，欢迎学习connect</h1>')
  13.   res.end()
  14. })
  16. // catch 404 and forward to error handler
  17. app.use(function(req, res, next) {
  18.   next(createError(404));
  19. });
  21. // error handler
  22. app.use(function(err, req, res, next) {
  23.   res.statusCode = 404;
  24.   res.end('Not Found');
  25. });
  27. // 两种方式监听指定端口
  28. app.listen(3000) // 这种方式在connect里面调用了http.createServer方法
  30. // http.createServer(app).listen(3000);

源码分析

这篇文章是基于"version": "3.6.6"这个版本来对源码进行分析的，这个版本所有的代码都在index.js文件中。下面我们来看一下connect是怎么工作的。

首先我们看一下这个文件的模块出口，可以看到导出了一个createServer函数，这个函数最终返回的是app，app本身是一个函数，在下面一段代码中我们可以的看到它是作为了request事件的处理函数。同时它既继承了proto、EventEmitter属性和方法，也有自己的route、stack属性。

  1. // 模块出口
  2. module.exports = createServer;
  4. // 判断当前环境，初始化proto 对象
  5. var env = process.env.NODE_ENV || 'development';
  6. var proto = {};
  8. function createServer() {
  9.   // app 函数对象，可以添加属性和方法
  10.   function app(req, res, next){ 
  11.     app.handle(req, res, next); 
  12.   }
  13.   // merge： 相当于Object.assign
  14.   merge(app, proto);  // 继承proto的属性和方法
  15.   merge(app, EventEmitter.prototype); // 继承EventEmitter（事件派发器）属性和方法
  16.   app.route = '/';
  17.   app.stack = []; // 存放中间件的数组,中间件会被格式化成形为{route: route , handle : fn}的匿名对象存放
  18.   return app;
  19. }
  21. // 监听指定端口号
  22. proto.listen = function listen() {
  23.   var server = http.createServer(this); // this ——> app函数对象,作为request事件的处理函数
  24.   return server.listen.apply(server, arguments); // 从 arguments 拿到端口号
  25. };

connect框架的核心是use、handle、call三个方法，我们来分析一下这三个方法分别有什么作用。

use方法：添加中间件

  1. // 添加中间件
  2. proto.use = function use(route, fn) {
  3.   var handle = fn;
  4.   var path = route;
  6.   // 如果参数只有一个，那么path默认是 '/', 传入的参数作为处理函数
  7.   if (typeof route !== 'string') {
  8.     handle = route;
  9.     path = '/';
  10.   }
  12.   // 如果fn为一个app的实例，则将其自身handle方法的包裹给fn
  13.   if (typeof handle.handle === 'function') {
  14.     var server = handle;
  15.     server.route = path;
  16.     handle = function (req, res, next) {
  17.       server.handle(req, res, next);
  18.     };
  19.   }
  21.   // 如果fn为一个http.Server实例，则fn为其request事件的第一个监听器
  22.   if (handle instanceof http.Server) {
  23.     handle = handle.listeners('request')[0];
  24.   }
  26.   // 如果route参数的以 '/' 结尾，则删除 '/'
  27.   if (path[path.length - 1] === '/') {
  28.     path = path.slice(0, -1);
  29.   }
  31.   // 把中间件添加到stack数组中
  32.   debug('use %s %s', path || '/', handle.name || 'anonymous');
  33.   this.stack.push({ route: path, handle: handle });
  35.   // 返回自身，以便继续链式调用
  36.   return this;
  37. };

handle方法：根据当前路径找到stack中所有与之相匹配的中间件，通过call方法调用中间件处理函数

  1. proto.handle = function handle(req, res, out) {
  2.   var index = 0;
  3.   var protohost = getProtohost(req.url) || '';
  4.   var removed = '';
  5.   var slashAdded = false;
  6.   var stack = this.stack;
  8.   // final function handler
  9.   var done = out || finalhandler(req, res, {
  10.     env: env,
  11.     onerror: logerror
  12.   });
  14.   // store the original URL
  15.   req.originalUrl = req.originalUrl || req.url;
  17.   // 调用next方法传递的err信息，可以在下一个中间件处理函数的err参数中获取到
  18.   function next(err) {
  19.     if (slashAdded) {
  20.       req.url = req.url.substr(1);
  21.       slashAdded = false;
  22.     }
  24.     if (removed.length !== 0) {
  25.       req.url = protohost + removed + req.url.substr(protohost.length);
  26.       removed = '';
  27.     }
  29.     // 取出第一个中间件，index+1，再次调用取出第二个中间件....
  30.     var layer = stack[index++];
  32.     // all done
  33.     if (!layer) {
  34.       defer(done, err);
  35.       return;
  36.     }
  38.     // route data
  39.     var path = parseUrl(req).pathname || '/';
  40.     var route = layer.route;
  42.     // skip this layer if the route doesn't match
  43.     if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
  44.       return next(err);
  45.     }
  47.     // skip if route match does not border "/", ".", or end
  48.     var c = path.length > route.length && path[route.length];
  49.     if (c && c !== '/' && c !== '.') {
  50.       return next(err);
  51.     }
  53.     // trim off the part of the url that matches the route
  54.     if (route.length !== 0 && route !== '/') {
  55.       removed = route;
  56.       req.url = protohost + req.url.substr(protohost.length + removed.length);
  58.       // ensure leading slash
  59.       if (!protohost && req.url[0] !== '/') {
  60.         req.url = '/' + req.url;
  61.         slashAdded = true;
  62.       }
  63.     }
  65.     // 执行handler中匹配到的中间件
  66.     call(layer.handle, route, err, req, res, next);
  67.   }
  69.   next();
  70. };

call方法:：执行handler中匹配到的中间件

  1. function call(handle, route, err, req, res, next) {
  2.   // handle函数的参数个数(3个参数为一般中间件，4个参数为错误处理中间件)
  3.   // next参数接收的是上面定义的next函数，然后传入到中间件的handle函数中，handle函数同样通过next参数接              收，所以在中间件中调用next后会继续执行下一个中间件
  4.   var arity = handle.length;
  5.   var error = err;
  6.   var hasError = Boolean(err);
  8.   debug('%s %s : %s', handle.name || '<anonymous>', route, req.originalUrl);
  10.   try {
  11.     if (hasError && arity === 4) {
  12.       // 执行错误处理中间件
  13.       handle(err, req, res, next);
  14.       return;
  15.     } else if (!hasError && arity < 4) {
  16.       // 执行一般中间件
  17.       handle(req, res, next);
  18.       return;
  19.     }
  20.   } catch (e) {
  21.     // replace the error
  22.     error = e;
  23.   }
  25.   // continue
  26.   next(error);
  27. }

connect运行过程

通过下面的这张图，总结一下connect工作流程，app.use方法负责把中间件添加到stack数组中，中间件会被格式化成形为{route: route , handle : fn}的匿名对象存放 ；app.handle方法根据当前路径找到stack中所有与之相匹配的中间件，并通过call方法调用中间件处理函数 ；app.call方法根据handle函数的参数个数(3个参数为一般中间件，4个参数为错误处理中间件) 来执行中间件，并把接收的next函数传给中间件。

Connect 实践与源码分析 - 图1

完整源码

  1. 'use strict';
  3. // 引入依赖
  4. var debug = require('debug')('connect:dispatcher');
  5. var EventEmitter = require('events').EventEmitter;
  6. var finalhandler = require('finalhandler');
  7. var http = require('http');
  8. var merge = require('utils-merge');
  9. var parseUrl = require('parseurl');
  12. // 模块出口
  13. module.exports = createServer;
  16. // 判断当前环境，初始化proto 对象
  17. var env = process.env.NODE_ENV || 'development';
  18. var proto = {};
  21. var defer = typeof setImmediate === 'function'
  22.   ? setImmediate
  23.   : function(fn){ process.nextTick(fn.bind.apply(fn, arguments)) }
  26. function createServer() {
  27.   // app 函数对象，可以添加属性和方法
  28.   function app(req, res, next){ 
  29.     app.handle(req, res, next); 
  30.   }
  31.   // 相当于Object.assign
  32.   merge(app, proto); // 继承proto的属性和方法
  33.   merge(app, EventEmitter.prototype); // 继承EventEmitter（事件派发器）属性和方法
  34.   app.route = '/';
  35.   app.stack = []; // 存放中间件的数组,中间件会被格式化成形为{route: route , handle : fn}的匿名对象存放
  36.   return app;
  37. }
  39. // 监听指定端口号
  40. proto.listen = function listen() {
  41.   var server = http.createServer(this); // this ——> app函数对象,作为request事件的处理函数
  42.   return server.listen.apply(server, arguments); // 从 arguments 拿到端口号
  43. };
  45. // 添加中间件
  46. proto.use = function use(route, fn) {
  47.   var handle = fn;
  48.   var path = route;
  50.   // 如果参数只有一个，那么path默认是 '/', 传入的参数作为处理函数
  51.   if (typeof route !== 'string') {
  52.     handle = route;
  53.     path = '/';
  54.   }
  56.   // 如果fn为一个app的实例，则将其自身handle方法给fn
  57.   if (typeof handle.handle === 'function') {
  58.     var server = handle;
  59.     server.route = path;
  60.     handle = function (req, res, next) {
  61.       server.handle(req, res, next);
  62.     };
  63.   }
  65.   // 如果fn为一个http.Server实例，则fn为其request事件的第一个监听器
  66.   if (handle instanceof http.Server) {
  67.     handle = handle.listeners('request')[0];
  68.   }
  70.   // 如果route参数的以 '/' 结尾，则删除 '/'
  71.   if (path[path.length - 1] === '/') {
  72.     path = path.slice(0, -1);
  73.   }
  75.   // 把中间件添加到stack数组中
  76.   debug('use %s %s', path || '/', handle.name || 'anonymous');
  77.   this.stack.push({ route: path, handle: handle });
  79.   // 返回自身，以便继续链式调用
  80.   return this;
  81. };
  83. // 这个函数作用是根据当前路径找到stack中所有与之相匹配的中间件，并通过call方法调用中间件处理函数
  84. proto.handle = function handle(req, res, out) {
  85.   var index = 0;
  86.   var protohost = getProtohost(req.url) || '';
  87.   var removed = '';
  88.   var slashAdded = false;
  89.   var stack = this.stack;
  91.   // final function handler
  92.   var done = out || finalhandler(req, res, {
  93.     env: env,
  94.     onerror: logerror
  95.   });
  97.   // store the original URL
  98.   req.originalUrl = req.originalUrl || req.url;
  100.   function next(err) {
  101.     if (slashAdded) {
  102.       req.url = req.url.substr(1);
  103.       slashAdded = false;
  104.     }
  106.     if (removed.length !== 0) {
  107.       req.url = protohost + removed + req.url.substr(protohost.length);
  108.       removed = '';
  109.     }
  111.     // next callback
  112.     var layer = stack[index++];
  114.     // all done
  115.     if (!layer) {
  116.       defer(done, err);
  117.       return;
  118.     }
  120.     // route data
  121.     var path = parseUrl(req).pathname || '/';
  122.     var route = layer.route;
  124.     // skip this layer if the route doesn't match
  125.     if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
  126.       return next(err);
  127.     }
  129.     // skip if route match does not border "/", ".", or end
  130.     var c = path.length > route.length && path[route.length];
  131.     if (c && c !== '/' && c !== '.') {
  132.       return next(err);
  133.     }
  135.     // trim off the part of the url that matches the route
  136.     if (route.length !== 0 && route !== '/') {
  137.       removed = route;
  138.       req.url = protohost + req.url.substr(protohost.length + removed.length);
  140.       // ensure leading slash
  141.       if (!protohost && req.url[0] !== '/') {
  142.         req.url = '/' + req.url;
  143.         slashAdded = true;
  144.       }
  145.     }
  147.     // 通过call方法调用中间件的handle函数处理对应的路由
  148.     call(layer.handle, route, err, req, res, next);
  149.   }
  151.   next();
  152. };
  154. function call(handle, route, err, req, res, next) {
  155.   // handle函数的参数个数(3个参数为一般中间件，4个参数为错误处理中间件)
  156.   // next参数接收的是上面定义的next函数，然后传入到中间件的handle函数中，handle函数同样通过next参数接收，所以在中间件中调用next后会继续执行下一个中间件
  157.   var arity = handle.length;
  158.   var error = err;
  159.   var hasError = Boolean(err);
  161.   debug('%s %s : %s', handle.name || '<anonymous>', route, req.originalUrl);
  163.   try {
  164.     if (hasError && arity === 4) {
  165.       // 执行错误处理中间件
  166.       handle(err, req, res, next);
  167.       return;
  168.     } else if (!hasError && arity < 4) {
  169.       // 执行一般中间件
  170.       handle(req, res, next);
  171.       return;
  172.     }
  173.   } catch (e) {
  174.     // replace the error
  175.     error = e;
  176.   }
  178.   // continue
  179.   next(error);
  180. }
  182. function logerror(err) {
  183.   if (env !== 'test') console.error(err.stack || err.toString());
  184. }
  186. function getProtohost(url) {
  187.   if (url.length === 0 || url[0] === '/') {
  188.     return undefined;
  189.   }
  191.   var searchIndex = url.indexOf('?');
  192.   var pathLength = searchIndex !== -1 ? searchIndex : url.length;
  193.   var fqdnIndex = url.substr(0, pathLength).indexOf('://');
  195.   return fqdnIndex !== -1 ? url.substr(0, url.indexOf('/', 3 + fqdnIndex)) : undefined;
  196. }