手把手帶你用 82 行代碼實現(xiàn)一個簡易版 Express 框架
本文將帶大家實現(xiàn)輕量級 web 框架 connect[1] 的主要功能，只要 82 行代碼就能搞定。
我并沒有標題黨，因為 Express 在 v3 版本之前就是基于 connect 進行封裝的，不過在 v4 版本就將 connect 依賴移除了[2]，代碼被搬到 Express 倉庫里，并做了一些細微調整。因此某種程度上，學習 connect 就是在學習 Express。
connect 的 repo 描述是：“Connect is a middleware layer for Node.js”，也就是一個 Node.js 的中間件層。中間件層是一個非常有用的機制，它類似一個插件系統(tǒng)，讓我們可以通過插拔的方式組合不同功能來處理請求。
基本使用
先來看看 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()，就進入到下一個中間件的執(zhí)行。
同時，我們還可以為中間件指定路由，這樣中間件只在特定路徑下起作用。
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 庫的基本使用。接下來，就著手實現(xiàn)。
代碼實現(xiàn)
基于 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)實現(xiàn) app.listen()
我們已經知道 app.listen(3000) 內部實現(xiàn)就是 http.createServer(app).listen(3000)。
因此，我們先實現(xiàn) .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(/* ? */) 中的 ? 內容該如何實現(xiàn)呢？
實現(xiàn) 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 中的這些中間件的。
實現(xiàn) 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
- 路由不匹配就跳過
- 路由匹配就執(zhí)行當前中間件
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]）開始處理，就實現(xiàn)了以 next 參數為連接橋梁的中間件機制。
值得注意的是調用當前中間件的邏輯，當我們調用 layer.handle(err, req, res, next)/layer.handle(req, res, next) 時，處理流程會流入中間件內部，當內部調用 next() 函數后，控制權會重新回到 app.handle，繼續(xù)處理隊列中的下一個中間件。
當請求最終沒有任何中間件可以處理時，就會流入到 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}`)
}至此，我們基本寫完了所有的邏輯。
當然，有一個地方，可以做一個小小的優(yōu)化。將 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 行代碼，就實現(xiàn)了 connect 的主要功能。
總結
本文帶大家實現(xiàn)了輕量級 Web 框架 connect 的主要功能，同樣這也是一個簡易版本 Express！
實現(xiàn)核心是 2 個函數。
- app.use(route, fn)：用于收集中間件
- app.handle(res, req)：用于消費中間件。主要邏輯位于 next() 函數，這是傳遞給中間件的 next 參數。每一次接收請求來臨時，都由 app.handle 負責處理
而這兩個函數之間的橋梁就是 app.stack。
行文最后，給大家留一個思考題。
connect() 實例的真實實現(xiàn)，是支持作為子應用，掛載到父應用之上的，也就是下面的用法。
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)那是如何實現(xiàn)呢？
大家可以參照 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
