手把手帶你用 82 行代碼實現一個簡易版 Express 框架

作者：寫代碼的寶哥 2024-02-06 10:04:49

connect 的 repo 描述是：“Connect is a middleware layer for Node.js”，也就是一個 Node.js 的中間件層。中間件層是一個非常有用的機制，它類似一個插件系統，讓我們可以通過插拔的方式組合不同功能來處理請求。

本文將帶大家實現輕量級 web 框架 connect[1] 的主要功能，只要 82 行代碼就能搞定。

我并沒有標題黨，因為 Express 在 v3 版本之前就是基于 connect 進行封裝的，不過在 v4 版本就將 connect 依賴移除了[2]，代碼被搬到 Express 倉庫里，并做了一些細微調整。因此某種程度上，學習 connect 就是在學習 Express。

基本使用

先來看看 connect 的使用。

const connect = require('connect')

const app = connect()

// respond to all requests
app.use(function(req, res){
  res.end('Hello from Connect!\n')
})

// create node.js http server and listen on port
http.createServer(app).listen(3000)

跟 Express 一樣。

另外，app 上還提供了 .listen() 方法，用于替代 http.createServer(app).listen(3000) 的冗長寫法。

app.listen(3000) // 等價于 http.createServer(app).listen(3000)

再看看中間件的使用。

app.use(function middleware1(req, res, next) {
  // middleware 1
  next()
});
app.use(function middleware2(req, res, next) {
  // middleware 2
  next()
});

我們通過 app.use() 方法收集并使用中間件。

中間件就是一個函數，包含 3 個參數：req、res 還有 next()。在一個中間件內調用 next()，就進入到下一個中間件的執行。

同時，我們還可以為中間件指定路由，這樣中間件只在特定路徑下起作用。

app.use('/foo', function fooMiddleware(req, res, next) {
  // req.url starts with "/foo"
  next()
})
app.use('/bar', function barMiddleware(req, res, next) {
  // req.url starts with "/bar"
  next()
})

本質上，純中間件的寫法就是在設置根路由（'/'），所以會對所有請求有效。

app.use(function middleware1(req, res, next) {
  // middleware 1
  next()
})
// 等同于
app.use('/', function middleware1(req, res, next) {
  // middleware 1
  next()
})

不過還有一類特殊中間件——異常中間件，專門用于處理前面流程里的異常錯誤。

// regular middleware
app.use(function (req, res, next) {
  // i had an error
  next(new Error('boom!'));
});

// error middleware for errors that occurred in middleware
// declared before this
app.use(function onerror(err, req, res, next) {
  // an error occurred!
});

異常中間件必須是 4 個參數，第一個參數就是 error，對應前面流程中傳遞給 next() 的 Error 對象。

以上，我們就講完了 connect 庫的基本使用。接下來，就著手實現。

代碼實現

基于 connect v3.7.0 版本[3]。

剛學 Node.js 的時候，我們學到第一個例子，可能就是啟動一個會說“Hello World”的服務器了。

const http = require('node:http')

const hostname = '127.0.0.1'
const port = 3000

