ホームページ バックエンド開発 Golang Go、HTMX、Web Socket を使用したシンプルなリアルタイム システム モニターの構築

Go、HTMX、Web Socket を使用したシンプルなリアルタイム システム モニターの構築

Nov 21, 2024 am 11:37 AM

私は Go、HTMX、Tailwwindcss を使用する楽しいプロジェクトを見つけて、最終的に Web ソケットの力を使ったシンプルなリアルタイム Web ベースのシステム モニターを構築しました。結果は次のとおりです。

Building Simple Real-Time System Monitor using Go, HTMX, and Web Socket

システム情報、メモリ、ディスク、CPU、実行中のプロセスが表示され、5 秒ごとに自動的に更新されます。

この投稿ではコードを少し詳しく説明します。

スタック

  • 1.23.2 に進みます
  • HTML
  • 追い風
  • ゴプスティル
  • ウェブソケット
  • Htmx WebSocket 拡張機能

HTTPサーバー

type HttpServer struct {
    subscriberMessageBuffer int
    Mux                     http.ServeMux
    subscribersMutex        sync.Mutex
    subscribers             map[*subscriber]struct{}
}

type subscriber struct {
    msgs chan []byte
}
ログイン後にコピー

それは非常に簡単です。 HttpServer には、http ハンドラーとして http.ServeMux が含まれており、後で Web ソケット ブロードキャストを行うためのサブスクライバーも含まれています。加入者はデータ更新用のメッセージ チャネルを持っているだけです。

単一の HTML ファイルを提供するだけでよいため、ページを表示するための URL と、Web ソケット接続用の URL が 1 つ必要です。

func NewHttpServer() *HttpServer {
    s := &HttpServer{
        subscriberMessageBuffer: 10,
        subscribers:             make(map[*subscriber]struct{}),
    }

    s.Mux.Handle("/", http.FileServer(http.Dir("./views")))
    s.Mux.HandleFunc("/ws", s.subscribeHandler)
    return s
}
ログイン後にコピー

Web ソケット接続とサブスクライバー

エンドポイント /ws は Web ソケット接続を処理し、サブスクライバーを管理します。まず、新しいサブスクライバを開始し、それを http サーバー構造のマップに追加します。後で go ルーチンを使用するため、ロックは競合状態を防ぐために使用されます。

func (s *HttpServer) subscribeHandler(w http.ResponseWriter, r *http.Request) {
    err := s.subscribe(r.Context(), w, r)
    if err != nil {
        fmt.Println(err)
        return
    }
}

func (s *HttpServer) addSubscriber(subscriber *subscriber) {
    s.subscribersMutex.Lock()
    s.subscribers[subscriber] = struct{}{}
    s.subscribersMutex.Unlock()
    fmt.Println("subscriber added", subscriber)
}
ログイン後にコピー

Web ソケットは接続の受け入れを開始しており、ループを介してサブスクライバーからの受信チャネル メッセージを検出し、それを Web ソケットに書き込みます。

func (s *HttpServer) subscribe(ctx context.Context, w http.ResponseWriter, r *http.Request) error {
    var c *websocket.Conn
    subscriber := &subscriber{
        msgs: make(chan []byte, s.subscriberMessageBuffer),
    }

    s.addSubscriber(subscriber)

    c, err := websocket.Accept(w, r, nil)
    if err != nil {
        return err
    }

    defer c.CloseNow()

    ctx = c.CloseRead(ctx)
    for {
        select {
        case msg := <-subscriber.msgs:
            ctx, cancel := context.WithTimeout(ctx, time.Second)
            defer cancel()
            err := c.Write(ctx, websocket.MessageText, msg)
            if err != nil {
                return err
            }
        case <-ctx.Done():
            return ctx.Err()
        }
    }
}

ログイン後にコピー

自動更新

システム情報データの自動更新は go ルーチンによって処理されます。 Web ソケット経由で送信される HTML 応答を構築し、htmx が HTML 側の更新を処理します。

func main() {
    fmt.Println("Starting system monitor")
    s := server.NewHttpServer()

    go func(s *server.HttpServer) {
        for {
            hostStat, _ := host.Info()
            timestamp := time.Now().Format("2006-01-02 15:04:05")
            html := `
            <span hx-swap-oob="innerHTML:#data-timestamp">` + timestamp + `</span>
            <span hx-swap-oob="innerHTML:#system-hostname">` + hostStat.Hostname + `</span>
            <span hx-swap-oob="innerHTML:#system-os">` + hostStat.OS + `</span>
            `
            s.Broadcast([]byte(html))
            time.Sleep(time.Second * 5)
        }
    }(s)
    // ...
}
ログイン後にコピー

htmx の構文 hx-swap-oob="innerHTML:#data-timestamp" は、HTML の data-timestamp ID 内のコンポーネントを交換することを示します。すべてのスワッピング メカニズムは、他のシステム情報コンポーネントでも同じです。

すべてのスワップ可能な HTML コンポーネントは、Broadcast(msg) メソッドを介して送信され、その後は 5 秒ごとにチャネルを介して送信されます。

