如果您是 Web 開發人員，並且沒有在 VSCode 中使用過 Live Server 擴展，那麼您還是開發人員嗎？只是在開玩笑。但你有沒有想過它在幕後是如何運作的？在今天的部落格中，讓我們試著了解如何使用 Golang 進行實際實作。為什麼選擇 Golang？好吧，我這些天正在探索 Golang，還有什麼比建立一個專案更好的學習呢？足夠的上下文（不是 golang 中的上下文）讓我們開始吧。
因此，只要即時伺服器偵測到 html、css 或 js 檔案有任何修改，它就會自動重新載入瀏覽器。它首先透過 HTTP 伺服器提供這些靜態檔案。在底層，它使用了一個檔案監視程序，例如fsnotify（我們將在我們的專案中使用它）、fswatch（在基於UNIX 的檔案系統中）或Chokidar（對於Nodejs）來持續監視專案目錄中的檔案更改（基本上，當您保存擴展名為.html、.css、.js 的任何檔案。
其核心是在您的（node js）伺服器和瀏覽器之間使用 WebSocket 連線。當伺服器偵測到文件變更時，它會透過 WebSocket 向瀏覽器發送重新載入通知。瀏覽器又會重新載入頁面以反映所做的新變更。此外，它還使用 CSS 注入（僅更新樣式，無需完全重新載入），HMR（熱模組替換）用於 javascript 模組。這可確保開發人員獲得即時回饋，而無需在每次更改程式碼後手動重新載入瀏覽器。
所以對於這個項目，我的想法是一樣的。我的目標是監視文件更改（例如 HTML、CSS 和 JavaScript），並在檢測到任何修改時觸發瀏覽器重新加載。為此，我使用了 Go 的內建 HTTP 伺服器和 fsnotify 套件，它可以有效地監視檔案系統事件。
第一步是在 Go 中設定一個簡單的 HTTP 伺服器，為目錄中的靜態檔案提供服務。靜態檔案（例如 HTML、CSS 和 JavaScript）將從 ./static 資料夾載入。這是使用 http.FileServer 處理的：
http.Handle("/", http.FileServer(http.Dir("./static")))
接下來，我需要一個端點，在偵測到檔案變更時通知客戶端重新載入。 /reload 路由充當觸發器，當伺服器偵測到修改時向瀏覽器發送「重新載入」訊息：
http.HandleFunc("/reload", func(w http.ResponseWriter, r *http.Request) {
<-reloadChan
w.Write([]byte("reload"))
})
此路由偵聽通道上的事件，稍後將透過檔案變更通知填入該事件。
我利用 fsnotify 套件來追蹤特定文件類型（HTML、CSS 和 JS）的變更。觀察者監聽任何修改，並在偵測到變更時將通知推送到重新載入通道：
func scanFileChanges() {
watcher, err := fsnotify.NewWatcher()
if err != nil {
log.Fatal(err)
}
defer watcher.Close()
for {
select {
case event := <-watcher.Events:
if event.Op&fsnotify.Write == fsnotify.Write && isTrackedFile(event.Name) {
log.Println("Modified File:", event.Name)
reloadChan <- true
}
case err := <-watcher.Errors:
log.Println("Error:", err)
}
}
}
並非每個檔案變更都應觸發重新加載，因此我新增了一個僅追蹤特定檔案副檔名的篩選器：.html、.css 和 .js。這是使用 filepath.Ext 函數檢查檔案類型來完成的：
func isTrackedFile(fileName string) bool {
ext := strings.ToLower(filepath.Ext(fileName))
return ext == ".html" || ext == ".css" || ext == ".js"
}
最後，我啟動了HTTP伺服器來監聽8000端口，並同時啟動了檔案觀看過程：
log.Println("Starting the server at: 8000")
log.Fatal(http.ListenAndServe(":8000", nil))
雖然此範例側重於重新加載靜態文件，但仍有很大的改進空間 - 例如添加 WebSocket 支援以實現更順暢的通信、更好的文件處理以及擴展跟踪文件列表。
只需幾行 Go 程式碼，我就能夠改進靜態 Web 開發的工作流程，我期待進一步完善這個工具。
查看程式碼：serve-it GitHub
以上是如何使用 Golang 創建簡單的即時伺服器擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！