const server = http.createServer((req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end('Hello World\n')
})

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`)
})

回顧 connect 的使用。

const connect = require('connect')

const app = connect()

// respond to all requests
app.use(function(req, res){
  res.end('Hello from Connect!\n')
})

// create node.js http server and listen on port
app.listen(3000)

實現 app.listen()

我們已經知道 app.listen(3000) 內部實現就是 http.createServer(app).listen(3000)。

因此，我們先實現 .listen() 方法。

module.exports = function createApplication() {
  const app = {}

  app.listen = function listen(...args) {
    const server = require('node:http').createServer(/* ? */)
    return server.listen(...args);
  }

  return app
}

假設 app 是一個對象。不過，http.createServer(/* ? */) 中的 ? 內容該如何實現呢？

實現 app.use()

前一步，我們做了 app.use() 的調用。

// respond to all requests
app.use(function(req, res){
  res.end('Hello from Connect!\n')
})

所以，當服務啟動后，訪問 localhost:3000 時，應該返回 "Hello from Connect!" 的文本。

同時，app.use() 又支持重復調用。

// respond to all requests
app.use(function(req, res, next) {
  console.log('log req.url', req.url)
  next()
})

// respond to all requests
app.use(function(req, res) {
  res.end('Hello from Connect!\n')
})

那我們就考慮先用個數組，把通過 app.use() 調用傳入進來的回調函數存起來。

module.exports = function createApplication() {
  const app = {}
 app.stack = []
  
  app.use = function use(route, fn) {
   let path = route
   let handle = fn

        // default route to '/'
   if (typeof route !== 'string') {
      path = '/'
      handle = route
    }
    
    this.stack.push({ route: path, handle })
    return this
  }
  
  app.listen = function listen(...args) {
    const server = require('node:http').createServer(/* ? */)
    return server.listen(...args)
  }

  return app
}

我們把調用 app.use() 傳入的中間件都存到了 app.stack 里。

根據定義可知，http.createServer(/* ? */) 中的 ? 內容應該是一個函數。針對當前場景，它是用來處理 stack 中的這些中間件的。

實現 app.handle()

我們把這些邏輯寫在 app.handle() 內。

module.exports = function createApplication() {
  const app = {}
  app.stack = []

  // ...

  app.listen = function listen(...args) {
    const server = require('node:http').createServer(app.handle.bind(app))
    return server.listen(...args)
  }

  app.handle = function handle(res, res) {
    // TODO
  }

  return app
}

每當請求來臨，都由 app.handle 負責處理。

app.handle 的主要邏輯主要是處理 3 件事情。

獲取當前要處理的路由，沒有的話就交由最終處理函數 done
路由不匹配就跳過
路由匹配就執行當前中間件

app.handle = function handle(req, res) {
  let index = 0

  const done = function (err) { /* ... */ }

  function next(err) {
    // next callback
    const layer = app.stack[index++]

    // 1) all done
    if (!layer) {
      setImmdiate(done, err)
      return
    }

    // route data
    const path = require('node:url').parse(req.url).pathname
    const route = layer.route

    // 2) skip this layer if the route doesn't match
    if (!path.toLowerCase().startsWith(route.toLowerCase())) {
      return next(err)
    }

    // 3) call the layer handle
    const arity = handle.length
    const hasError = !!err
    let error = err

    try {
      if (hasError && arity === 4) {
        // error-handling middleware
        layer.handle(err, req, res, next)
        return
      } else if (!hasError && arity < 4) {
        // request-handling middleware
        layer.handle(req, res, next)
        return
      }
    } catch (e) {
      error = e
    }

    next(error)
  }

  next()
}

以上的關鍵處理就封裝在 next() 函數中。而 next() 函數就是傳遞給 connect 中間件的 next 參數。

這樣，每次請求進來，我們都會從 app.stack 的第一個中間件（stack[0]）開始處理，就實現了以 next 參數為連接橋梁的中間件機制。

值得注意的是調用當前中間件的邏輯，當我們調用 layer.handle(err, req, res, next)/layer.handle(req, res, next) 時，處理流程會流入中間件內部，當內部調用 next() 函數后，控制權會重新回到 app.handle，繼續處理隊列中的下一個中間件。

當請求最終沒有任何中間件可以處理時，就會流入到 done，這是最終處理器。處理器內部，會根據是否存在錯誤，分別返回 404 或 5xx 響應。

const done = function (err) {
  if (err) {
    res.statusCode = err.status ?? err.statusCode ?? 500
    res.statusMessage = require('node:http').STATUS_CODES[404]
  } else {
    res.statusCode = 404
    res.statusMessage = `Cannot ${req.method} ${require('node:url').parse(req.url).pathname}`
  }
  res.end(`${res.statusCode} ${res.statusMessage}`)
}

至此，我們基本寫完了所有的邏輯。

當然，有一個地方，可以做一個小小的優化。將 http.createServer(app.handle.bind(app)) 簡化成 http.createServer(this)，不過此時 app 就不能是對象，而是函數了。

module.exports = function createApplication() {
 function app(req, res) { app.handle(req, res) }

  // ...
  
  app.listen = function listen(...args) {
    const server = require('node:http').createServer(app)
    return server.listen(...args)
  }

  // ...
  
 return app
}

最后，我們整體來回顧一下。

module.exports = function createApplication() {
  function app(req, res) { app.handle(req, res) }
  app.stack = []

  app.use = function use(route, fn) {
    let path = route
    let handle = fn
    
    // default route to '/'
    if (typeof route !== 'string') {
      path = '/'
      handle = route
    }

    this.stack.push({ route: path, handle })
    return this
  }

  app.listen = function listen(...args) {
    const server = require('node:http').createServer(app)
    return server.listen(...args)
  }

  app.handle = function handle(req, res) {
    let index = 0

    const done = function (err) {
      if (err) {
        res.statusCode = err.status ?? err.statusCode ?? 500
        res.statusMessage = require('node:http').STATUS_CODES[404]
      } else {
        res.statusCode = 404
        res.statusMessage = `Cannot ${req.method} ${require('node:url').parse(req.url).pathname}`
      }
      res.end(`${res.statusCode} ${res.statusMessage}`)
    }

    function next(err) {
      // next callback
      const layer = app.stack[index++]

      // 1) all done
      if (!layer) {
        setImmediate(done, err)
        return
      }

      const path = require('node:url').parse(req.url).pathname
      const route = layer.route
      
      // 2) skip this layer if the route doesn't match
      if (!path.toLowerCase().startsWith(route.toLowerCase())) {
        return next(err)
      }

      // 3) call the layer handle
      const arity = handle.length
      const hasError = !!err
      let error = err

      try {
        // error-handling middleware
        if (hasError && arity === 4) {
          layer.handle(err, req, res, next)
          return
        // request-handling middleware
        } else if (!hasError && arity < 4) { 
          layer.handle(req, res, next)
          return
        }
      } catch (e) {
        error = e
      }

      next(error)
    }

    next()
  }
  
  return app
}

連上注釋，我們只用了 82 行代碼，就實現了 connect 的主要功能。

總結

本文帶大家實現了輕量級 Web 框架 connect 的主要功能，同樣這也是一個簡易版本 Express！

實現核心是 2 個函數。

app.use(route, fn)：用于收集中間件
app.handle(res, req)：用于消費中間件。主要邏輯位于 next() 函數，這是傳遞給中間件的 next 參數。每一次接收請求來臨時，都由 app.handle 負責處理

而這兩個函數之間的橋梁就是 app.stack。

行文最后，給大家留一個思考題。

connect() 實例的真實實現，是支持作為子應用，掛載到父應用之上的，也就是下面的用法。

const connect = require('connect')
const app = connect()
const blogApp = connect()

app.use('/blog', blogApp)
app.listen(3000)

甚至 http.Server 實例也支持掛載。

const connect = require('connect')
const app = connect()

const blog = http.createServer(function(req, res){
  res.end('blog')
})

app.use('/blog', blog)

那是如何實現呢？

大家可以參照 app.use()[4] 函數的源碼進行學習。

感謝的你的閱讀，再見~

參考資料

[1]connect: https://github.com/senchalabs/connect

[2]在 v4 版本就將 connect 依賴移除了: https://github.com/expressjs/express/compare/3.21.2...4.0.0#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519

[3]connect v3.7.0 版本: https://github.com/senchalabs/connect/blob/3.7.0/index.js

[4]app.use(): https://github.com/senchalabs/connect/blob/3.7.0/index.js#L76

責任編輯：武曉燕來源：寫代碼的寶哥

Express 框架 repo