如果您是Web開發人員，並且尚未使用VSCODE中的Live Server擴展程序，您甚至是開發人員嗎？只是在開玩笑。但是，您是否考慮過在引擎蓋下的工作方式？在當今的博客中，讓我們嘗試了解使用Golang的動手實施的方式。為什麼Golang？好吧，這些天我正在探索Golang，還有什麼比構建項目更好的學習呢？因此，足夠的上下文（不是Golang中的一個）讓我們開始。

實時服務器的工作方式？

因此，每當瀏覽器檢測到HTML，CSS或JS文件中的任何修改時，Live Server都會自動重新加載瀏覽器。它首先通過HTTP服務器提供這些靜態文件。在引擎蓋下，它採用了像FSNOTIFY這樣的文件觀察器（我們將用於項目），FSWATCH（以UNIX基於UNIX的文件系統）或Chokidar（用於Nodejs）來連續監視文件更改的項目目錄（基本上您使用Extensions .html，.css，.js，.js），.js，.js）。

在核心上使用您（節點JS）服務器和瀏覽器之間的Websocket連接。當服務器檢測到文件更改時，它將通過Websocket發送重新加載通知到瀏覽器。反過來，瀏覽器會重新加載頁面以反映正在進行的新更改。此外，它使用CSS注入（僅更新未經完整重新加載的樣式），HMR（熱模塊替換）JavaScript模塊。這樣可以確保開發人員獲得實時反饋，而無需在每次更改代碼後手動重新加載瀏覽器。

項目概述

在這個項目中，我的想法是相同的。我的目標是觀察文件更改（例如HTML，CSS和JavaScript），並在檢測到任何修改時觸發瀏覽器重新加載。為此，我使用了GO的內置HTTP服務器和FSNotify軟件包，它們有效地監視文件系統事件。

1。服務靜態文件

第一步是在GO中設置一個簡單的HTTP服務器，該服務器可從目錄中提供靜態文件。靜態文件（例如HTML，CSS和JavaScript）將從./static文件夾中加載。使用http.fileserver處理：

http.handle（“/”，http.fileserver（http.dir（“ ./ static”））

2。重新加載端點

接下來，我需要一個端點，在檢測到文件更改時，可以通知客戶端要重新加載。 /重新加載路由充當觸發器，當服務器檢測到修改時，向瀏覽器發送“重新加載”消息：

http.Handle("/", http.FileServer(http.Dir("./static")))

字節（“ Reload”）） }））

此路由在頻道上聽取事件，後來將通過文件更改通知填充。
3.觀看文件更改

http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
    







  
  
  4。過濾跟踪的文件


並非每個文件更改都應觸發重新加載，因此我添加了一個僅跟踪特定文件擴展名的過濾器：.html，.css和.js。這是使用filepath.ext函數來檢查文件類型的完成的：



func scanFileChanges() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    for {
        select {
        case event := 
  
  
  5。運行服務器


最後，我啟動了HTTP服務器以在端口8000上收聽，並同時啟動了文件觀看過程：








  
  
  最後的想法
func isTrackedFile(fileName string) bool {
    ext := strings.ToLower(filepath.Ext(fileName))
    return ext == ".html" || ext == ".css" || ext == ".js"
}
此示例著重於重新加載靜態文件時，還有很大的改進空間 - 例如，添加WebSocket支持對更平滑的通信，更好的文件處理以及擴展跟踪文件列表的支持。

只有幾行GO代碼，我能夠改善靜態Web開發的工作流程，我期待進一步完善此工具。

查看代碼：Serve-It GitHub