func (s *HttpServer) Broadcast(msg []byte) {
    s.subscribersMutex.Lock()
    for subscriber := range s.subscribers {
        subscriber.msgs <- msg
    }
    s.subscribersMutex.Unlock()
}
ログイン後にコピー

HTMX ビュー

これはプレーンな HTML ファイルであり、Tailwindcss の場合は単純に CDN を使用しました

<script src="https://cdn.tailwindcss.com"></script>
ログイン後にコピー

CDN を使用するための HTMX と Web ソケット拡張についても同じ考えです。

<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx-ext-ws@2.0.1/ws.js"></script>
ログイン後にコピー

Webソケットに接続するにはどうすればよいですか?

システム モニター ページは Web ソケットですべてのデータを受信することが想定されているため、メインの div コンテナーから設定できます。 Web ソケット拡張機能を使用するように HTMX に指示するには hx-ext=”ws” を指定し、Web ソケットに /ws URL 経由で接続するように指示するには ws-connect=”/ws” を指定します。




<h2>
  
  
  完全なコード
</h2>

<p>コードの完全版は https://github.com/didikz/gosysmon-web です。独自のバージョンを試してみることもできます。</p>

<p>コーディングを楽しんでください!</p>


          
ログイン後にコピー

以上がGo、HTMX、Web Socket を使用したシンプルなリアルタイム システム モニターの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Golangの目的:効率的でスケーラブルなシステムの構築 Golangの目的:効率的でスケーラブルなシステムの構築 Apr 09, 2025 pm 05:17 PM

GO言語は、効率的でスケーラブルなシステムの構築においてうまく機能します。その利点には次のものがあります。1。高性能:マシンコードにコンパイルされ、速度速度が速い。 2。同時プログラミング:ゴルチンとチャネルを介してマルチタスクを簡素化します。 3。シンプルさ:簡潔な構文、学習コストとメンテナンスコストの削減。 4。クロスプラットフォーム:クロスプラットフォームのコンパイル、簡単な展開をサポートします。

Golang and C:Concurrency vs. Raw Speed Golang and C:Concurrency vs. Raw Speed Apr 21, 2025 am 12:16 AM

Golangは並行性がCよりも優れていますが、Cは生の速度ではGolangよりも優れています。 1)Golangは、GoroutineとChannelを通じて効率的な並行性を達成します。これは、多数の同時タスクの処理に適しています。 2)Cコンパイラの最適化と標準ライブラリを介して、極端な最適化を必要とするアプリケーションに適したハードウェアに近い高性能を提供します。

Golang vs. Python:重要な違​​いと類似点 Golang vs. Python:重要な違​​いと類似点 Apr 17, 2025 am 12:15 AM

GolangとPythonにはそれぞれ独自の利点があります。Golangは高性能と同時プログラミングに適していますが、PythonはデータサイエンスとWeb開発に適しています。 Golangは同時性モデルと効率的なパフォーマンスで知られていますが、Pythonは簡潔な構文とリッチライブラリエコシステムで知られています。

Golang vs. Python:パフォーマンスとスケーラビリティ Golang vs. Python:パフォーマンスとスケーラビリティ Apr 19, 2025 am 12:18 AM

Golangは、パフォーマンスとスケーラビリティの点でPythonよりも優れています。 1)Golangのコンピレーションタイプの特性と効率的な並行性モデルにより、高い並行性シナリオでうまく機能します。 2)Pythonは解釈された言語として、ゆっくりと実行されますが、Cythonなどのツールを介してパフォーマンスを最適化できます。

パフォーマンスレース:ゴラン対c パフォーマンスレース:ゴラン対c Apr 16, 2025 am 12:07 AM

GolangとCにはそれぞれパフォーマンス競争において独自の利点があります。1)Golangは、高い並行性と迅速な発展に適しており、2)Cはより高いパフォーマンスと微細な制御を提供します。選択は、プロジェクトの要件とチームテクノロジースタックに基づいている必要があります。

Golangの影響:速度、効率、シンプルさ Golangの影響:速度、効率、シンプルさ Apr 14, 2025 am 12:11 AM

speed、効率、およびシンプル性をspeedsped.1)speed:gocompilesquilesquicklyandrunseffictient、理想的なlargeprojects.2)効率:等系dribribraryreducesexexternaldedenciess、開発効果を高める3)シンプルさ:

CとGolang:パフォーマンスが重要な場合 CとGolang:パフォーマンスが重要な場合 Apr 13, 2025 am 12:11 AM

Cは、ハードウェアリソースと高性能の最適化が必要なシナリオにより適していますが、Golangは迅速な開発と高い並行性処理が必要なシナリオにより適しています。 1.Cの利点は、ハードウェア特性と高い最適化機能に近いものにあります。これは、ゲーム開発などの高性能ニーズに適しています。 2.Golangの利点は、その簡潔な構文と自然な並行性サポートにあり、これは高い並行性サービス開発に適しています。

GolangとC:パフォーマンスのトレードオフ GolangとC:パフォーマンスのトレードオフ Apr 17, 2025 am 12:18 AM

GolangとCのパフォーマンスの違いは、主にメモリ管理、コンピレーションの最適化、ランタイム効率に反映されています。 1)Golangのゴミ収集メカニズムは便利ですが、パフォーマンスに影響を与える可能性があります。

See all articles