基于Echarts的网桥拓扑结构可视化模拟_网络拓扑图可视化 源码

一、背景及介绍

该项目为《高级计算机网络》第一次实践作业，作业目标：

1. 网络初始化
   • 网络初始化
   • 支持运行前预设、运行时设置网络拓扑（输入：网桥数量、各网桥所管辖的网段及站点数量）
2. 每个网桥维持一张转发表
3. 模拟过程
   • 每次发送一帧时，显示发送信息，如：网桥B1.网段1.站点A --> 网桥B3.网段2.站点G
   • 按照网桥的自学习规则，进行相关转发表的更新、帧的转发
4. 模拟方式
   • 展示内容：拓扑图、网桥转发表、帧流向等
   • 操作功能：“转发”、“后退”

二、技术点和效果图

1. Echarts (graph lines)

   • graph 用于动态生成网络拓扑结构
   • lines 用于动态模拟以及可视化MAC帧发送轨迹

2. Vue

   • MVVM 数据双向绑定、动态更新
   • 项目脚手架，快速开发，便于集成第三方组件库（ElementUI）

3. 网桥自学习和转发算法

4. 自定义拓扑结构

5. 效果图
   

6. 该项目已部署到到公网，试用网址:
   https://www.passquality.com/demo/

三、算法原理简介

网桥与集线器简介

1. 集线器工作在物理层，用于拓宽局域网
2. 集线器的工作：首先是节点发信号到线路，集线器接收该信号，因信号在电缆传输中有衰减，集线器接收信号后将衰减的信号整形放大，最后集线器将放大的信号广播转发给其他所有端口。
3. 在数据链路层扩展局域网是使用网桥
4. 网桥工作在数据链路层，它根据 MAC 帧的目的地址对收到的帧进行转发。
5. 网桥的内部结构
   

网桥的自学习与帧转发

网桥的自学习简介

1. 网桥每收到一个帧，就记下其源地址和进入网桥的接口，作为转发表中的一个项目。
2. 在建立转发表时是把帧首部中的源地址写在“地址”这一栏的下面。
3. 在转发帧时，则是根据收到的帧首部中的目的地址来转发的。这时就把在“地址”栏下面已经记下的源地址当作目的地址，而把记下的进入接口当作转发接口。
4. 网桥收到一帧后先进行自学习。查找转发表中与收到帧的源地址有无相匹配的项目。如没有，就在转发表中增加一个项目（源地址、进入的接口和时间）。如有，则把原有的项目进行更新。

帧转发简介

1. 查找转发表中与收到帧的目的地址有无相匹配的项目。
2. 如没有，则通过所有其他接口（但进入网桥的接口除外）进行转发。
3. 如有，则按转发表中给出的接口进行转发。
4. 若转发表中给出的接口就是该帧进入网桥的接口，则应丢弃这个帧（因为这时不需要经过网桥进行转发）。

四、系统功能

主要功能

该示例项目用于可视化模拟拓扑结构中网桥功能，分为两种模式：自动随机模拟和手动模拟
并附带以下功能：

1. 消息提示：目的节点接收到MAC帧后的消息提示
2. 自定义网桥拓扑结构：可自定义网桥的拓扑结构图，最多支持3层拓扑结构
3. 可视化MAC帧发送轨迹：基于Echarts实现算法规定的MAC发送轨迹
4. 网桥转发表动态更新：实时动态可视化更新网桥转发表内容，并携带清空功能
5. 随机帧个数：支持自定义每轮产生MAC帧的个数（范围[0,4]），可用于模拟广播风暴
6. 系统参数：用于侧面分析MAC帧发送状态和当前系统状态

不足与改进

受限于Echarts的事件处理方式（不支持自定义一系列事件），MAC帧发送轨迹的可视化更新以及转发表内容的动态更新没有采用事件驱动的方式，
而是采用以固定的全局时钟周期进行周期性采样处理（本系统中2s/次），因此MAC帧的传输时间就固定为2s，无法做到使用随机发送时间进行模拟。

暂未想到处理方式，欢迎留言探讨。

五、系统设计与实现

系统设计

该示例项目是使用Vue框架开发的纯前端项目，功能设计方面如下图：

1. 自定义拓扑结构
   系统的主要输入，可自由调整拓扑结构，如下图所示：
   

2. 拓扑结构渲染
   根据拓扑结构的结构化数据渲染拓扑结构，并同时初始化系统全局状态信息以及系统参数

3. 全局状态信息
   系统的核心，网桥算法的实现以及MAC帧发送轨迹的渲染都依赖于该部分

4. MAC帧发送轨迹渲染
   根据当前系统的状态渲染下一轮的发送轨迹信息

5. 转发表动态更新 检测全局状态信息中网桥转发表相关的数据，实施更新数据

实现

六、 程序源码

源码地址：https://gitee.com/msli121/advanced-computer-network.git
安装部署：详见ui目录下的README.md
试用地址：https://www.passquality.com/demo/
特别声明：尊重他人劳动成果，转载或引用请注明出处

参考

• [1]Echarts快速上手
• [2]Echarts中使用关系图画拓扑图
• [3]集线器与网桥的理解