基于B/S架構的“齊魯風云”監控系統設計與實現

國婷婷，宋萍，任廣治，趙子龍，張越

（1.山東省氣象服務中心，山東 濟南 250031；2.濟南市氣象局，山東 濟南 250031；3.棗莊市氣象局，山東 棗莊 277000）

0 引 言

近年來，隨著移動互聯網技術的飛速發展以及氣象數據量的迅猛增長，氣象服務需求發生了重大改變，用戶希望能夠隨時隨地看到更多的氣象服務信息，氣象管理人員也需要及時向政府和行業用戶提供決策服務。有鑒于此，山東省氣象局自主研發了一款氣象服務產品“齊魯風云”APP。該軟件采用PHP、Javascript等匯編語言，基于用戶的實際需求實現了雷達云圖檢測、降水檢測、實況氣象信息、24小時精細等多個特色氣象服務產品。目前該軟件已經在山東各級氣象部門、各級政府決策部門以及服務行業用戶群中廣泛使用，對氣象工作人員和各行各業的使用者起到了重要的氣象指導作用。

伴隨著云計算、大數據技術的迅猛發展以及“齊魯風云”APP的不斷推廣，服務器中的數據量和數據種類逐漸增多，面對龐雜的數據傳輸，單純依靠人力監控是遠遠滿足不了用戶的服務需求的，在系統運維的過程中，管理員也必須時刻關注服務器的運行狀態。為了能夠及時發現問題，盡量減少故障的發生，亟需采用一種信息化的手段來時刻監督APP的運行。因此，本文將基于B/S架構開發“齊魯風云”APP的監控系統，以實時監控服務器的運行狀態、各模塊的數據傳輸狀況、用戶數量的變動以及訪問狀態的異常情況，確保APP能夠穩定持續地運行，切實提高APP的服務數據質量。

1 相關技術

1.1 B/S架構

B/S架構即瀏覽器/服務器架構模式，是一個三層架構，包括應用層、業務邏輯層和數據管理層。B/S架構相較于C/S架構具有異地瀏覽和信息采集靈活的優點，用戶只需安裝瀏覽器即可，無需另外安裝客戶端。當需要改變應用邏輯時，只需更新服務器端的應用程序即可，同時客戶端不受操作系統的限制，通過主流Chrome、IE、Edge、火狐瀏覽器就可以訪問服務器端的程序并實現數據交互。與C/S架構相比，B/S架構能夠消除數據庫瓶頸，方便管理人員維護，而且瀏覽器與服務器可直接進行數據輸入輸出交換，大大減小了本地終端的壓力，降低了系統維護的成本。

1.2 異步更新技術

異步更新技術（Asynchronous javascript and xml, Ajax）包括HTML、CSS、JavaScript、DOM、XML和XSLT等技術。使用Ajax技術網頁無需刷新頁面即可向服務器傳輸或讀寫數據，該操作方法可以使程序更快地響應用戶的請求。Ajax輪詢請求則是客戶端定時向服務端發送Ajax請求，服務器在接收到請求后即刻返回響應信息并關閉連接，然后客戶端繼續發送Ajax請求，循環往復。

2 系統設計

2.1 框架設計

根據山東省專業行業氣象服務要求，采用B/S架構模式，基于服務器狀態、衛星云圖、雷達監測、實況等數據，建立集數據監控、服務器狀態監控及用戶訪問量監控于一體的“齊魯風云”監控系統，實現對數據傳輸的實時監控以及對服務器狀態的可視化展示，以便工作人員及時發現問題，從而更好地為氣象工作人員和各級政府部門提供決策支撐。

如圖1所示，系統總體架構由數據管理層、業務邏輯層和應用層三部分組成。數據管理層采用MySQL作為監控數據的存儲系統，用于收集和保存各個模塊的監測數據，基于數據庫管理技術實現對入庫數據的管控，實現應用層的各種數據請求，為系統提供基礎的數據及用戶信息；業務邏輯層使用PHP、shell等開發語言，采用Ajax輪詢的方式讓瀏覽器定時發送請求詢問服務器是否有新信息，定時檢測數據庫、數據文件傳輸及服務器狀態信息，為應用層提供服務器狀態查詢、數據入庫時間查詢、用戶訪問量查詢等服務；應用層是基于數據管理層和業務邏輯層而構建的“齊魯風云”監控系統，采用HTML5、Javascript、CSS等開發語言進行編寫，使用HTML編寫頁面的基本框架，采用CSS對頁面系統進行美化，使用Javascript編寫腳本實現對HTML元素的讀入以及對瀏覽器事件的響應，頁面中的可視化圖表采用Echarts組件，以便直觀生動地為用戶提供服務器狀態、數據入庫時間、用戶訪問量展示等服務，實現對服務器和數據傳輸的實時監控，為專業氣象服務提供有力的技術支撐。

圖1 系統總體架構

2.2 功能設計

“齊魯風云”監控系統是基于HTML5標準建設的Web服務端，采用Echarts插件實現對服務器狀態、內存使用情況等信息的動態顯示，采用Web GIS技術實現對不同地區用戶訪問信息的展示，旨在為各行業工作人員提供更好的專業氣象服務，實現對“齊魯風云”服務器和各類氣象數據的實時監控，實現對軟件用戶的系統管理，主要的系統功能為：

