Go, HTMX 및 웹 소켓을 사용하여 간단한 실시간 시스템 모니터 구축

Go, HTMX, Tailwwindcss를 사용하여 작업할 수 있는 재미있는 프로젝트를 찾던 중 웹 소켓의 힘을 활용한 간단한 실시간 웹 기반 시스템 모니터를 구축하게 되었습니다. 결과는 다음과 같습니다.

시스템 정보, 메모리, 디스크, CPU, 실행 중인 프로세스 정보를 보여주며 5초마다 자동으로 업데이트됩니다.

이번 포스팅에서는 코드를 조금 분석하겠습니다.

스택

• 1.23.2로 이동
• Htmx
• Tailwindcss
• Gopsutil
• 웹소켓
• Htmx 웹소켓 확장

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가 포함되어 있습니다. 구독자는 단순히 데이터 업데이트를 위한 메시지 채널을 가지고 있습니다.

단일 HTML 파일만 제공하면 되므로 페이지를 표시할 URL과 웹 소켓 연결을 위한 URL이 하나 필요합니다.

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
}

웹 소켓 연결 및 구독자

엔드포인트 /ws는 웹 소켓 연결을 처리하고 구독자를 관리합니다. 먼저 새 구독자를 시작하고 이를 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)
}

웹 소켓이 연결 수락을 시작하고 루프를 통해 구독자로부터 들어오는 채널 메시지를 감지하여 웹 소켓에 씁니다.

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 루틴에 의해 처리됩니다. 우리는 웹 소켓을 통해 전송될 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 구성요소는 브로드캐스트(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 및 웹 소켓 확장에 대한 동일한 아이디어입니다.

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

웹 소켓에 연결하는 방법은 무엇입니까?

시스템 모니터 페이지는 웹 소켓을 통해 모든 데이터를 수신하므로 기본 div 컨테이너에서 설정할 수 있습니다. HTMX에 웹 소켓 확장을 사용하도록 지시하려면 hx-ext=”ws”를 지정하고 웹 소켓에 /ws URL을 통해 연결하도록 지시하려면 ws-connect=”/ws”를 지정하십시오.

<본문>



<h2>
  
  
  전체 코드
</h2>

<p>코드의 전체 버전은 https://github.com/didikz/gosysmon-web이며 자신만의 버전을 사용해 볼 수도 있습니다.</p>

<p>즐거운 코딩하세요!</p>


          

위 내용은 Go, HTMX 및 웹 소켓을 사용하여 간단한 실시간 시스템 모니터 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!