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

相关推荐
m0_7482361126 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61739 分钟前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489440 分钟前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js