（1）服務器狀態。動態顯示服務器的開機時間、CPU使用情況、系統進程、內存使用量及各磁盤空間等服務器狀態信息，以便工作人員隨時了解服務器狀態，及時處理因服務器狀態不佳而帶來的軟件問題。

（2）用戶信息管理。顯示用戶的注冊量和日訪問量，以及在地圖上動態顯示各個地區的用戶使用情況，以不同大小的圖標來顯示各地區的用戶使用量，當鼠標指在某區域時會顯示該地區的用戶活躍量。

（3）數據信息管理。管理衛星云圖、雷達拼圖、環境預報等氣象數據的入庫時間，如若數據沒有按照規定的時間（即超出了設定的時間閾值）到達指定文件夾，系統則會顯示異常警告，同時發出告警聲音提示。

3 系統功能實現與應用

3.1 數據庫設計

齊魯風云監控系統采用MySQL作為開發平臺，構建氣象監控系統基礎數據庫，根據系統需求來區分，其核心數據庫主要包括3個數據表，分別為用戶信息表、數據信息表、服務器狀態信息表，數據庫表結構如表1所示。

表1 數據庫表結構

用戶信息表主要存儲用戶的注冊信息及使用信息，表中的主要字段有id（用戶名）、tellphone（手機號）、Registration_time（注冊時間）、use_time（最近使用時間）；數據信息表主要儲存齊魯風云APP的各類氣象數據信息及入庫時間信息，主要字段有data_name（數據名稱）、type（數據類型）、create_time（數據入庫時間）；服務器狀態信息表主要存儲服務器不同時刻的狀態信息，該表中的主要字段有時間編號（time_code）、剩余內存量（free_memory）、剩余CPU（free_cpu）。

3.2 服務端實現

使用php、shell開發語言，通過Ajax輪詢技術查看服務器是否有新信息，定時檢測服務器狀態及數據庫、數據文件的傳輸狀態；采用MySQL作為監控數據的存儲系統，對收集到的新數據執行入庫操作，以供前端的調取展示。客戶端從瀏覽頁面上請求服務器查詢SQL數據，服務器接收到命令后，響應客戶端的要求建立數據連接，最終將相應數據展示到瀏覽器頁面中。檢測數據傳輸狀態的核心代碼為：

3.3 前端實現

前端采用html5+Javascript+css開發語言，實現服務器狀態、用戶信息及數據傳輸信息的展示。基于后端查詢到的信息及閾值的判斷，將在前端展示預警信息，以便工作人員及時處理突發狀況。主要的功能模塊如下：

（1）服務器狀態模塊。查詢當前時刻服務器狀態信息（主要包括服務器的開機時長、CPU占用情況、內存剩余量、進程數等）并將其展示在主頁面上。同時針對CPU使用情況、內存占用情況及各磁盤空間，采用Echarts技術制作可視化餅圖、柱狀圖等展示于首頁，以便更加清晰明了地展示服務器狀態信息。服務器狀態查詢的核心代碼為：

（2）用戶信息模塊。用戶信息模塊用于展示當前用戶量、今日訪問量以及活躍用戶的地區分布。其中，用戶量及今日訪問量信息從sdqx_user數據表中獲取，會員活躍度信息則通過調取山東地圖的Js文件展示于用戶信息模塊，并可通過Web GIS技術將其反映在地圖上，以便直觀地顯示各地區用戶的使用量。用戶信息可通過查詢數據庫獲得，部分代碼為：

（3）數據傳輸信息模塊。數據傳輸信息模塊用于展示各氣象數據是否按時到達數據庫，由此可以看出APP上各數據是否按時更新。通過檢查各個氣象數據的入庫時間，并以之前設置的報警閾值作為參考標準，若超出閾值，則會發出異常警告，工作人員可根據警報信息及時處理相應的問題，從而為行業用戶提供更好的氣象服務，數據采集顯示方式如圖2所示。

圖2 數據傳輸情況圖

3.4 實際應用

為了統計齊魯風云APP的用戶使用信息以及動態監控服務器的狀態信息和數據傳輸情況，本文基于B/S架構開發了“齊魯風云”監控系統，系統應用顯示如圖3所示，主要包括服務器狀態、用戶信息管理及數據傳輸情況三大部分，從可視化的監控界面中可以直觀地看到系統的運維狀況，當服務器運行異常或出現數據傳輸不及時等問題時，監控系統可自動彈出報警信息，大大減少了運維人員的工作量，為APP的平穩運行奠定了堅實的技術基礎。

4 結 論

為了更好地提供專業氣象服務，本文在“齊魯風云”APP的基礎上，繼續開發了基于B/S架構的監控管理系統。運用數據庫建設、Ajax輪詢、Web GIS和Echarts可視化等技術，對服務器的運行狀態、用戶的使用情況以及各類氣象數據是否正常等進行了全方位的監控，實現了對各類氣象數據和服務器狀態的實時可視化監測，切實提高了APP的服務質量，同時大大減少了運維工作人員的工作量，為專業氣象服務奠定了堅實的技術基礎。

圖3 齊魯風云監控系統