http-cache -> node.js 示例代码

1.index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>http-cache</title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
        }
    </style>
    <body>
        <div style="width: 20%">
            <h3>强制缓存</h3>
            <hr />
            <h4>基于expires</h4>
            <img src="./img/test.webp" width="100" />
            <hr />
            <h4>基于cache-control</h4>
            <img src="./img/test1.webp" width="100" />
        </div>
        <div style="width: 20%; margin-left: 30px">
            <h3>协商缓存</h3>
            <hr />
            <h4>基于last-modified</h4>
            <img src="./img/test2.webp" width="100" />
            <hr />
            <h4>基于etag</h4>
            <img src="./img/test3.webp" width="100" />
        </div>
    </body>
</html>

2.server.js

const http = require('http');
const fs = require('fs');
const url = require('url');
const etag = require('etag');

http.createServer((req, res) => {
    console.log(req.method, `req.method`);
    const { pathname } = url.parse(req.url);
    switch (pathname) {
        case '/':
            const index = fs.readFileSync('./index.html');
            res.statusCode = 200;
            res.end(index);
            break;
        case '/img/test.webp':
            const test = fs.readFileSync('./img/test.webp');
            res.statusCode = 200;
            res.setHeader('expires', new Date(Date.now() + 60 * 60 * 1000).toUTCString());
            res.end(test);
            break;
        case '/img/test1.webp':
            const test1 = fs.readFileSync('./img/test1.webp');
            res.statusCode = 200;
            res.setHeader('cache-control', 'max-age=20');
            res.end(test1);
            break;
        case '/img/test2.webp':
            const { mtime } = fs.statSync('./img/test2.webp');
            const ifModifiedSince = req.headers['if-modified-since'];
            if (ifModifiedSince === mtime.toUTCString()) {
                console.log(`协商缓存`);
                res.statusCode = 304;
                res.end();
                return;
            }
            const test2 = fs.readFileSync('./img/test2.webp');
            res.statusCode = 200;
            res.setHeader('cache-control', 'no-cache');
            res.setHeader('last-modified', mtime.toUTCString());
            res.end(test2);
            break;

        case '/img/test3.webp':
            const test3 = fs.readFileSync('./img/test3.webp');
            const etagContent = etag(test3);
            const iNoneMatch = req.headers['if-none-match'];
            if (iNoneMatch === etagContent) {
                console.log(`协商缓存`);
                res.statusCode = 304;
                res.end();
                return;
            }

            res.setHeader('cache-control', 'no-cache');
            res.setHeader('etag', etagContent);
            res.end(test3);
            break;
        default:
            res.end();
            break;
    }
}).listen(5000, () => {
    console.log(`server is running at http://localhost:5000`);
});

3.依赖列表

{
  "name": "http-cache",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.23",
    "etag": "^1.8.1"
  }
}

 

posted @ 2022-03-24 17:27  半糖也甜吖  阅读(55)  评论(0)    收藏  举报