[[424685]]

本文轉(zhuǎn)載自微信公眾號(hào)「 Go 夜讀」，作者 Go 夜讀 。轉(zhuǎn)載本文請(qǐng)聯(lián)系 Go 夜讀公眾號(hào)。

今天跟大家介紹一款實(shí)時(shí)可視化 Go 程序運(yùn)行時(shí)數(shù)據(jù)統(tǒng)計(jì)的工具 statsviz

https://github.com/arl/statsviz 

它的圖形化展現(xiàn)對(duì)于我們了解 Go 程序的 GC 行為，以及內(nèi)存開銷等很有用!

使用也很簡(jiǎn)單：

1. go get github.com/arl/statsviz

2. 在你的 http.ServeMux 上注冊(cè)

mux := http.NewServeMux() 
statsviz.Register(mux) 

或者使用默認(rèn) http 注冊(cè)：

statsviz.RegisterDefault() 

如果你的程序不是一個(gè) http 應(yīng)用程序，那么你可以添加以下代碼來(lái)啟動(dòng)

go func() { 
    log.Println(http.ListenAndServe("localhost:6060", nil)) 
}() 

這段代碼，我相信大家都非常熟悉了吧~

當(dāng)我們將啟動(dòng)之后，我們可以直接在瀏覽器中打開：

http://localhost:6060/debug/statsviz/

看起來(lái)酷炫高大上，其實(shí)主要還是依賴于 Go 為我們提供的 runtime stats

具體我們來(lái)看看它的一些代碼：

1. websocket handler

// NewWsHandler returns a handler that upgrades the HTTP server connection to the WebSocket 
// protocol and sends application statistics at the given frequency. 
// 
// If the upgrade fails, an HTTP error response is sent to the client. 
func NewWsHandler(frequency time.Duration) http.HandlerFunc { 
 return func(w http.ResponseWriter, r *http.Request) { 
  var upgrader = websocket.Upgrader{ 
   ReadBufferSize:  1024, 
   WriteBufferSize: 1024, 
  } 
 
  ws, err := upgrader.Upgrade(w, r, nil) 
  if err != nil { 
   return 
  } 
  defer ws.Close() 
 
  // Explicitly ignore this error. We don't want to spam standard output 
  // each time the other end of the websocket connection closes. 
  _ = sendStats(ws, frequency) 
 } 
} 

2. sendStats

// sendStats indefinitely send runtime statistics on the websocket connection. 
func sendStats(conn *websocket.Conn, frequency time.Duration) error { 
 tick := time.NewTicker(frequency) 
 defer tick.Stop() 
 
 var ( 
  stats stats 
  err   error 
 ) 
 for range tick.C { 
  runtime.ReadMemStats(&stats.Mem) 
  stats.NumGoroutine = runtime.NumGoroutine() 
  if err = conn.WriteJSON(stats); err != nil { 
   break 
  } 
 } 
 
 return err 
} 

3. 其實(shí)這個(gè)項(xiàng)目比較核心的代碼是前端 JavaScript 代碼：

m.pushData = function (ts, allStats) { 
        data.times.push(ts); // timestamp 
 
        const memStats = allStats.Mem; 
 
        data.gcfraction.push(memStats.GCCPUFraction); 
        data.goroutines.push(allStats.NumGoroutine); 
 
        data.heap[idxHeapAlloc].push(memStats.HeapAlloc); 
        data.heap[idxHeapSys].push(memStats.HeapSys); 
        data.heap[idxHeapIdle].push(memStats.HeapIdle); 
        data.heap[idxHeapInuse].push(memStats.HeapInuse); 
        data.heap[idxHeapNextGC].push(memStats.NextGC); 
 
        data.mspanMCache[idxMSpanMCacheMSpanInUse].push(memStats.MSpanInuse); 
        data.mspanMCache[idxMSpanMCacheMSpanSys].push(memStats.MSpanSys); 
        data.mspanMCache[idxMSpanMSpanMSCacheInUse].push(memStats.MCacheInuse); 
        data.mspanMCache[idxMSpanMSpanMSCacheSys].push(memStats.MCacheSys); 
 
        data.objects[idxObjectsLive].push(memStats.Mallocs - memStats.Frees); 
        data.objects[idxObjectsLookups].push(memStats.Lookups); 
        data.objects[idxObjectsHeap].push(memStats.HeapObjects); 
 
        for (let i = 0; i < memStats.BySize.length; i++) { 
            const size = memStats.BySize[i]; 
            data.bySize[i].push(size.Mallocs - size.Frees); 
        } 
 
        updateLastGC(memStats); 
    } 

渲染效果是通過(guò) https://github.com/arl/statsviz/blob/master/static/plotly-basic.min.js 渲染所得。

Plotly.js 簡(jiǎn)介：它是一款開源的 JavaScript 圖表庫(kù)，它基于 d3.js 和 stack.gl 。是一個(gè)高層次的、描述性的圖表庫(kù)。plotly.js 帶來(lái) 20 種圖表類型，包括 3D 圖表，統(tǒng)計(jì)圖表，和 SVG 地圖。

我們來(lái)看一個(gè)官網(wǎng)示例，很酷炫

我們?cè)賮?lái)看看 statsviz 在 GitHub 倉(cāng)庫(kù)上提供的一些 demo 示意圖(方便大家來(lái)直觀的感受 statsviz)：

如果你已經(jīng)用過(guò)它或者有其他可視化工具，歡迎你來(lái)評(píng)論。