あなたがWeb開発者であり、vscodeでライブサーバー拡張機能を使用していない場合、あなたも開発者ですか？冗談です。しかし、あなたはそれがボンネットの下でどのように機能するかについて考えましたか？今日のブログでは、Golangを使用した実践的な実装でそれがどのように機能するかを理解してみましょう。なぜゴラン？さて、私は最近ゴランを探索していますが、プロジェクトを構築するよりも学ぶのが良いことは何ですか？十分なコンテキスト（Golangのコンテキストではありません）を始めましょう。

ライブサーバーはどのように機能しますか？

したがって、Live Serverは、HTML、CSS、またはJSファイルの変更を検出するたびにブラウザを自動的にリロードします。これらの静的ファイルをHTTPサーバーを介して提供することから始めました。フードでは、FSNotifyのようなファイルウォッチャー（プロジェクトにこれを使用します）、FSWATCH（UNIXベースのファイルシステム）、またはChokidar（NodeJS用）を使用して、プロジェクトのディレクトリをファイルの変更について継続的に監視します（基本的に拡張機能を備えたファイルを保存する場合。html、.css、.js）。

コアでは、（ノードJS）サーバーとブラウザの間のWebSocket接続を使用します。サーバーがファイルの変更を検出すると、WebSocketを介してブラウザにリロード通知を送信します。ブラウザは、ページをリロードして、行われている新しい変更を反映しています。さらに、JavaScriptモジュールにCSSインジェクション（フルリロードなしのスタイルのみを更新）、HMR（ホットモジュール交換）を使用します。これにより、開発者は、コードを変更するたびにブラウザを手動でリロードする必要なく、リアルタイムのフィードバックを取得します。

。

プロジェクトの概要

このプロジェクトでは、私のアイデアは同じでした。私の目標は、ファイルの変更（HTML、CSS、JavaScriptなど）を監視し、変更が検出されるたびにブラウザのリロードをトリガーすることでした。このために、Goの組み込みHTTPサーバーとFSNotifyパッケージを使用しました。これは、ファイルシステムイベントを効率的に監視します。

。

1。静的ファイルの提供

最初のステップは、ディレクトリから静的ファイルを提供するGOに単純なHTTPサーバーをセットアップすることでした。 HTML、CSS、JavaScriptなどの静的ファイルは、./staticフォルダーからロードされます。これはhttp.fileserverを使用して処理されます：

http.handle（ "/"、http.fileserver（http.dir（ "./ static"））））

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

2。エンドポイントをリロードします

次に、ファイルの変更が検出されたときにリロードするようにクライアントに通知するエンドポイントが必要でした。 /リロードルートはトリガーとして機能し、サーバーが変更を検出したときにブラウザに「リロード」メッセージを送信します：

http.handlefunc（ "/reload"、func（w http.responsewriter、r *http.request）{ http.Handle("/", http.FileServer(http.Dir("./static"))) このルートは、チャネル上のイベントに耳を傾けます。これは後にファイルの変更通知が入力されます。

3.ファイルの変更を見る

FSNotifyパッケージを活用して、特定のファイルタイプ（HTML、CSS、およびJS）の変更を追跡しました。ウォッチャーは変更を聴き、変更を検出したときにリロードチャネルに通知をプッシュします：

func scanfilechanges（）{ watcher、err：= fsnotify.newwatcher（） err！= nil { log.fatal（err） } defer watcher.close（） のために { select { ケースイベント：= http.Handle("/", http.FileServer(http.Dir("./static"))) 4.追跡されたファイルのフィルタリング

すべてのファイルの変更がリロードをトリガーするわけではないため、特定のファイル拡張子のみを追跡するフィルターを追加しました：.html、.css、および.js。これは、filepath.ext関数を使用してファイルタイプを確認しました：

func istrackedfile（filename string）bool { ext：= strings.tolower（filepath.ext（filename）） return ext == ".html" || ext == ".css" || ext == ".js" }

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

5。サーバーの実行

最後に、HTTPサーバーを起動してポート8000​​でリッスンし、プロセスを同時に監視するプロセスを開始しました。

log.println（ "サーバーの起動：8000"） log.fatal（http.listenandserve（ "：8000"、nil））

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

この例は静的ファイルのリロードに焦点を当てていますが、スムーズな通信のためのWebSocketサポートを追加し、ファイル処理を改善し、追跡されたファイルのリストの拡張など、改善の余地が十分にあります。

GOコードのほんの数行で、静的Web開発のためのワークフローを改善することができました。このツールをさらに改良することを楽しみにしています。

コードをチェックしてください：serve-it github