一、背景和意义

之前有另一篇文章《Express项目实现修改代码后浏览器自动刷新》介绍了使用第三方工具browserSync实现修改代码后浏览器自动刷新页面的方法。但browserSync在实际应用中可能会遇到一些BUG，比如有时候修改代码之后没有自动刷新页面，或者刷新页面时页面加载慢有相当长的一段时间内处于loading状态。其实参考browserSync的设计自己实现一个修改代码后自动刷新页面的工具也很简单，没有多少行代码，且遇到问题排查也很方便。本文将使用http-proxy-middleware和nodemon这两个常见的node.js库实现修改代码后自动刷新页面的工具。

二、用于测试的页面的代码

我们需要先创建一个用户测试的页面，然后再创建自动刷新页面的工具。对于测试页面，沿用《Express项目实现修改代码后浏览器自动刷新》文中的示例，创建如下几个文件： index.js：

javascript 复制代码

const express = require("express");
const app = express();

app.set("views", "./views");
app.set("view engine", "ejs");

app.get("/", (req, res) => res.render("index", {"title": "HelloWorld"}));

app.listen(8000);

views/index.ejs：

javascript 复制代码

<!DOCTYPE html>
<html>
    <body>
        <h1><%= title %></h1>
    </body>
</html>

用nodemon运行index.js（如果还没有安装nodemon，需要执行npm install -g nodemon安装）：

bash 复制代码

nodemon index.js

执行之后访问http://localhost:8000，将看到如下页面：

三、刷新页面的工具的实现代码

创建一个放在项目根目录（即与前面的index.js文件在同一级目录）的autoRefresh.js文件用于实现自动刷新页面，其参考了browserSync的设计思路：

先创建一个服务，对该服务的请求将被代理到测试页面；
在代理的过程中如果遇到html页面，则在里面插入一段js代码；
当项目下存在文件修改的时候，服务会告知第2步里添加的js代码，js代码再刷新页面。

该文件的代码及相关说明如下：

javascript 复制代码

const http = require('http');
const { createProxyMiddleware, responseInterceptor } = require('http-proxy-middleware');
const launchTs = Date.now();    // 记录服务的启动时间

const proxy = createProxyMiddleware({
  target: 'http://localhost:8000',   // 代理到测试页面
  selfHandleResponse: true,
  onProxyRes: responseInterceptor(async (responseBuffer, proxyRes) => {

    // 获取测试页面返回的headers，headers应当是一个数组，里面有一个元素为'Content-Type'字符串，
    // 然后下一个就是ContentType的值。如果ContentType为html，则插入一段js代码，其他情况不做处理
    const resHeaders = proxyRes?.socket?._httpMessage?.res?.rawHeaders;
    if (resHeaders instanceof Array
      && resHeaders[resHeaders.indexOf('Content-Type') + 1]?.startsWith("text/html")) {
      const response = responseBuffer.toString('utf8');
      if (response.includes("<!DOCTYPE html>")) {

        // 如果有文件修改，本文件对应的服务应该会被重启，launchTs的值就会有变化。
        // 这里在html中插入的js代码会对比一下launchTs发现不匹配就刷新页面
        const jsCode = `;setInterval(() => fetch('/launchTs')
          .then(res => res.json())
          .then(obj => obj.ts !== ${launchTs} && location.reload()),
          200);`;
        return response.replace("</html>", `<script>${jsCode}</script></html>`);
      }
    }
    return responseBuffer;
  })
});

http.createServer(
  (req, res) => req.url === '/launchTs' ? res.end(`{"ts":${launchTs.toString()}}`) : proxy(req, res)
).listen(8001);

然后使用nodemon运行autoRefresh.js：

bash 复制代码

nodemon autoRefresh.js

执行nodemon之后访问http://localhost:8001，和前面http://localhost:8000一样的页面（因为新的服务代理到了http://localhost:8000）：

不过此时如果访问view-source:http://localhost:8001/地址查看http://localhost:8001/的源码，可以看到页面底部增加了autoRefresh.js中写的那一段js代码：

此时再修改index.js文件，可以看到修改完成之后，浏览器会自动刷新页面：

用http-proxy-middleware和nodemon实现修改代码后自动刷新页面

一、背景和意义

二、用于测试的页面的代码

三、刷新页面的工具的实现代码