原生node寫一個靜態資源伺服器
阿新 • • 發佈：2018-12-18
myanywhere
用原生node做一個簡易閹割版的anywhere靜態資源伺服器，以提升對node與http的理解。
相關知識
- es6及es7語法
- http的相關網路知識
- 響應頭
- 快取相關
- 壓縮相關
path模組
- path.join拼接路徑
- path.relative
- path.basename
- path.extname
http模組
fs模組
fs.stat函式
使用 fs.stat函式取得stats來獲取檔案或資料夾的引數
- stats.isFile 判斷是否為資料夾
fs.createReadStream(filePath).pipe(res)
檔案可讀流的形式，使讀取效率更高
fs.readdir
...
promisify
- async await
1.實現讀取檔案或資料夾
const http= require('http') const conf = require('./config/defaultConfig') const path = require('path') const fs = require('fs') const server = http.createServer((req, res) => { const filePath = path.join(conf.root, req.url) // http://nodejs.cn/api/fs.html#fs_class_fs_stats fs.stat(filePath, (err, stats) => { if (err) { res.statusCode = 404 res.setHeader('Content-text', 'text/plain') res.end(`${filePath} is not a directoru or file`) } // 如果是一個檔案 if (stats.isFile()) { res.statusCode = 200 res.setHeader('Content-text', 'text/plain') fs.createReadStream(filePath).pipe(res) } else if (stats.isDirectory()) { fs.readdir(filePath, (err, files) => { res.statusCode = 200 res.setHeader('Content-text', 'text/plain') res.end(files.join(',')) }) } }) }) server.listen(conf.port, conf.hostname, () => { const addr = `http:${conf.hostname}:${conf.port}` console.info(`run at ${addr}`) })
2. async await非同步修改
為了避免多層回調出現，我們使用jsasync 和 await來 改造我們的程式碼
router.js
把邏輯相關的程式碼從app.js中抽離出來放入router.js中，分模組開發
const fs = require('fs') const promisify = require('util').promisify const stat = promisify(fs.stat) const readdir = promisify(fs.readdir) module.exports = async function (req, res, filePath) { try { const stats = await stat(filePath) if (stats.isFile()) { res.statusCode = 200 res.setHeader('Content-text', 'text/plain') fs.createReadStream(filePath).pipe(res) } else if (stats.isDirectory()) { const files = await readdir(filePath) res.statusCode = 200 res.setHeader('Content-text', 'text/plain') res.end(files.join(',')) } } catch (error) { res.statusCode = 404 res.setHeader('Content-text', 'text/plain') res.end(`${filePath} is not a directoru or file`) } }
app.js
const http= require('http')
const conf = require('./config/defaultConfig')
const path = require('path')
const route = require('./help/router')
const server = http.createServer((req, res) => {
const filePath = path.join(conf.root, req.url)
route(req, res, filePath)
})
server.listen(conf.port, conf.hostname, () => {
const addr = `http:${conf.hostname}:${conf.port}`
console.info(`run at ${addr}`)
})3. 完善可點選
上面的工作 已經可以讓我們在頁面中看到資料夾的目錄，但是是文字，不可點選
使用handlebars渲染
引用handlebars
const Handlebars = require('handlebars')建立模板html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>{{title}}</title> <style> body { margin: 10px } a { display: block; margin-bottom: 10px; font-weight: 600; } </style> </head> <body> {{#each files}} <a href="{{../dir}}/{{file}}">{{file}}</a> {{/each}} </body> </html>
router.js配置
引用時使用絕對路徑
const tplPath = path.join(__dirname, '../template/dir.html') const source = fs.readFileSync(tplPath, 'utf8') const template = Handlebars.compile(source)建立資料
data.... module.exports = async function (req, res, filePath) { try { ... } else if (stats.isDirectory()) { const files = await readdir(filePath) res.statusCode = 200 res.setHeader('Content-text', 'text/html') const dir = path.relative(config.root, filePath) const data = { // path.basename() 方法返回一個 path 的最後一部分 title: path.basename(filePath), // path.relative('/data/orandea/test/aaa', '/data/orandea/impl/bbb'); // 返回: '../../impl/bbb' dir: dir ? `/${dir}` : '', files } console.info(files) res.end(template(data)) } } catch (error) { ... } }
4. mime
新建mime.js檔案
const path = require('path')
const mimeTypes = {
....
}
module.exports = (filePath) => {
let ext = path.extname(filePath).toLowerCase()
if (!ext) {
ext = filePath
}
return mimeTypes[ext] || mimeTypes['.txt']
}mine.js 根據檔案字尾名來返回對應的mime
5. 壓縮頁面優化效能
對讀取的stream壓縮
在 defaultConfig.js中 新增 compress項
module.exports = {
// process.cwd() 路徑能隨著執行路徑的改變而改變
// process cwd() 方法返回 Node.js 程序當前工作的目錄。
root: process.cwd(),
hostname: '127.0.0.1',
port: 9527,
compress: /\.(html|js|css|md)/
}
編寫壓縮處理 compress
const {createGzip, createDeflate} = require('zlib')
module.exports = (rs, req, res) => {
const acceptEncoding = req.headers['accept-encoding']
if (!acceptEncoding || !acceptEncoding.match(/\b(gzip|deflate)\b/)) {
return
} else if (acceptEncoding.match(/\bgzip\b/)) {
res.setHeader('Content-Encoding', 'gzip')
return rs.pipe(createGzip())
} else if (acceptEncoding.match(/\bdeflate\b/)) {
res.setHeader('Content-Encoding', 'deflate')
return rs.pipe(createGzip())
}
}
/*
match() 方法可在字串內檢索指定的值，或找到一個或多個正則表示式的匹配。
該方法類似 indexOf() 和 lastIndexOf() ，但是它返回指定的值，而不是字串的位置。
*/
router.js中讀取檔案的更改
...
let rs = fs.createReadStream(filePath)
if (filePath.match(config.compress)) {
rs = compress(rs, req, res)
}
rs.pipe(res)檔案結果compress壓縮後，壓縮率可達 70%
6.處理快取
快取大致原理
使用者請求 本地快取 --no--> 請求資源 --> 協商快取 返回響應
使用者請求 本地快取 --yes--> 判斷換存是否有效 --有效--> 本地快取 --無效--> 協商快取 返回響應
快取header
- expires 老舊 現在不用
- Cache-Control 相對與上次請求的時間
- If-Modified-Since / Last-Modified
- If-None-Match / ETag
cache.js
const {cache} = require('../config/defaultConfig')
function refreshRes(stats, res) {
const { maxAge, expires, cacheControl, lastModified, etag } = cache
if (expires) {
res.setHeader('Expores', (new Date(Date.now() + maxAge * 1000)).toUTCString())
}
if (cacheControl) {
res.setHeader('Cache-Control', `public, max-age=${maxAge}`)
}
if (lastModified) {
res.setHeader('Last-Modified', stats.mtime.toUTCString())
}
if (etag) {
res.setHeader('ETag', `${stats.size}-${stats.mtime.toUTCString()}`)
}
}
module.exports = function isFresh(stats, req, res) {
refreshRes(stats, res)
const lastModified = req.headers['if-modified-since']
const etag = req.headers['if-none-match']
if (!lastModified && !etag) {
return false
}
if (lastModified && lastModified !== res.getHeader('Last-Modified')) {
return false
}
if (etag && res.getHeader('ETag').indexOf(etag) ) {
return false
}
return true
}
router.js
// 如果檔案是是新鮮的 不用更改，就設定響應頭 直接返回
if (isFresh(stats, req, res)) {
res.statusCode = 304
res.end()
return
}7.自動開啟瀏覽器
編寫openUrl.js
const {exec} = require('child_process')
module.exports = url => {
switch (process.platform) {
case 'darwin':
exec(`open ${url}`)
break
case 'win32':
exec(`start ${url}`)
}
}只支援Windows和 mac系統
在app.js中使用
server.listen(conf.port, conf.hostname, () => {
const addr = `http:${conf.hostname}:${conf.port}`
console.info(`run at ${addr}`)
openUrl(addr)
})總結
domo不難，但是涉及到的零碎知識點比較多，對底層的node有個更進一步瞭解，也感受到了node在處理網路請求這一塊的強大之處，另外es6和es7的新語法很是強大，以後要多做功課。