使用node手寫一個頁面緩存的實現

時間 2019-12-04

標籤使用 node 手寫一個頁面緩存實現简体版

原文原文鏈接

首先分析一下緩存的一個過程

第一次請求頭：javascript

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8html

Accept-Encoding: gzip, deflate, brjava

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,zh-TW;q=0.7,es;q=0.6,fr;q=0.5,pt;q=0.4web

Connection: keep-alive緩存

Host: localhostapp

Upgrade-Insecure-Requests: 1ui

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)url

Chrome/65.0.3315.4 Safari/537.36spa

第一次響應頭：code

Accept-Ranges: bytes

Connection: Keep-Alive

Content-Length: 124

Content-Type: text/plain

Date: Sat, 27 Jan 2018 12:16:24 GMT

ETag: "7c-55f53907b74a4"

Keep-Alive: timeout=5, max=100

Last-Modified: Sat, 02 Dec 2017 04:03:14 GMT

Server: Apache/2.4.9 (Win64) PHP/5.5.12

第二次請求頭：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8

Accept-Encoding: gzip, deflate, br

Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,zh-TW;q=0.7,es;q=0.6,fr;q=0.5,pt;q=0.4

Cache-Control: max-age=0

Connection: keep-alive

Host: localhost

If-Modified-Since: Sat, 02 Dec 2017 04:03:14 GMT

If-None-Match: "7c-55f53907b74a4"

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/65.0.3315.4 Safari/537.36

第二次響應頭：

Connection: Keep-Alive

Date: Sat, 27 Jan 2018 12:17:57 GMT

ETag: "7c-55f53907b74a4"

Keep-Alive: timeout=5, max=100

Server: Apache/2.4.9 (Win64) PHP/5.5.12

簡化一下緩存實現過程：

1.第一次Server----->Client：Last-Modified: Thu, 13 Dec 2018 02:22:26 GMT

2.第二次Client----->Server：If-Modified-Since: Thu, 13 Dec 2018 02:22:26 GMT

3.第二次Server----->Client：200 || 304

下面是實現的代碼
- 主要說一下：Last-Modified 主要是 stat.mtime

廢話很少說直接貼完整代碼

index.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>Document</title>
    </head>
    <body>
      我是開始頁面
    </body>
    </html>
複製代碼

server.js

const http = require('http');
const url = require('url');
const fs = require('fs');
http.createServer((req, res)=>{
  const {pathname} = url.parse(req.url);
  fs.stat(`www/${pathname}`, (err, stat)=>{
    if (err) {
      res.writeHead(404);
      res.write('Not Found');
      res.end();
    } else {
      console.log(stat.mtime);
      if (req.headers['if-modified-since']) {
        const time_server = Math.floor(stat.mtime.getTime()/1000);
        const time_client = Math.floor(new Date(req.headers['if-modified-since']).getTime()/1000);
        if(time_server > time_client){
          sendFileToClient();
        } else {
          res.writeHead(304);
          res.write('Not Modified');
          res.end();
        }
      } else {
        sendFileToClient();
      }
      function sendFileToClient(){
        const rs = fs.createReadStream(`www/${pathname}`);
        res.setHeader('Last-Modified', stat.mtime.toGMTString());
        rs.pipe(res);
        rs.on('error',(err)=>{
          res.writeHead(404);
          res.write('Not Found');
          res.end();
        })
      }
    }
  })
}).listen(8080);
複製代碼