基于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. 效果图


    网桥功能模拟-动态效果图.gif
  6. 项目部署地址: https://www.passquality.com/demo/

三、算法原理简介

网桥与集线器简介

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


    网桥功能模拟-网桥内部结构.png

网桥的自学习与帧转发

网桥的自学习简介

  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,无法做到使用随机发送时间进行模拟。

网桥功能模拟-统计周期.png

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

五、系统设计与实现

系统设计

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


网桥功能模拟-设计图.png
  1. 自定义拓扑结构
    系统的主要输入,可自由调整拓扑结构,如下图所示:
    网桥功能模拟-自定义拓扑结构.png
  2. 拓扑结构渲染
    根据拓扑结构的结构化数据渲染拓扑结构,并同时初始化系统全局状态信息以及系统参数
  3. 全局状态信息
    系统的核心,网桥算法的实现以及MAC帧发送轨迹的渲染都依赖于该部分
  4. MAC帧发送轨迹渲染
    根据当前系统的状态渲染下一轮的发送轨迹信息
  5. 转发表动态更新
    检测全局状态信息中网桥转发表相关的数据,实施更新数据

实现

开发环境 运行环境 配置
Win10 + Vue 浏览器 无需特别配置,浏览器即可

六、 程序源码

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容