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