Web项目自动刷新实现，简易版LiveServer在前端开发过程中，当我们修改代码时，通常需要手动刷新浏览器以查看更改的

在前端开发过程中，当我们修改代码时，通常需要手动刷新浏览器以查看更改的效果。这种开发模式不仅低效，而且容易出错。为了解决这一问题，可以使用自动刷新机制，在VS Code 插件市场中有一款名为：LiveServer，在文件发生变化时，自动触发浏览器的刷新。本文将介绍如何通过结合 Node.js、WebSocket 和 chokidar 文件监视器实现一个简单的实时更新 Web 项目的demo。

技术栈

Node.js: 作为后端服务，提供 WebSocket 服务并监控文件变化。
Express: 用于搭建 HTTP 服务，提供静态文件支持。
WebSocket: 实现浏览器与服务器的双向通信，触发页面自动刷新。
Chokidar: 监控文件变化，监听项目中的文件改动。

实现原理

WebSocket: 浏览器与服务器建立 WebSocket 连接，确保双向通信。当服务器端文件发生变化时，向客户端发送 reload 消息，指示浏览器刷新页面。
文件监视: 使用 chokidar 监控项目中的文件夹（如 public 和 src 文件夹）。当文件发生变化时，触发 WebSocket 消息通知客户端进行页面刷新。
Express: 提供静态文件服务，确保浏览器能够正确加载 HTML、CSS 和 JavaScript 文件。

依赖包

npm install express chokidar ws

代码实现

  "scripts": {
    "dev": "node ./src/main.js",
  },
  "dependencies": {
    "chokidar": "^4.0.1",
    "express": "^4.21.1",
    "ws": "^8.18.0"
  }

1. 创建 Node.js 服务

首先，我们需要一个基本的 Express 服务，负责提供静态文件并监听 WebSocket 连接。

const express = require('express');
const chokidar = require('chokidar');
const path = require('path');
const WebSocket = require('ws');

const app = express();

// 提供 public 文件夹下的静态文件
app.use(express.static('public'));

// 启动 HTTP 服务
const server = app.listen(3000, function() {
    console.log('服务运行在 http://localhost:3000');
});

// 创建 WebSocket 服务器，绑定到已有的 HTTP 服务
const wss = new WebSocket.Server({ server });

// WebSocket 连接事件处理
wss.on('connection', (ws) => {
    console.log('Client connected');
    // 使用 chokidar 监视 public 和 src 文件夹
    // 第一个参数可以是单个字符串或者数组
    const watcher = chokidar.watch(['public', 'assets'], {
        ignored: /node_modules/, // 忽略一些不需要监听的文件及文件夹
        persistent: true
    });

    // 文件变动时发送 WebSocket 消息
    watcher.on('change', (filePath) => {
        console.log('文件已更改:', filePath);
        ws.send('reload'); // 向客户端发送 reload 消息
    });
});

2. 客户端实现

在客户端，我们需要建立 WebSocket 连接，并监听从服务器发送来的消息。当接收到 reload 消息时，执行页面刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿LiveServer实时更新demo</title>
</head>
<body>
    <div id="app">Hello, Index</div>
    
    <script>
        // 建立 WebSocket 连接到服务器
        const socket = new WebSocket('ws://localhost:3000');

        // 监听 WebSocket 消息
        socket.onmessage = function(e) {
            console.log('接收到消息:', e.data);
            
            // 当接收到 reload 消息时，刷新页面
            if (e.data === 'reload') {
                location.reload();  // 刷新页面以查看最新的更改
            }
        };
    </script>
</body>
</html>

3. 运行和测试

启动 Node.js 服务器：

npm run dev

打开浏览器，访问 http://localhost:3000，你会看到显示 “Hello, Index” 的页面。
现在你可以尝试修改public文件夹下的文件，比如修index.html，你会看到浏览器自动刷新并加载最新的内容。

工作流程总结

浏览器与服务器建立 WebSocket 连接：客户端通过 WebSocket 连接到 Node.js 服务器，以便接收来自服务器的实时更新消息。
文件变动监控：服务器使用 chokidar 监视 public 和 src 文件夹，当文件发生变化时，发送 reload 消息到客户端。
页面自动刷新：浏览器接收到 reload 消息后，自动刷新页面，展示最新的代码更改。

优化和扩展

1. 监听特定文件类型

目前的代码会监控整个 public 和 src 文件夹，可能会对不需要关注的文件类型（如图片、字体文件）产生不必要的变化响应。你可以根据需要，进一步优化 chokidar 的配置，来限制只监控某些特定的文件类型。

const watcher = chokidar.watch('public', {
    ignored: /node_modules|.css|.jpg|.png/,  // 忽略 CSS、图片等文件类型
    persistent: true
});

2. 错误处理

实际开发中，我们需要增加更多的错误处理机制，如捕获 WebSocket 连接失败、chokidar 监视失败等错误。

wss.on('connection', (ws) => {
    ws.on('error', (error) => {
        console.error('WebSocket 连接出错:', error);
    });

    watcher.on('error', (error) => {
        console.error('文件监控出错:', error);
    });
});

结束语

通过结合 Node.js、WebSocket 和 chokidar，我们可以实现一个简单而高效的自动刷新机制。用户在修改代码后，浏览器能够实时反映代码更改，自动刷新页面。通过合理优化和扩展，我们简单的实现了LiveSerever的自刷新功能。

参考链接

chokidar 官方文档