基于Web的網(wǎng)絡(luò)拓?fù)浒l(fā)現(xiàn)可視化的實(shí)現(xiàn)

鄧 力 章曉帆 陳 呈

（廣東工業(yè)大學(xué)華立學(xué)院 機(jī)電與信息工程學(xué)部，廣東 廣州 511300）

0 引言

網(wǎng)絡(luò)拓?fù)浒l(fā)現(xiàn)在網(wǎng)絡(luò)安全研究與網(wǎng)絡(luò)管理、網(wǎng)絡(luò)性能分析以及在網(wǎng)絡(luò)模型研究等方面占有舉足輕重的地位，如何獲取，分析和利用網(wǎng)絡(luò)拓?fù)湫畔㈨?yè)是總舵研究所關(guān)注的一個(gè)熱點(diǎn)。網(wǎng)絡(luò)拓?fù)淇梢暬鳛榉蛛x利用網(wǎng)絡(luò)拓?fù)湫畔⒌闹匾o助手段，其主要目標(biāo)就是將目標(biāo)網(wǎng)絡(luò)的節(jié)點(diǎn)和連接情況完整清晰地展現(xiàn)在人們眼前，為人們所了解，分析目標(biāo)網(wǎng)絡(luò)的整體狀況提供直觀的素材和操作平臺(tái)。這不僅有助于人們對(duì)其進(jìn)行觀測(cè)和分析，更重要的是，它將幫助人們發(fā)現(xiàn)在網(wǎng)絡(luò)拓?fù)渲械臐撛谝?guī)律，具有很高的社會(huì)價(jià)值和經(jīng)濟(jì)價(jià)值。

圖1 calcRepulsion算法流程圖

網(wǎng)絡(luò)拓?fù)淇梢暬男枨笾饕獊碓从谝韵路矫妫?）清晰直觀地反映網(wǎng)絡(luò)運(yùn)行狀況，輔助人們對(duì)網(wǎng)絡(luò)各方面的性能進(jìn)行評(píng)估，掌握其發(fā)展動(dòng)態(tài)，并未其指定有效的管理策略提供依據(jù)；2）幫助人們更清晰地認(rèn)識(shí)和發(fā)現(xiàn)存在于網(wǎng)絡(luò)中的內(nèi)在規(guī)律；3）網(wǎng)絡(luò)拓?fù)淠感孕枰钥梢暬姆绞絹砑右则?yàn)證。

網(wǎng)絡(luò)拓?fù)淇梢暬饕婕熬W(wǎng)絡(luò)拓?fù)淠Ｐ?、信息可視化和繪圖三個(gè)研究領(lǐng)域。其中：網(wǎng)絡(luò)拓?fù)淠Ｐ脱芯繛閷?shí)現(xiàn)網(wǎng)絡(luò)拓?fù)淇梢暬峁?shù)據(jù)組織和處理依據(jù)；信息可視化則主要為實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)淇梢暬峁┗镜姆椒ê蛥⒖?；圖布局技術(shù)則是在實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)洳季謺r(shí)所需要重點(diǎn)研究的內(nèi)容，同時(shí)也是網(wǎng)絡(luò)拖布可視化的核心問題。

本文分析了網(wǎng)絡(luò)拓?fù)淇梢暬膯栴}，回顧并對(duì)比分析了目前主要的研究成果，指出了當(dāng)前研究中存在的不足和后期的研究方向。

1 基于Web的網(wǎng)絡(luò)拓?fù)淇梢暬?/h2>

基于Web的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)可視化的主要優(yōu)點(diǎn)有：

1）地理上和系統(tǒng)上的可移動(dòng)性，使管理者的操作不受到地理位置的限制，更適合進(jìn)行分布的網(wǎng)絡(luò)監(jiān)視。

2）平臺(tái)的獨(dú)立性，可以再任何的平臺(tái)下訪問，只要在該平臺(tái)下有適合的網(wǎng)頁(yè)瀏覽器即可，從而解決了很多由于多平臺(tái)結(jié)構(gòu)所引發(fā)的不兼容問題。

3）以 Web Server為中心，降低了維護(hù)費(fèi)用和維護(hù)要求，對(duì)系統(tǒng)的修改只需要在服務(wù)器（Web Server）上進(jìn)行即可，客戶端無需任何的修改。

4）有利于網(wǎng)絡(luò)信息的及時(shí)發(fā)布。

5）統(tǒng)一的管理程序界面，便于為用戶提供信息，它提供比傳統(tǒng)的命令驅(qū)動(dòng)的遠(yuǎn)程登錄更加直接，更加實(shí)用的圖形化（GUI）界面，瀏覽器的操作和網(wǎng)頁(yè)（Web）界面對(duì)普通用戶來講師非常的方便與易用的。

本研究小組透過對(duì)網(wǎng)絡(luò)相關(guān)資料的收集與研究，決定采用MxGraph與ExtJS兩個(gè)框架來組成我們的網(wǎng)絡(luò)拓?fù)淇梢暬幕究蚣?。其中MxGraph是是一個(gè)JS繪圖組件適用于需要在網(wǎng)頁(yè)中設(shè) 計(jì)/編 輯 Workflow/BPM 流 程圖、圖表、網(wǎng)絡(luò)圖和普通圖形的Web應(yīng)用程序。而ExtJS是一種主要用于創(chuàng)建前端用戶界面，是一個(gè)基本與后臺(tái)技術(shù)無關(guān)的前端ajax框架。采用這兩個(gè)框架，方便我們對(duì)于網(wǎng)絡(luò)拓?fù)淇梢暬岸私缑娴木帉?。本基于Web的網(wǎng)絡(luò)拓?fù)淇梢暬瘜?shí)現(xiàn)從服務(wù)器端獲取網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖模板以及網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖中相關(guān)網(wǎng)絡(luò)設(shè)備的詳細(xì)信息，并根據(jù)模板數(shù)據(jù)渲染出網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖，用戶可在客戶端查看網(wǎng)絡(luò)設(shè)備列表，網(wǎng)絡(luò)設(shè)備詳細(xì)信息，搜索指定設(shè)備信息等功能。

