參考

• [1]Echarts快速上手
• [2]Echarts中使用關(guān)系圖畫拓撲圖
• [3]集線器與網(wǎng)橋的理解

一、項目背景及介紹

該項目為《高級計算機網(wǎng)絡(luò)》第一次實踐作業(yè)，作業(yè)目標(biāo)：

1. 網(wǎng)絡(luò)初始化
   • 網(wǎng)絡(luò)初始化
   • 支持運行前預(yù)設(shè)、運行時設(shè)置網(wǎng)絡(luò)拓撲（輸入：網(wǎng)橋數(shù)量、各網(wǎng)橋所管轄的網(wǎng)段及站點數(shù)量）
2. 每個網(wǎng)橋維持一張轉(zhuǎn)發(fā)表
3. 模擬過程
   • 每次發(fā)送一幀時，顯示發(fā)送信息，如：網(wǎng)橋B1.網(wǎng)段1.站點A --> 網(wǎng)橋B3.網(wǎng)段2.站點G
   • 按照網(wǎng)橋的自學(xué)習(xí)規(guī)則，進行相關(guān)轉(zhuǎn)發(fā)表的更新、幀的轉(zhuǎn)發(fā)
4. 模擬方式
   • 展示內(nèi)容：拓撲圖、網(wǎng)橋轉(zhuǎn)發(fā)表、幀流向等
   • 操作功能：“轉(zhuǎn)發(fā)”、“后退”

二、技術(shù)點和效果圖

1. Echarts (graph lines)
   • graph 用于動態(tài)生成網(wǎng)絡(luò)拓撲結(jié)構(gòu)
   • lines 用于動態(tài)模擬以及可視化MAC幀發(fā)送軌跡
2. Vue
   • MVVM 數(shù)據(jù)雙向綁定、動態(tài)更新
   • 項目腳手架，快速開發(fā)，便于集成第三方組件庫（ElementUI）
3. 網(wǎng)橋自學(xué)習(xí)和轉(zhuǎn)發(fā)算法
4. 自定義拓撲結(jié)構(gòu)

5. 效果圖

   
   
   網(wǎng)橋功能模擬-動態(tài)效果圖.gif
6. 項目部署地址： https://www.passquality.com/demo/

三、算法原理簡介

網(wǎng)橋與集線器簡介

1. 集線器工作在物理層，用于拓寬局域網(wǎng)
2. 集線器的工作：首先是節(jié)點發(fā)信號到線路，集線器接收該信號，因信號在電纜傳輸中有衰減，集線器接收信號后將衰減的信號整形放大，最后集線器將放大的信號廣播轉(zhuǎn)發(fā)給其他所有端口。
3. 在數(shù)據(jù)鏈路層擴展局域網(wǎng)是使用網(wǎng)橋
4. 網(wǎng)橋工作在數(shù)據(jù)鏈路層，它根據(jù) MAC 幀的目的地址對收到的幀進行轉(zhuǎn)發(fā)。

5. 網(wǎng)橋的內(nèi)部結(jié)構(gòu)

   
   
   網(wǎng)橋功能模擬-網(wǎng)橋內(nèi)部結(jié)構(gòu).png

網(wǎng)橋的自學(xué)習(xí)與幀轉(zhuǎn)發(fā)

網(wǎng)橋的自學(xué)習(xí)簡介

1. 網(wǎng)橋每收到一個幀，就記下其源地址和進入網(wǎng)橋的接口，作為轉(zhuǎn)發(fā)表中的一個項目。
2. 在建立轉(zhuǎn)發(fā)表時是把幀首部中的源地址寫在“地址”這一欄的下面。
3. 在轉(zhuǎn)發(fā)幀時，則是根據(jù)收到的幀首部中的目的地址來轉(zhuǎn)發(fā)的。這時就把在“地址”欄下面已經(jīng)記下的源地址當(dāng)作目的地址，而把記下的進入接口當(dāng)作轉(zhuǎn)發(fā)接口。
4. 網(wǎng)橋收到一幀后先進行自學(xué)習(xí)。查找轉(zhuǎn)發(fā)表中與收到幀的源地址有無相匹配的項目。如沒有，就在轉(zhuǎn)發(fā)表中增加一個項目（源地址、進入的接口和時間）。如有，則把原有的項目進行更新。

