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

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

Mary-Kate Olsen

リリース： 2024-09-26 15:56:29

オリジナル

381 人が閲覧しました

How to Create a Simple Live Server Extension Using Golang

あなたが 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) {
    <-reloadChan
    w.Write([]byte("reload"))
})

ログイン後にコピー

このルートはチャネル上のイベントをリッスンします。イベントは後でファイル変更通知によって設定されます。

3. ファイルの変更を監視する

私は 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)
        }
    }
}

ログイン後にコピー

4. 追跡されたファイルのフィルタリング

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

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 サイトの他の関連記事を参照してください。