一、背景及介紹
該專案為《高級計算機網路》第一次實踐作業，作業目標：
- 網路初始化
- 網路初始化
- 支持運行前預設、運行時設定網路拓撲（輸入：網橋數量、各網橋所管轄的網段及站點數量）
- 每個網橋維持一張轉發表
- 模擬程序
- 每次發送一幀時，顯示發送資訊，如：網橋B1.網段1.站點A --> 網橋B3.網段2.站點G
- 按照網橋的自學習規則，進行相關轉發表的更新、幀的轉發
- 模擬方式
- 展示內容：拓撲圖、網橋轉發表、幀流向等
- 操作功能：“轉發”、“后退”
二、技術點和效果圖
-
Echarts (graph lines)
- graph 用于動態生成網路拓撲結構
- lines 用于動態模擬以及可視化MAC幀發送軌跡
-
Vue
- MVVM 資料雙向系結、動態更新
- 專案腳手架，快速開發，便于集成第三方組件庫（ElementUI）
-
網橋自學習和轉發演算法
-
自定義拓撲結構
-
效果圖
-
該專案已部署到到公網，試用網址:
https://www.passquality.com/demo/
三、演算法原理簡介
網橋與集線器簡介
- 集線器作業在物理層，用于拓寬局域網
- 集線器的作業：首先是節點發信號到線路，集線器接收該信號，因信號在電纜傳輸中有衰減，集線器接收信號后將衰減的信號整形放大，最后集線器將放大的信號廣播轉發給其他所有埠，
- 在資料鏈路層擴展局域網是使用網橋
- 網橋作業在資料鏈路層，它根據 MAC 幀的目的地址對收到的幀進行轉發，
- 網橋的內部結構
網橋的自學習與幀轉發
網橋的自學習簡介
- 網橋每收到一個幀，就記下其源地址和進入網橋的介面，作為轉發表中的一個專案，
- 在建立轉發表時是把幀首部中的源地址寫在“地址”這一欄的下面，
- 在轉發幀時，則是根據收到的幀首部中的目的地址來轉發的，這時就把在“地址”欄下面已經記下的源地址當作目的地址，而把記下的進入介面當作轉發介面，
- 網橋收到一幀后先進行自學習，查找轉發表中與收到幀的源地址有無相匹配的專案，如沒有，就在轉發表中增加一個專案（源地址、進入的介面和時間），如有，則把原有的專案進行更新，
幀轉發簡介
- 查找轉發表中與收到幀的目的地址有無相匹配的專案，
- 如沒有，則通過所有其他介面（但進入網橋的介面除外）進行轉發，
- 如有，則按轉發表中給出的介面進行轉發，
- 若轉發表中給出的介面就是該幀進入網橋的介面，則應丟棄這個幀（因為這時不需要經過網橋進行轉發），
四、系統功能
主要功能
該示例專案用于可視化模擬拓撲結構中網橋功能，分為兩種模式：自動隨機模擬和手動模擬
并附帶以下功能：
- 訊息提示：目的節點接收到MAC幀后的訊息提示
- 自定義網橋拓撲結構：可自定義網橋的拓撲結構圖，最多支持3層拓撲結構
- 可視化MAC幀發送軌跡：基于Echarts實作演算法規定的MAC發送軌跡
- 網橋轉發表動態更新：實時動態可視化更新網橋轉發表內容，并攜帶清空功能
- 隨機幀個數：支持自定義每輪產生MAC幀的個數（范圍[0,4]），可用于模擬廣播風暴
- 系統引數：用于側面分析MAC幀發送狀態和當前系統狀態
不足與改進
受限于Echarts的事件處理方式（不支持自定義一系列事件），MAC幀發送軌跡的可視化更新以及轉發表內容的動態更新沒有采用事件驅動的方式，
而是采用以固定的全域時鐘周期進行周期性采樣處理（本系統中2s/次），因此MAC幀的傳輸時間就固定為2s，無法做到使用隨機發送時間進行模擬，
暫未想到處理方式，歡迎留言探討，
五、系統設計與實作
系統設計
該示例專案是使用Vue框架開發的純前端專案，功能設計方面如下圖：
-
自定義拓撲結構
系統的主要輸入，可自由調整拓撲結構，如下圖所示：
-
拓撲結構渲染
根據拓撲結構的結構化資料渲染拓撲結構，并同時初始化系統全域狀態資訊以及系統引數 -
全域狀態資訊
系統的核心，網橋演算法的實作以及MAC幀發送軌跡的渲染都依賴于該部分 -
MAC幀發送軌跡渲染
根據當前系統的狀態渲染下一輪的發送軌跡資訊 -
轉發表動態更新 檢測全域狀態資訊中網橋轉發表相關的資料，實施更新資料
實作
| 開發環境 | 運行環境 | 配置 |
|---|---|---|
| Win+Vue+Echarts+ElementUI | 瀏覽器 | 無需特別配置，瀏覽器即可 |
六、 程式原始碼
原始碼地址：https://gitee.com/msli121/advanced-computer-network.git
安裝部署：詳見ui目錄下的README.md
試用地址：https://www.passquality.com/demo/
特別宣告：尊重他人勞動成果，轉載或參考請注明出處
參考
- [1]Echarts快速上手
- [2]Echarts中使用關系圖畫拓撲圖
- [3]集線器與網橋的理解
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305828.html
標籤：其他
上一篇：Vue保姆級教程
下一篇：Vue保姆級入門教程