Golang を使用してシンプルな Live Server Extension を作成する方法

あなたが Web 開発者で、VSCode の Live Server 拡張機能を使用したことがない場合、あなたは開発者ですか?冗談です。しかし、それが内部でどのように機能するか考えたことがありますか?今日のブログでは、Golang を使用した実践的な実装でそれがどのように機能するかを理解してみましょう。なぜゴランなのか？さて、私は最近 Golang を研究していますが、プロジェクトを構築すること以上に学ぶべきことは何でしょうか?それでは、十分なコンテキスト ( golang のコンテキストではありません) を理解して始めましょう。

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

そのため、ライブサーバーは、html、css、または js ファイルの変更を検出するたびに、ブラウザを自動的にリロードします。これは、HTTP サーバーを通じてこれらの静的ファイルを提供することから始まりました。内部では、 fsnotify (これをプロジェクトに使用します)、 fswatch (UNIX ベースのファイル システム)、または Chokidar (Nodejs 用) のようなファイル ウォッチャーを採用して、プロジェクトのディレクトリのファイル変更を継続的に監視します (基本的に、拡張子 .html、.css、.js を持つ任意のファイルを保存します) .

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

プロジェクト概要

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

1. 静的ファイルの提供

最初のステップは、ディレクトリから静的ファイルを提供する単純な HTTP サーバーを Go にセットアップすることでした。 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 を使用してシンプルな Live Server Extension を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。