實現大螢幕全國監控各地流量和負載質量

2021-09-04 22:49:08 字數 1525 閱讀 8137

我這裡就簡單實現乙個全域性的大螢幕監控。

這東西一般是好幾個人一塊搞的,有前端的,有後端的,最少也要兩個人。 條件有限,只能是對付了。

推薦乙個js  

對於前端,我自己想到了兩種的方案:

一種是用js聯合html5的新東西 svg 實現的地圖及熱點的展現。

下圖是我乙個專案中的測試截圖。

我們還需要把各個節點,用文字描述下。

對於這些資料,我們可以從前端搞,也可以用python的模版搞定。

推薦大家用tornado ,他的websocket算是高度整合,類似node.js和socket.io的樣子。   以前我用flask框架的時候,想做實時的監控,需要重新配置gevent。gevent有個websocket的核心。

用圖表描述下

用js地圖外掛程式,好搞點,但是需要js的知識,尤其網上沒有很好的demo,對我乙個運維來說,很是棘手,但還有echarts的文件算豐富。

源位址 :

這是乙個畫圖的介面,通過我訪問的位址大家可以看到經緯度和的大小,以及熱點哈。。。。

這裡的文件已經很好了,教我們該如何的使用。

引數名 必選  預設值 描述

center 否 北京 地圖中心點位置,引數可以為經緯度座標或名稱。座標格式:lng《經度》,lat《緯度》,例如116.43213,38.76623。

zoom 否 11 地圖級別。高畫質圖範圍[3, 18];低清圖範圍[3,19]

dpitype 否 pl 手機螢幕型別。取值範圍:,高分屏即呼叫高畫質地圖,低分屏為普通地圖。自v3後廢棄。

1表示返回的大小為size= width * height;

2表示返回為(width*2)*(height *2),且zoom加1

bbox 否 null 地圖視野範圍。格式:minx,miny;maxx,maxy。

markerstyles 否 null 與markers有對應關係。markerstyles可設定預設圖示樣式和自定義圖示樣式。其中設定預設圖示樣式時,可指定的屬性包括size,label和color;設定自定義圖示時,可指定的屬性包括url,注意,設定自定義圖示時需要先傳-1以此區分預設圖示。

labelstyles 否 null 標籤樣式 content, fontweight,fontsize,fontcolor,bgcolor, border。與labels一一對應。

pathstyles 否 null 折線樣式 color,weight,opacity[,fillcolor]。

大家可以把生成的url,放到html裡面 ~

關於後端的資料,那就靈活了 ~

我們可以用saltstack做監控,取到的資料,插入到資料庫裡面,然後頁面調取後端介面渲染頁面。做成實時的可以js控制重新整理時間。

當然也可以從cacti,zabbix裡面取資料再渲染頁面。

後端的做法是多種多樣的。

總結,前端後端實現過程,大家了解一二了吧,我想大家可以搞起啦~

實現大螢幕全國監控各地流量和負載質量

我這裡就簡單實現乙個全域性的大螢幕監控。這東西一般是好幾個人一塊搞的,有前端的,有後端的,最少也要兩個人。條件有限,只能是對付了。推薦乙個js 對於前端,我自己想到了兩種的方案 一種是用js聯合html5的新東西 svg 實現的地圖及熱點的展現。下圖是我乙個專案中的測試截圖。我們還需要把各個節點,用...

iftop flume 實現流量監控

安裝iftop,參考 flume配置。注意根據你的網絡卡情況修改f.sources.sr.iftopinte ce值。這裡配置了使用flume iftop source和http sink f.sinks.si.channel ch我們已經配置了flume使用http sink,所以用任意一種語言提...

C 實現遠端螢幕監控

在客戶端解取到螢幕之後,可以儲存為,但是要實現遠端監控的話,要把他儲存到流裡發給服務端,再顯示在服務端的picturebox裡,請問這中間怎麼傳輸,小弟在此先謝謝各位了,如下 我的email thify qq.com using system using system.collections.gen...