记录–前端重新部署如何通知用户

class Monitor {   private oldScript: string[] = []    private newScript: string[] = []    private oldEtag: string | null = null    private newEtag: string | null = null    dispatch: Record<string, (() => void)[]> = {}    private stop = false    constructor() {     this.init()   }    async init() {     console.log('初始化')     const html: string = await this.getHtml()     this.oldScript = this.parserScript(html)     this.oldEtag = await this.getEtag()   }  // 获取html   async getHtml() {     const html = await fetch('/').then((res) => res.text())     return html   }   // 获取etag是否变化   async getEtag() {     const res = await fetch('/')     return res.headers.get('etag')   }   // 解析script标签   parserScript(html: string) {     const reg = /<script(?:s+[^>]*)?>(.*?)</scripts*>/gi     return html.match(reg) as string[]   }   // 订阅   on(key: 'update', fn: () => void) {     ;(this.dispatch[key] || (this.dispatch[key] = [])).push(fn)     return this   }   // 停止   pause() {     this.stop = !this.stop   }        get value() {     return {       oldEtag: this.oldEtag,       newEtag: this.newEtag,       oldScript: this.oldScript,       newScript: this.newScript,     }   }   // 两层对比有任一个变化即可   compare() {     if (this.stop) return     const oldLen = this.oldScript.length     const newLen = Array.from(       new Set(this.oldScript.concat(this.newScript))     ).length     if (this.oldEtag !== this.newEtag || newLen !== oldLen) {       this.dispatch.update.forEach((fn) => {         fn()       })     }   }  // 检查更新    async check() {     const newHtml = await this.getHtml()     this.newScript = this.parserScript(newHtml)     this.newEtag = await this.getEtag()     this.compare()   } }  export const monitor = new Monitor()  // 路由前置守卫中调用 import { monitor } from './monitor'  monitor.on('update', () => {   console.log('更新数据', monitor.value)   Modal.confirm({     title: '更新提示',     icon: createVNode(ExclamationCircleOutlined),     content: '版本有更新，是否刷新页面！',     okText: '刷新',     cancelText: '不刷新',     onOk() {       // 更新操作       location.reload()     },     onCancel() {       monitor.pause()     },   }) })  router.beforeEach((to, from, next) => {     monitor.check() })

map $http_upgrade $connection_upgrade {     default upgrade;     ''      close;   } server {         listen     80;         server_name  test-pms.shands.cn;         client_max_body_size 50M;          location / {             root /usr/local/openresty/nginx/html/test-pms-admin;             try_files $uri $uri/ /index.html;         }         // 将触发的更新代理到容器的3000         location /api/webhook1 {          proxy_pass http://localhost:3000/api/webhook1;          proxy_set_header Host $host;          proxy_set_header X-Real-IP $remote_addr;         }         // websocket 配置         location /ws {           # 反向代理到容器中的WebSocket接口           proxy_pass http://localhost:3000;           # 支持WebSocket协议           proxy_http_version 1.1;           proxy_set_header Upgrade $http_upgrade;           proxy_set_header Connection "Upgrade";         }        }

4. 总结

主要实践下两种方案：

1. 轮询调用方案：轮询获取网页引入的脚本文件的hash值或者etag来实现。这种方案的优点是实现简单，但存在性能消耗和延迟较高的问题。

2. WebSocket版本方案：在前端部署的同时建立一个WebSocket连接，将后端构建部署完成的通知发送给前端。当后端完成部署后，通过WebSocket向前端发送消息，提示用户刷新页面以加载最新版本。这种方案的优点是实时性好，用户体验较好，但需要在前端和后端都进行相应的配置和代码开发。