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

一、背景和意义

之前有另一篇文章《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文件,可以看到修改完成之后,浏览器会自动刷新页面:

相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^3 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic4 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具5 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test6 小时前
js下载excel示例demo
前端·javascript·excel
Yaml46 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro