網絡節點管理系統的富客戶端架構設計

中國電子科技集團公司第七研究所 童惠祺 廖永行

近年來隨著以5G為代表的通信技術快速發展，網絡架構呈現出逐漸趨于多樣化，開放化，并不斷快速演變的特點，人們對網絡信息的可視化要求呈現出多元化、精細化的特點，既有對網絡全局如全局拓撲結構、故障分布等綜合態勢呈現要求，又需要具體到網絡中一些細微的局部如某個單片機網元設備的運行狀態，某條鏈路上的可用帶寬等。本文參考了目前國內外Web軟件的研發模式，借鑒了國內先進的Web管理系統，采用目前流行的前端工程化技術棧，為網絡節點管理系統設計了基于富客戶端應用架構，有針對性的解決了既可以用豐富的多媒體形式實現了網絡節點數據可視化需求，同時盡可能少的占用部署設備的計算機資源的問題。

富因特網應用程序（Rich Internet Applications，RIA）簡稱富客戶端(Rich Client)是近些年來在IT業內被廣泛采用的一種We應用架構模式，無論在互聯網應用領域還是企業內部應用領域都有很多成功案例。其利用具有很強交互性的富客戶端技術來為用戶提供一個更高和更全方位的網絡體驗，同時兼顧了桌面應用的交互性和傳統Web應用的部署靈活性，是一種安全的、可升級的、具有良好適應性的面向架構模型。

與傳統的Web架構及桌面應用相比，富客戶端應用的優勢如表1所示。

表1 富客戶端應用優勢

1 系統目標與需求分析

本文研究基于富客戶端架構開發網絡節點管理系統的相關技術，網絡節點管理系統是指在分布式架構的網管管理系統軟件中，位于中心網絡管理系統之下，負責管理網絡中一個特定的部分，并將管理的網絡信息向中心網絡管理系統匯報。相比于中心節點管理軟件，節管軟件往往在分布式系統中存在多個對等節點，且根據需要部署在車輛、基站、機房等不同硬件環境下，很多場景下無僅供節管系統部署的獨立的服務器設備，需要與通訊系統軟件或業務系統軟件共同部署在同一設備上，因此需要精心設計其服務器端的資源占用算法，同時兼顧管理、通訊、業務等多項指標平穩運行。

根據需求，對系統進行分析，系統需要滿足以下目標：

（1）使用B/S架構，支持用戶使用瀏覽器對系統進行訪問。

（2）能呈現多種風格的媒體資源，如：2D拓撲結構、3D設備模型、GIS地圖、監控視頻、Chart統計圖表。

（3）能兼容不同尺寸的屏幕設備，如臺式機屏幕、筆記本、手持終端、大屏設備等。

（4）后端部署能兼容各種操作系統環境如Windows、Linux以及國產化的中標麒麟、銀河麒麟等操作系統。

（5）能靈活利用客戶端、服務器端的計算資源，當服務器端資源受限時，將部分運算任務切換至客戶端中進行，但客戶端資源受限時，也可以遷移回服務器端，做到運行時切換。

2 系統的架構設計

系統采用B/S架構，各部分功能如圖1所示。

圖1 系統架構示意圖

訪問層、前端適配層：各種終端設備通過視圖適配層，訪問頁面視圖，視圖適配層根據分析請求信息判斷客戶端屏幕類型，采用響應式布局方案渲染與客戶端匹配的頁面視圖。

前端視圖層：應用HTML5豐富的前端生態技術棧，以不同的媒體形式進行多維度的信息展示，包括但不限于：應用Canvas畫布技術渲染2D拓撲結構樹、應用WebGL技術渲染3D設備模型、應用地圖API繪制GIS地圖，應用WebRTC播放音視頻流。

交互層：前端與用戶操作響應交互的邏輯代碼實現的部分，應用MVVM架構模型設計，采用Vue技術進行代碼模塊分割，vuex技術進行程序狀態管理、vue-router技術進行前端路由。

服務策略層：交互層通過服務策略層訪問服務層的方法，服務策略層是服務層的抽象實現，策略層可以根據需要將對服務層的訪問運行時切換至客戶端或服務端進行。

服務層：包括前端服務層與后端服務層兩部分，前端服務層運行與客戶端，后端服務層運行與服務器端，由服務策略層控制將對服務方法的調用分配到哪個模塊實現。

后端應用：由node技術實現，將業務邏輯包裝成Web服務對外提供訪問，由Node虛擬機環境適配底層操作系統，后端業務邏輯代碼針對虛擬機標準編寫即可，即“一次編譯、到處運行”。

3 關鍵技術

3.1 服務層代碼動態切換技術

為了使富客戶端Java Script可以在服務器正確運行，首先需要實現服務器與富客戶端JavaScript上下文環境的對接.這要求服務器支持JavaScript這一客戶端腳本語言的運行，而Nodejs虛擬機中內置的V8解釋器引擎正是對這一機制的實現。javascript代碼模塊在不使用宿主對象時（如瀏覽器環境下的Dom對象、服務器環境下的fs對象時），在兩種環境下運算的結果是相同的。

見圖2所示代碼工程結構，在源代碼工程設計時，應將服務層代碼作為公共工程建立，前端工程與后端工程分別通過npm源代碼包管理工具對服務工程進行依賴引用，這樣在打包時服務工程可以分別參與前端和后端的打包過程，在打包出來的可運行代碼中，前后端分別包括服務層模塊部分。

圖2 代碼工程結構

3.2 響應式布局技術

響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個視圖頁面能夠兼容多個終端——而不是為每個終端做一個特定的版本。

響應式布局首先應用css3標準中的Media Query（媒介查詢）特性，對客戶端設備特性進行探測，如設備寬高、手持方向、畫面比例、分辨率等，然后根據探測結果，應用css標準中的取舍條件：only（選取條件）not（選取條件）and（設備選取條件）對樣式表進行布局設計，一般有彈性布局、固定布局、混合布局等不同的布局模式。

對所有尺寸設備進行兼容的響應式布局設計，工作量巨大，可以采用業內成熟的開源的、被充分測試的、成熟的第三方解決方案，本系統采用的被廣泛應用的Bootstrap布局系統。Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。柵格系統用于通過一系列的行（row）與列（column）的組合來創建頁面布局，你的內容就可以放入這些創建好的布局中。

結論：綜上所述，本文提出了一種基于富客戶端架構的節點網絡管理系統的架構模式。此種架構為系統視圖頁面設計了適配不同種類尺寸終端設備的技術能力，同時可以應用豐富的媒體形式向用戶展示不同維度的網管信息，并且為不同條件的硬件設施部署環境提供了適配性較高的解決方案。