如何使用 Golang 創建簡單的即時伺服器擴展

如果您是 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 套件，它可以有效地監視檔案系統事件。

1. 提供靜態文件

第一步是在 Go 中設定一個簡單的 HTTP 伺服器，為目錄中的靜態檔案提供服務。靜態檔案（例如 HTML、CSS 和 JavaScript）將從 ./static 資料夾載入。這是使用 http.FileServer 處理的：

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

2. 重新載入端點

接下來，我需要一個端點，在偵測到檔案變更時通知客戶端重新載入。 /reload 路由充當觸發器，當伺服器偵測到修改時向瀏覽器發送「重新載入」訊息：

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



<p>此路由偵聽通道上的事件，稍後將透過檔案變更通知填入該事件。 </p>

<h2>
  
  
  3. 觀察文件變化
</h2>

<p>我利用 fsnotify 套件來追蹤特定文件類型（HTML、CSS 和 JS）的變更。觀察者監聽任何修改，並在偵測到變更時將通知推送到重新載入通道：<br>
</p>

<pre class="brush:php;toolbar:false">func scanFileChanges() {
    watcher, err := fsnotify.NewWatcher()
    if err != nil {
        log.Fatal(err)
    }
    defer watcher.Close()

    for {
        select {
        case event := 



<h2>
  
  
  4. 過濾追蹤文件
</h2>

<p>並非每個檔案變更都應觸發重新加載，因此我新增了一個僅追蹤特定檔案副檔名的篩選器：.html、.css 和 .js。這是使用 filepath.Ext 函數檢查檔案類型來完成的：<br>
</p>

<pre class="brush:php;toolbar:false">func isTrackedFile(fileName string) bool {
    ext := strings.ToLower(filepath.Ext(fileName))
    return ext == ".html" || ext == ".css" || ext == ".js"
}

5. 運行伺服器

最後，我啟動了HTTP伺服器來監聽8000端口，並同時啟動了檔案觀看過程：

log.Println("Starting the server at: 8000")
log.Fatal(http.ListenAndServe(":8000", nil))

最後的想法

雖然此範例側重於重新加載靜態文件，但仍有很大的改進空間 - 例如添加 WebSocket 支援以實現更順暢的通信、更好的文件處理以及擴展跟踪文件列表。

只需幾行 Go 程式碼，我就能夠改進靜態 Web 開發的工作流程，我期待進一步完善這個工具。

查看程式碼：serve-it GitHub

以上是如何使用 Golang 創建簡單的即時伺服器擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章！