NodeJS4-7靜態資源服務器實戰_緩存

瀏覽器發出一個請求,服務器解析出響應的結果返回給瀏覽器.

緩存是怎麼工做的?

用戶發起請求,瀏覽器檢查本地是否存在緩存,若是第一次請求沒有緩存,那就向服務器發起請求,服務器協商緩存的內容而且返回響應,接着返回緩存響應,再次請求時,會檢查緩存是否失效,沒有失效就使用本地緩存,若是本地緩存失效了,

 

 緩存header

 判斷本地有沒有失效的能夠用

• 返回時間Expires/Cache-Control

　　Expires(比較老式):返回的是一個絕對時間,因爲時區問題不多用

　　Cache-Control(經常使用):返回的是一個相對時間

• 修改時間Last-Modified/If-Modified_Since

　　Last-Modified:向服務器校驗的時候拿到的結果,每次返回響應的時候會告訴Last-Modified時間

　　If-Modified_Since:瀏覽器第二次或者第三次發起請求時,會把上次的修改時間放在修改頭的If-Modified_Since

• 服務器校驗 If-None-Match /TRag

defaultConfig.js

module.exports={
    root:process.cwd(),
    hostname:'127.0.0.1',
    port:9527,
    compress:/\.(html|js|css|md)/,
    cache:{
        maxAge:600,
        expire:true,
        cacheControl:true,
        lastModified:true,
        etag:true
    }
}

新建文件src/helper/cache.js

const {cache} = require('../config/defaultConfig')
// 更新一下響應,修改時間
function refreshRes(stats,res){
    const {maxAge,expires,cacheControl,lastModified,etag} = cache;

    if(expires){
        res.setHeader('Expires',(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}`);
    }

}

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 && etag !== res.getHeader('Etag')){
        return false
    }
    return true 
}

route.js引用ca'ch

const fs =require('fs')
const path = require('path')
const Handlebars = require('handlebars')
const promisify = require('util').promisify;
const stat = promisify(fs.stat)
const readdir = promisify(fs.readdir);
// //引用range範圍
// const range = require('./range')
const config = require('../config/defaultConfig')
const tplPath = path.join(__dirname,'../template/dir.tpl')
const source = fs.readFileSync(tplPath);
const template = Handlebars.compile(source.toString())
//引入新加的mime,對contentType的判斷
const mime = require('./mime')
const compress = require('./compress')

//引用range範圍
const range = require('./range')

// 引入cache
const isFresh = require('./cache')


module.exports=async function(req,res,filePath){
    try{
        const stats =await stat(filePath)
        if(stats.isFile()){
            const contentType = mime(filePath)
            res.statusCode = 200
            res.setHeader('content-Type',contentType)
            
            if(isFresh(stats,req,res)){
                res.statusCode = 304;
                res.end()
                return 
            }

            let rs;
            const {code,start,end} = range(stats.size, req, res)
            if(code === 200){
                res.statusCode = 200
                rs = fs.createReadStream(filePath) 
            }else{
                res.statusCode = 216 //測試隨便定
                rs = fs.createReadStream(filePath,{start,end}) 
            }

            // let rs = fs.createReadStream(filePath) 
            if(filePath.match(config.compress)){
                rs = compress(rs,req,res)
            }
            rs.pipe(res);
            // fs.readFile(filePath,(err,data)=>{
            //     res.end(data)
            // });
        }else if(stats.isDirectory()){
            //全部異步調用必須用await
            const files =await readdir(filePath);
            res.statusCode = 200
            res.setHeader('content-Type','text/html')
            const dir = path.relative(config.root,filePath)
            const data = {
                title:path.basename(filePath),
                // dir:config.root,
                dir:dir?`/${dir}`:'',
                files:files.map(file=>{
                    return {
                        file,
                        icon:mime(file)
                    }
                })
            }
            res.end(template(data));
        }
    }catch(ex){
        console.error(ex);
        res.statusCode = 404
        res.setHeader('content-Type','text/plain')
        res.end(`${filePath} is not a directory or file\n ${ex.error}`)
    }
}

主要代碼是

 

 運行結果

首次

 

 刷新