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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 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
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

Go Language는 효율적이고 확장 가능한 시스템을 구축하는 데 잘 작동합니다. 장점은 다음과 같습니다. 1. 고성능 : 기계 코드로 컴파일, 빠른 달리기 속도; 2. 동시 프로그래밍 : 고어 라틴 및 채널을 통한 멀티 태스킹 단순화; 3. 단순성 : 간결한 구문, 학습 및 유지 보수 비용 절감; 4. 크로스 플랫폼 : 크로스 플랫폼 컴파일, 쉬운 배포를 지원합니다.

Golang은 동시성에서 C보다 낫고 C는 원시 속도에서 Golang보다 낫습니다. 1) Golang은 Goroutine 및 Channel을 통해 효율적인 동시성을 달성하며, 이는 많은 동시 작업을 처리하는 데 적합합니다. 2) C 컴파일러 최적화 및 표준 라이브러리를 통해 하드웨어에 가까운 고성능을 제공하며 극도의 최적화가 필요한 애플리케이션에 적합합니다.

Golang과 Python은 각각 고유 한 장점이 있습니다. Golang은 고성능 및 동시 프로그래밍에 적합하지만 Python은 데이터 과학 및 웹 개발에 적합합니다. Golang은 동시성 모델과 효율적인 성능으로 유명하며 Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명합니다.

Golang은 성능과 확장 성 측면에서 Python보다 낫습니다. 1) Golang의 컴파일 유형 특성과 효율적인 동시성 모델은 높은 동시성 시나리오에서 잘 수행합니다. 2) 해석 된 언어로서 파이썬은 천천히 실행되지만 Cython과 같은 도구를 통해 성능을 최적화 할 수 있습니다.

Golang과 C는 각각 공연 경쟁에서 고유 한 장점을 가지고 있습니다. 1) Golang은 높은 동시성과 빠른 발전에 적합하며 2) C는 더 높은 성능과 세밀한 제어를 제공합니다. 선택은 프로젝트 요구 사항 및 팀 기술 스택을 기반으로해야합니다.

goimpactsdevelopmentpositively throughlyspeed, 효율성 및 단순성.

Golang과 C의 성능 차이는 주로 메모리 관리, 컴파일 최적화 및 런타임 효율에 반영됩니다. 1) Golang의 쓰레기 수집 메커니즘은 편리하지만 성능에 영향을 줄 수 있습니다. 2) C의 수동 메모리 관리 및 컴파일러 최적화는 재귀 컴퓨팅에서 더 효율적입니다.

C는 하드웨어 리소스 및 고성능 최적화가 직접 제어되는 시나리오에 더 적합하지만 Golang은 빠른 개발 및 높은 동시성 처리가 필요한 시나리오에 더 적합합니다. 1.C의 장점은 게임 개발과 같은 고성능 요구에 적합한 하드웨어 특성 및 높은 최적화 기능에 가깝습니다. 2. Golang의 장점은 간결한 구문 및 자연 동시성 지원에 있으며, 이는 동시성 서비스 개발에 적합합니다.