幀轉(zhuǎn)發(fā)簡介

1. 查找轉(zhuǎn)發(fā)表中與收到幀的目的地址有無相匹配的項目。
2. 如沒有，則通過所有其他接口（但進入網(wǎng)橋的接口除外）進行轉(zhuǎn)發(fā)。
3. 如有，則按轉(zhuǎn)發(fā)表中給出的接口進行轉(zhuǎn)發(fā)。
4. 若轉(zhuǎn)發(fā)表中給出的接口就是該幀進入網(wǎng)橋的接口，則應(yīng)丟棄這個幀（因為這時不需要經(jīng)過網(wǎng)橋進行轉(zhuǎn)發(fā)）。

四、系統(tǒng)功能

主要功能

該示例項目用于可視化模擬拓撲結(jié)構(gòu)中網(wǎng)橋功能，分為兩種模式：自動隨機模擬和手動模擬
并附帶以下功能：

1. 消息提示：目的節(jié)點接收到MAC幀后的消息提示
2. 自定義網(wǎng)橋拓撲結(jié)構(gòu)：可自定義網(wǎng)橋的拓撲結(jié)構(gòu)圖，最多支持3層拓撲結(jié)構(gòu)
3. 可視化MAC幀發(fā)送軌跡：基于Echarts實現(xiàn)算法規(guī)定的MAC發(fā)送軌跡
4. 網(wǎng)橋轉(zhuǎn)發(fā)表動態(tài)更新：實時動態(tài)可視化更新網(wǎng)橋轉(zhuǎn)發(fā)表內(nèi)容，并攜帶清空功能
5. 隨機幀個數(shù)：支持自定義每輪產(chǎn)生MAC幀的個數(shù)（范圍[0,4]），可用于模擬廣播風(fēng)暴
6. 系統(tǒng)參數(shù)：用于側(cè)面分析MAC幀發(fā)送狀態(tài)和當(dāng)前系統(tǒng)狀態(tài)

不足與改進

受限于Echarts的事件處理方式（不支持自定義一系列事件），MAC幀發(fā)送軌跡的可視化更新以及轉(zhuǎn)發(fā)表內(nèi)容的動態(tài)更新沒有采用事件驅(qū)動的方式，
而是采用以固定的全局時鐘周期進行周期性采樣處理（本系統(tǒng)中2s/次），因此MAC幀的傳輸時間就固定為2s，無法做到使用隨機發(fā)送時間進行模擬。

網(wǎng)橋功能模擬-統(tǒng)計周期.png

五、系統(tǒng)設(shè)計與實現(xiàn)

系統(tǒng)設(shè)計

該示例項目是使用Vue框架開發(fā)的純前端項目，功能設(shè)計方面如下圖：

網(wǎng)橋功能模擬-設(shè)計圖.png

1. 自定義拓撲結(jié)構(gòu)
   系統(tǒng)的主要輸入，可自由調(diào)整拓撲結(jié)構(gòu)，如下圖所示：
   
   網(wǎng)橋功能模擬-自定義拓撲結(jié)構(gòu).png
2. 拓撲結(jié)構(gòu)渲染
   根據(jù)拓撲結(jié)構(gòu)的結(jié)構(gòu)化數(shù)據(jù)渲染拓撲結(jié)構(gòu)，并同時初始化系統(tǒng)全局狀態(tài)信息以及系統(tǒng)參數(shù)
3. 全局狀態(tài)信息
   系統(tǒng)的核心，網(wǎng)橋算法的實現(xiàn)以及MAC幀發(fā)送軌跡的渲染都依賴于該部分
4. MAC幀發(fā)送軌跡渲染
   根據(jù)當(dāng)前系統(tǒng)的狀態(tài)渲染下一輪的發(fā)送軌跡信息
5. 轉(zhuǎn)發(fā)表動態(tài)更新
   檢測全局狀態(tài)信息中網(wǎng)橋轉(zhuǎn)發(fā)表相關(guān)的數(shù)據(jù)，實施更新數(shù)據(jù)

實現(xiàn)

六、 程序源碼

源碼地址：https://gitee.com/msli121/advanced-computer-network.git
安裝部署：詳見ui目錄下的README.md
部署地址：https://www.passquality.com/demo/
特別聲明：尊重他人勞動成果，轉(zhuǎn)載或引用請注明出處