圖2 calcAttraction算法流程圖

圖3 clacPositions算法流程圖

2 算法分析

該可視化前端界面在實(shí)際的編寫中，采用了諸多算法來優(yōu)化整個(gè)拓?fù)浣Y(jié)構(gòu)的顯示，其中包括calcRepulsion算法、calcAttraction算法、clacPositions算法等算法。其中calcRepulsion算法實(shí)現(xiàn)步驟如下：

1）獲得需要執(zhí)行此算法運(yùn)算的元素總數(shù)；

2）在未分離的元素集合中選定一個(gè)元素與其他未分離的元素在坐標(biāo)系中的坐標(biāo)拉開一定距離；

3）對(duì)元素集合中每個(gè)元素執(zhí)行第2步,直至每個(gè)元素都與其他元素拉開距離。

calcRepulsion算法流程圖如圖1：

而calcAttraction算法實(shí)現(xiàn)步驟如下：

1）獲得需要執(zhí)行此算法運(yùn)算的元素總數(shù)；

2）在元素集合中取出一個(gè)元素,對(duì)齊所有有連接關(guān)系的元素都拉近一定距離；

圖4 布局算法流程圖

3）對(duì)元素集合中每個(gè)元素執(zhí)行第2步。

其算法流程圖如圖2所示：

除此之外，我們還采用了clacPositions算法，該算法的實(shí)現(xiàn)步驟如下：

1）計(jì)算元素離容器原點(diǎn)的距離detaLength；

2）計(jì)算元素的新坐標(biāo)并放入坐標(biāo)數(shù)組；

3）對(duì)元素集合中所有元素執(zhí)行1,2步。

其算法流程圖如圖3所示：

最后，我們采用了布局算法對(duì)以上三個(gè)算法運(yùn)行的結(jié)果進(jìn)行匯總分析，算法步驟為：

1）獲取執(zhí)行布局的指定的父節(jié)點(diǎn)下的所有Vertex元素,放入元素集合vertexArray;

2）為元素集合中的元素創(chuàng)建路徑(形如’0.0.0.1’),并計(jì)算cellLocation的x,y軸坐標(biāo),元素半徑等；

3）開始布局執(zhí)行事務(wù)；

4）迭代獲取元素集合中每個(gè)元素的連線及連線的終端元素,放入edges和cells集合中,并為每個(gè)連接終端創(chuàng)建元素路徑,放入neighbours集合中；

5）根據(jù)指定迭代次數(shù)順序執(zhí)行calcRepulsion算法,calcAttraction算法,clacPositions算法,reduceTemperature方法 (計(jì)算布局執(zhí)行的熱度的函數(shù))；

6）移動(dòng)所有執(zhí)行布局算法的元素到新的坐標(biāo)；

7）提交布局執(zhí)行事務(wù)。

具體算法流程圖如圖4：

圖5 最終運(yùn)行結(jié)果

圖6 最終運(yùn)行結(jié)果圖

3 最終結(jié)果

通過以上4個(gè)算法對(duì)后端程序所獲取到的數(shù)據(jù)進(jìn)行處理，在Web端的網(wǎng)頁(yè)上繪制出清晰明了的圖形化撲結(jié)構(gòu)圖，用戶可以在Web瀏覽器上對(duì)整個(gè)網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)進(jìn)行掌控。該運(yùn)行結(jié)果圖基于服務(wù)端采集保存于MySQL數(shù)據(jù)庫(kù)中的網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)信息。有關(guān)于后端模塊的相關(guān)信息為另一篇論文所述，再次不再繁述。本模塊實(shí)現(xiàn)從服務(wù)器端獲取網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖模板以及網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖中相關(guān)網(wǎng)絡(luò)設(shè)備的詳細(xì)信息，并根據(jù)模板數(shù)據(jù)渲染出網(wǎng)絡(luò)拓?fù)浣Y(jié)構(gòu)圖，用戶可在客戶端查看網(wǎng)絡(luò)設(shè)備列表，網(wǎng)絡(luò)設(shè)備詳細(xì)信息，搜索指定設(shè)備信息等功能。本模塊存在的局限性有如下幾個(gè)方面：需要部署服務(wù)器，運(yùn)行在客戶端瀏覽器上；由于本模塊使用到mxgraph框架，若要使用本模塊完整功能，客戶端必須連接上Internet。最終運(yùn)行結(jié)果如圖5、圖6、圖7所示：

圖7 最終運(yùn)行結(jié)果圖

4 結(jié)束語

網(wǎng)絡(luò)拓?fù)淇梢暬瘑栴}的研究難點(diǎn)主要來源于以下方面：網(wǎng)絡(luò)本身的復(fù)雜性；缺乏進(jìn)行系統(tǒng)研究的方法論。而我們項(xiàng)目研究結(jié)果所采用的網(wǎng)絡(luò)拓?fù)淇梢暬慕鉀Q方法僅僅只是眾多網(wǎng)絡(luò)拓?fù)淇梢暬鉀Q方式的其中一種，可能還存在著諸多的不足，其中包括用戶權(quán)限的管理，子路由的發(fā)現(xiàn)與探測(cè)等。我們將在接下來的時(shí)間中，繼續(xù)對(duì)該項(xiàng)目進(jìn)行合理的完善，以求能夠完美的實(shí)現(xiàn)我們的最終目標(biāo)。