Membina Monitor Sistem Masa Nyata Mudah menggunakan Go, HTMX dan Soket Web

Saya sedang mencari projek yang menyeronokkan untuk bekerja dengan Go, HTMX dan Tailwwindcss dan akhirnya membina monitor sistem berasaskan web masa nyata yang ringkas dengan kuasa soket web. Inilah hasilnya.

Ia menunjukkan maklumat sistem, ingatan, cakera, CPU dan proses berjalan, dikemas kini secara automatik setiap 5 saat.

Saya akan pecahkan sedikit kod dalam siaran ini.

Tumpukan

• Pergi 1.23.2
• Htmx
• Tailwindcss
• Gopsutil
• Soket web
• Sambungan soket web Htmx

Pelayan HTTP

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

type subscriber struct {
    msgs chan []byte
}

Ia agak mudah. HttpServer mengandungi http.ServeMux sebagai pengendali http dan pelanggan untuk penyiaran soket web kemudian. pelanggan hanya mempunyai saluran mesej untuk kemas kini data.

Memandangkan ia hanya perlu menyediakan satu fail HTML, maka ia memerlukan URL untuk menunjukkan halaman dan satu URL untuk sambungan soket web.

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
}

Sambungan & Pelanggan Soket Web

Endpoint /ws akan mengendalikan sambungan soket web dan mengurus pelanggan. Mula-mula ia akan memulakan pelanggan baharu dan menambahkannya pada peta dalam struktur pelayan http. Kunci akan digunakan untuk mengelakkan keadaan perlumbaan kerana kami akan menggunakan rutin pergi kemudian.

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

Soket web mula menerima sambungan dan melalui gelung, kami akan mengesan mesej saluran masuk daripada pelanggan dan menulisnya ke soket 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 := 



<h2>
  
  
  Kemas Kini Auto
</h2>

<p>Auto kemas kini data maklumat sistem dikendalikan oleh rutin pergi. Kami akan membina respons html yang akan dihantar melalui soket web dan htmx akan mengendalikan kemas kini pada bahagian html.<br>
</p>

<pre class="brush:php;toolbar:false">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)
    // ...
}

Sintaks hx-swap-oob="innerHTML:#data-timestamp" dalam htmx memberitahu kami bahawa menukar komponen di dalam id cap masa data dalam HTML kami. Semua mekanisme pertukaran adalah sama untuk komponen maklumat sistem yang lain.

Semua komponen html boleh tukar akan dihantar melalui kaedah Siaran(msg) dan kemudian akan dihantar melalui saluran setiap 5 saat.

func (s *HttpServer) Broadcast(msg []byte) {
    s.subscribersMutex.Lock()
    for subscriber := range s.subscribers {
        subscriber.msgs 



<h2>
  
  
  Pandangan HTMX
</h2>

<p>Ia adalah fail HTML biasa dan untuk Tailwindcss saya mudah menggunakan CDN untuk itu<br>
</p>

<pre class="brush:php;toolbar:false"><script src="https://cdn.tailwindcss.com"></script>

Idea yang sama untuk HTMX dan sambungan soket web untuk menggunakan CDN.

<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>

Bagaimana hendak menyambung ke soket web?

Halaman monitor sistem dijangka menerima semua data melalui soket web supaya saya boleh menetapkannya daripada bekas div utama. Tentukan hx-ext=”ws”untuk memberitahu HTMX kerana menggunakan sambungan soket web dan ws-connect=”/ws” untuk memberitahu soket web supaya menyambung melalui URL /ws.

<badan>



<h2>
  
  
  Kod Penuh
</h2>

<p>Berikut ialah versi penuh kod https://github.com/didikz/gosysmon-web dan anda mungkin mahu bermain-main dengan versi anda sendiri.</p>

<p>Selamat pengekodan!</p>


          </badan>

Atas ialah kandungan terperinci Membina Monitor Sistem Masa Nyata Mudah menggunakan Go, HTMX dan Soket Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!