Go、HTMX、Web Socket を使用したシンプルなリアルタイム システム モニターの構築
私は Go、HTMX、Tailwwindcss を使用する楽しいプロジェクトを見つけて、最終的に Web ソケットの力を使ったシンプルなリアルタイム Web ベースのシステム モニターを構築しました。結果は次のとおりです。
システム情報、メモリ、ディスク、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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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