快捷導(dǎo)航

C# .NET基于PicoServer的Live?Reload實(shí)現(xiàn)熱重載的完整方案

更新時(shí)間：2026年06月10日 08:30:09 作者：桔子雨

這篇文章主要為大家詳細(xì)介紹了如何基于.NET實(shí)現(xiàn)的零配置熱重載服務(wù)器,通過文件監(jiān)控、防抖處理及WebSocket廣播等步實(shí)現(xiàn)熱重載,文中的示例代碼講解詳細(xì),有需要的可以了解下

一、熱重載的本質(zhì)

熱重載解決的問題：文件保存后瀏覽器自動(dòng)刷新。

傳統(tǒng)流程：修改 → 保存 → 切換窗口 → F5（4 步）
熱重載后：修改 → 保存（2 步）

核心流程：文件變更 → 服務(wù)端檢測 → WebSocket 推送 → 瀏覽器刷新

二、實(shí)現(xiàn)

2.1 文件監(jiān)控與防抖

using PicoServer;
using System.Timers;
using System.IO;

string staticRoot = "wwwroot";
var app = new WebAPIServer();

var watcher = new FileSystemWatcher(staticRoot)
{
    EnableRaisingEvents = true,
    IncludeSubdirectories = true
};

var timer = new System.Timers.Timer(200) { AutoReset = false };
timer.Elapsed += async (_, _) => await app.WsBroadcastAsync("reload");

void OnChange(object s, FileSystemEventArgs e)
{
    var name = Path.GetFileName(e.Name);
    if (string.IsNullOrEmpty(name) || name.StartsWith('.') || name.StartsWith('~'))
        return;  // 過濾 IDE 臨時(shí)文件
    
    timer.Stop();
    timer.Start();  // 200ms 內(nèi)無新事件才觸發(fā)
}

watcher.Changed += OnChange;
watcher.Created += OnChange;
watcher.Deleted += OnChange;
watcher.Renamed += OnChange;

防抖的必要性：一次保存操作可能觸發(fā) Changed、Created、Renamed 多個(gè)事件，防抖將其合并為一次廣播，避免頁面重復(fù)刷新。

2.2 WebSocket 廣播

app.enableWebSocket = true;
app.WsOnConnectionChanged = (_, _) => Task.CompletedTask;

PicoServer 開啟 WebSocket 后，通過以下方法廣播：

await app.WsBroadcastAsync("reload");

2.3 客戶端腳本注入

在返回 HTML 時(shí)自動(dòng)注入 WebSocket 客戶端代碼，開發(fā)者無需手動(dòng)添加：

if (filePath.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
{
    var content = await File.ReadAllTextAsync(filePath);
    var script = """
        <script>
        new WebSocket('ws://'+location.host+'/ws-reload').onmessage = e => {
            if (e.data === 'reload') location.reload();
        };
        </script>
        """;
    
    content = content.Contains("</body>")
        ? content.Replace("</body>", script + "</body>")
        : content + script;
    
    await res.WriteAsync(content, "text/html");
}

2.4 路徑放行

/ws-reload 路徑需要交給 WebSocket 處理，靜態(tài)文件中間件應(yīng)放行：

if (path == "/ws-reload") return true;

三、完整示例

using PicoServer;
using System.Timers;

var app = new WebAPIServer();
app.enableWebSocket = true;
app.WsOnConnectionChanged = (_, _) => Task.CompletedTask;

string staticRoot = "wwwroot";
var watcher = new FileSystemWatcher(staticRoot) { EnableRaisingEvents = true };
var timer = new System.Timers.Timer(200) { AutoReset = false };
timer.Elapsed += async (_, _) => await app.WsBroadcastAsync("reload");
watcher.Changed += (s, e) => { timer.Stop(); timer.Start(); };

app.AddMiddleware(async (req, res) =>
{
    var path = req.Url?.AbsolutePath ?? "";
    if (path == "/ws-reload") return true;
    
    // 解析文件路徑
    var reqPath = path.TrimStart('/');
    if (string.IsNullOrEmpty(reqPath)) reqPath = "index.html";
    var filePath = Path.GetFullPath(Path.Combine(staticRoot, reqPath));
    
    // 安全檢查
    if (!filePath.StartsWith(staticRoot) || !File.Exists(filePath))
    {
        res.StatusCode = 404;
        await res.WriteAsync("Not Found");
        return false;
    }
    
    // HTML 文件：注入腳本后返回
    if (filePath.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
    {
        var content = await File.ReadAllTextAsync(filePath);
        var script = """
            <script>
            new WebSocket('ws://'+location.host+'/ws-reload').onmessage = e => {
                if (e.data === 'reload') location.reload();
            };
            </script>
            """;
        content = content.Contains("</body>")
            ? content.Replace("</body>", script + "</body>")
            : content + script;
        await res.WriteAsync(content, "text/html");
    }
    else
    {
        // 非 HTML 文件：直接返回
        await res.SendFileAsync(filePath, false);
    }
    return false;
});

app.StartServer(8080);
Console.WriteLine("熱重載已啟動(dòng): http://localhost:8080");
await Task.Delay(Timeout.Infinite);