使用 Go、HTMX 和 Web Socket 构建简单的实时系统监视器

我正在寻找一个可以与 Go、HTMX 和 Tailwwindcss 配合使用的有趣项目，最终利用 Web 套接字的功能构建了一个简单的基于 Web 的实时系统监视器。这是结果。

它显示系统信息、内存、磁盘、CPU 和正在运行的进程，每 5 秒自动更新一次。

我将在这篇文章中对代码进行一些分解。

堆栈

• 去1.23.2
• Htmx
• Tailwindcss
• Gopsutil
• Websocket
• 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.ServeMux 作为 http 处理程序和稍后用于 Web 套接字广播的订阅者。订阅者只是有用于数据更新的消息通道。

由于它只需要提供单个 HTML 文件，因此它需要 URL 来显示页面，以及一个用于 Web 套接字连接的 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
}

Web Socket 连接和订阅者

端点 /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 := 



<h2>
  
  
  自动更新
</h2>

<p>自动更新系统信息数据由 goroutine 处理。我们将构建一个 html 响应，该响应将通过 Web 套接字发送，htmx 将处理 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)
    // ...
}

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 



<h2>
  
  
  HTMX 视图
</h2>

<p>这是纯 HTML 文件，对于 Tailwindcss 我简单地使用了 CDN <br>
</p>

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

HTMX 和使用 CDN 的 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 套接字接收所有数据，以便我可以从主 div 容器中设置它。指定 hx-ext=”ws” 告诉 HTMX 使用 Web 套接字扩展，指定 ws-connect=”/ws” 告诉 Web 套接字通过 /ws URL 连接。

<h2>
  
  
  完整代码
</h2>

<p>这是代码的完整版本 https://github.com/didikz/gosysmon-web，您可能想尝试一下自己的版本。</p>

<p>编码愉快！</p>


          

以上是使用 Go、HTMX 和 Web Socket 构建简单的实时系统监视器的详细内容。更多信息请关注PHP中文网其他相关文章！