feat: http cache examples

guchengnan · Jun 6, 2021 · e6f09c1 · e6f09c1
commit e6f09c1
Show file tree

Hide file tree

Showing 10 changed files with 529 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,76 @@
+const http = require("http");
+const fs = require("fs");
+const url = require("url");
+const etag = require("etag");
+
+http
+  .createServer((req, res) => {
+    const info = `${req.method} ${req.url} \n`;
+    fs.writeFile("./log.txt", info, { flag: "a" }, (err) => {
+      if (err) {
+        throw err;
+      }
+    });
+
+    const { pathname } = url.parse(req.url);
+    if (pathname === "/") {
+      const data = fs.readFileSync("./public/index.html");
+      res.end(data);
+    } else if (pathname === "/images/01.jpg") {
+      const data = fs.readFileSync("./public/images/01.jpg");
+      res.writeHead(200, {
+        // 缺点：客户端时间和服务器时间可能不同步
+        Expires: new Date("2099-1-1 23:59:59").toUTCString(),
+      });
+      res.end(data);
+    } else if (pathname === "/images/02.jpg") {
+      const data = fs.readFileSync("./public/images/02.jpg");
+      res.writeHead(200, {
+        "Cache-Control": "max-age=5", // 滑动时间，单位是秒
+      });
+      res.end(data);
+    } else if (pathname === "/images/03.jpg") {
+      const { mtime } = fs.statSync("./public/images/03.jpg");
+
+      const ifModifiedSince = req.headers["if-modified-since"];
+      if (ifModifiedSince === mtime.toUTCString()) {
+        // 缓存生效
+        res.statusCode = 304;
+        res.end();
+        return;
+      }
+      const data = fs.readFileSync("./public/images/03.jpg");
+      // 告知客户端该资源要使用协商缓存
+      // 客户端使用缓存数据之前问一下服务器缓存有效吗
+      // 服务端：
+      //    有效：返回 304 ，客户端使用本地缓存资源
+      //    无效：直接返回新的资源数据，客户端直接使用
+      res.setHeader("Cache-Control", "no-cache");
+      // 服务端要下发一个字段告诉客户端这个资源的更新时间
+      res.setHeader("last-modified", mtime.toUTCString());
+      res.end(data);
+    } else if (pathname === "/images/04.jpg") {
+      const data = fs.readFileSync("./public/images/04.jpg");
+      // 基于文件内容生成一个唯一的密码戳
+      const etagContent = etag(data);
+
+      const ifNoneMatch = req.headers["if-none-match"];
+      if (ifNoneMatch === etagContent) {
+        res.statusCode = 304;
+        res.end();
+        return;
+      }
+
+      // 告知客户端要进行协商缓存
+      res.setHeader("Cache-Control", "no-cache");
+      // 把该资源的内容密码戳发给客户端
+      res.setHeader("etag", etagContent);
+      res.end(data);
+    } else {
+      res.statusCode = 404;
+      res.end();
+    }
+  })
+  .listen(3000, () => {
+    console.log("http://localhost:3000");
+  });
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "http-cache",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/guchengnan/http-cache.git",
+  "author": "p_zhengpan <[email protected]>",
+  "license": "MIT"
+}
diff --git a/public/images/01.jpg b/public/images/01.jpg
diff --git a/public/images/02.jpg b/public/images/02.jpg
diff --git a/public/images/03.jpg b/public/images/03.jpg
diff --git a/public/images/04.jpg b/public/images/04.jpg
diff --git a/public/images/05.jpg b/public/images/05.jpg
diff --git a/public/images/06.jpg b/public/images/06.jpg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,77 @@
+<!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>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+            line-height: 2;
+            list-style-type: none;
+            font-family: '楷体';
+        }
+        body {
+            padding: 10px 20px;
+        }
+        table {
+            width: 50%;
+            font-size: 14px;
+            border-collapse: collapse;
+        }
+        caption {
+            font-size: 20px;
+        }
+        img {
+            width: 50px;
+            vertical-align: top;
+        }
+    </style>
+</head>
+<body>
+    <table border="1">
+        <caption>http cache</caption>
+        <thead>
+            <tr>
+                <td>响应头</td>
+                <td>请求资源</td>
+                <td>请求类型</td>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>
+                    <p>Expires: Thu, 01 Jan 2099 15:59:59 GMT</p>
+                </td>
+                <td><img src="./images/01.jpg" alt=""></td>
+                <td>强缓存</td>
+            </tr>
+            <tr>
+                <td>
+                    <p>Cache-Control: max-age=5</p>
+                </td>
+                <td><img src="./images/02.jpg" alt=""></td>
+                <td>强缓存</td>
+            </tr>
+            <tr>
+                <td>
+                    <p>Cache-Control: no-cache</p>
+                    <p>last-modified: Sun, 06 Jun 2021 02:37:52 GMT</p>
+                </td>
+                <td><img src="./images/03.jpg" alt=""></td>
+                <td>协商缓存</td>
+            </tr>
+            <tr>
+                <td>
+                    <p>Cache-Control: no-cache</p>
+                    <p>etag: "14be0-ub9DuZspap5Z3f93ckEiWsRdVvQ"</p>
+                </td>
+                <td><img src="./images/04.jpg" alt=""></td>
+                <td>协商缓存</td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+</html>