CN110929201A - 一种基于Web的复杂网络拓扑编辑及可视化系统 - Google Patents

Abstract

本发明公开了一种基于Web的复杂网络拓扑编辑及可视化系统，其特征在于，包括平面拓扑编辑模块、拓扑结构校验模块和3D拓扑展示模块；其中，所述平面拓扑编辑模块，用于以图形化拖拽编辑的方式绘制网络拓扑，增加或删除网络节点、编辑网络节点的属性，生成网络拓扑json描述文件并保存；所述拓扑结构校验模块，用于对所述网络拓扑json描述文件进行校验，根据预先设定的规则判定网络拓扑的网络节点属性或者网络节点连接是否合法；所述3D拓扑展示模块，用于对所述网络拓扑json描述文件保存的拓扑结构进行3D可视化展示。本发明以3D化的形式展示网络拓扑，在三维空间把拓扑图分为不同层级，网络结构一目了然。

Description

一种基于Web的复杂网络拓扑编辑及可视化系统

技术领域

本发明属于互联网技术领域，具体而言，涉及一种基于Web的复杂网络拓扑编辑及可视化系统。

背景技术

在互联网高速发展的今天，其背后的计算机设备规模越来越大，网络结构越来越复杂，给网络设计者和管理者的工作带来了很大的挑战。网络拓扑图是网络结构的图形表达形式，反应网络中各实体间的结构关系，通过它可以直观地了解网络中各个网络设备的信息、节点之间的链接及其路由关系，网络拓扑设计地好坏对整个网络的性能和经济性有重大影响，网络拓扑的可视化编辑与管理能力对网络运营起着至关重要的作用。

工欲善其事，必先利其器，网络拓扑编辑与可视化工具的便利与否直接决定着网络结构设计的好坏。现有常见的工具主要包括：通过其他图表编辑软件的插件来进行网络拓扑编辑，该方法只能绘制出网络拓扑的基本结构，支持的节点类型较少，并且无法对网络节点进行属性编辑，专业性较差；或者专业的拓扑绘制软件，支持绝大部分设备，可以进行属性编辑，但是基本都停留在平面可视化的程度，当网络节点规模较大时，无法直观的体现出拓扑结构，也不提供网络监控及管理的功能。

发明内容

针对上述问题，本发明提出了一种基于Web的复杂网络拓扑可视化系统，以解决现有工具不够专业及可视化功能空缺的问题。

本发明的技术方案为：

一种基于Web的复杂网络拓扑编辑及可视化系统，其特征在于，包括平面拓扑编辑模块、拓扑结构校验模块和3D拓扑展示模块；其中，

所述平面拓扑编辑模块，用于以图形化拖拽编辑的方式绘制网络拓扑，增加或删除网络节点、编辑网络节点的属性，生成网络拓扑json描述文件并保存；

所述拓扑结构校验模块，用于对所述网络拓扑json描述文件进行校验，根据预先设定的规则判定网络拓扑的网络节点属性或者网络节点连接是否合法；

所述3D拓扑展示模块，用于对所述网络拓扑json描述文件保存的拓扑结构进行3D可视化展示。

所述3D拓扑展示模块根据所述网络拓扑json描述文件中的网络节点描述分别建立相应的3D节点，所有网络节点按照相应的3D模型创建3D节点完成之后根据网络节点的位置信息进行位置排列。

进一步的，所述3D拓扑展示模块根据网络节点的IP地址进行位置排列；其中，首先将所有路由节点对应的路由3D节点呈圆形分布在底层，将交换机节点对应的交换机3D节点围绕其连接的路由节点呈圆形分布在中层，将终端3D节点围绕其连接的交换机节点呈圆形分布在顶层，生成一个树形3D拓扑；然后根据各个3D节点的IP在数据库中查询到对应的经纬度，再把经纬度换算成3D地图坐标中的x坐标与y坐标，在z坐标根据分层已确定的基础上，根据3D节点的坐标(x，y)对各层的3D节点进行排列。

进一步的，所述3D拓扑展示模块根据网络节点的层级结构进行位置排列，将所有路由节点对应的路由3D节点呈圆形分布在底层，将交换机节点对应的交换机3D节点围绕其连接的路由节点呈圆形分布在中层，将终端3D节点围绕其连接的交换机节点呈圆形分布在顶层，生成一个树形3D拓扑。

进一步的，对于每一网络节点，利用3D canvas绘制该网络节点对应的3D模型建立对应的3D节点，所述3D节点包括一个obj文件、mtl文件以及一个放贴图的文件夹；其中，obj文件包含3D模型的顶点坐标数据、顶点颜色数据、顶点法线数据、顶点索引数据，mtl文件包含3D模型的光照参数、RGB参数、镜反射和慢反射位图文件、滤光透射率；然后读取目标节点所属3D模型中包含的obj文件、mtl文件，在3D canvas的默认位置处绘制出对应的3D节点，然后再在该3D节点上方生成一个气泡信息框放置该网络节点的节点信息。

进一步的，所述气泡信息框跟随对应3D节点移动，且默认是隐藏的；当鼠标点击聚焦该3D节点后出现对应的气泡信息框。

进一步的，当3D节点为虚拟机3D节点时，双击虚拟机3D节点则进入虚拟机的VNC远程操作界面，获取该虚拟机3D节点的虚拟机VNC用户名与密码，然后在新窗口打开VNC页面并传递用户名与密码参数，VNC页面自动填入参数远程连接虚拟机。

进一步的，所述拓扑结构校验模块中的校验规则包含属性校验，包括检验网络节点的关键属性是否空置、名称是否重复、IP或者IP段格式是否正确以及IP或者IP段是否重复，如果校验通过则返回通过信息，否则返回出错信息，并弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错的网络节点。

进一步的，所述拓扑结构校验模块中的校验规则包含连接合法性校验规则，用来校验连线两端的网络节点是否正确连接，包括对连线两端的节点的类型是否允许连接、IP段是否相同、路由端口是否正确进行检测，通过遍历每条连线并获取连线两端的网络节点，然后检测网络节点的类型判断连线是否合法、计算IP段，并把路由节点的端口跟与其相连的网络节点的IP进行一一比较，当IP段一致时则判定为合法，返回通过信息，不合法则返回出错信息，并弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错的网络节点。

如图1所示，本系统基于Web搭建，通过浏览器客户端打开页面进行网络拓扑编辑，并把平面拓扑图转化为3D可视化的展示方式，帮助用户直观的感受网络互联方式，让用户可以随时随地进行网络拓扑编辑、保存与展示，具体功能包括：

1)平面拓扑编辑模块，基于HTML5实现，在Apache服务器中部署后即可直接在浏览器中以web界面方式运行，该模块支持路由器、交换机、实体机、虚拟机等34种网络节点，以图形化拖拽编辑的方式绘制需要的网络拓扑，并在绘制期间可以任意增加或删除网络设备节点，编辑网络设备属性，更改网络拓扑连接，最后生成网络拓扑json描述文件并保存，相对于其他拓扑编辑工具，该模块创新的采用了json描述的方式保存拓扑结构，达到了随时下载、上传即可还原、轻量化保存的效果；

2)拓扑结构校验模块，用于对系统生成的网络拓扑json描述文件进行合理性校验，根据预先设定的规则来判定网络拓扑的节点属性或者连接是否合法，拓扑结构校验模块中的校验规则主要包含：1.属性校验，其中包括检验网络节点的关键属性是否空置，名称是否重复，IP或者IP段格式是否正确，IP或者IP段是否重复，节点的属性校验在点击拓扑校验按钮或者保存按钮时触发，由JS代码遍历每个节点的各项属性，合法则返回通过信息，不合法则返回出错信息，并在web界面中弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错节点；2.连接合法性校验，用来校验连线两端的网络节点是否正确连接，包括对连线两端的节点的类型是否允许连接、IP段是否相同、路由端口是否正确进行检测，节点的连接合法性校验在点击拓扑校验按钮或者保存按钮时触发，首先由JS代码遍历每条连线并获取连线两端的节点，然后检测节点类型判断连线是否合法(如连线两端不能都是终端设备，但可以是路由器和交换机或者交换机和终端设备)、计算IP段，并把路由节点的端口跟与其相连的节点的IP进行一一比较，当IP段一致时则判定为合法，返回通过信息，不合法则返回出错信息，并在web界面中弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错节点。校验通过后系统会把当前json描述文件存储到后台数据库，以便下次进入同一项目场景时从数据库读取这个文件，并还原出上次编辑的拓扑内容；

3)3D拓扑展示模块，用于对保存的拓扑结构进行3D可视化展示，采用HTML5结合自定义算法实现，3D拓扑展示由2D拓扑编辑界面的3D展示按钮触发，进入到3D展示界面后，首先获取数据库中的json描述文件，根据json中的描述分别建立相应的3D节点(如读取到一个路由器节点则在3D canvas中按路由器3D模型建立一个3D节点，建立一个3D节点的步骤如下，首先在AE软件中描绘3D模型，绘制好形状和材质之后，点击生成3D模型，此时会产生一个obj文件、mtl文件以及一个放贴图的文件夹。把这些文件和文件夹放在项目目录(所有3D模型文件都存放在当前Web系统项目下的models文件夹下)下，然后程序通过读取目标节点所属3D模型中包含的obj文件，从中获得模型的顶点坐标数据、顶点颜色数据、顶点法线数据、顶点索引数据后，通过读取3D模型中包含的mtl材质文件，从中获得模型的光照参数、RGB参数、镜反射和慢反射位图文件、滤光透射率，最后调用webgl中的gl.drawElements()方法在3D canvas的默认位置(坐标{x:0,y:0,z:0})处绘制出这个3D节点，然后再在节点上方生成一个气泡框放置节点信息(信息从json描述中读出)，如主机名、IP地址、用户名及密码等，气泡信息框跟随节点移动，默认是隐藏的，鼠标点击聚焦节点后出现，其他类型如交换机、实体机、虚拟机等节点也分别有相应的3D模型)，所有节点按照相应的3D模型(包括路由器、交换机、实体机、虚拟机等34种类型节点)创建3D节点完成之后根据位置算法进行位置排列(每一节点都含有位置信息)，排列分按IP展示与不按IP展示两种方式：在不按IP展示的情况下按照固定的节点层级结构(所有路由节点对应的路由3D节点呈圆形分布在底层，交换机节点对应的交换机3D节点围绕其连接的路由节点呈圆形分布在中层，虚拟机等终端3D节点围绕其连接的交换机节点呈圆形分布在顶层)，生成一个树形3D拓扑，该树形3D拓扑中每个3D节点都可以进行单击或者双击操作，单击某个3D节点可以弹出其信息气泡框，如单击虚拟机3D节点，弹出的信息气泡框包含虚拟机的主机名、IP地址、操作系统、用户名、密码，节点的信息来自程序初始化时读取到的json描述，再次单击接单信息气泡框隐藏，如果双击虚拟机节点则会进入虚拟机的VNC远程操作界面，过程如下，系统检测到用户的双击事件之后，调用后台接口获取被双击的虚拟机VNC用户名与密码，成功获取到之后在新窗口打开VNC页面并传递用户名与密码参数，VNC页面自动填入参数远程连接虚拟机，连接成功后用户即可远程操作虚拟机；按IP展示的情况下，在按前述固定节点层级结构排列的基础上，根据各个3D节点的IP在数据库中查询到对应的经纬度，再把经纬度换算成3D地图坐标中的x坐标与y坐标(z坐标已经按固定层级结构确定)，底部加上3D地图背景，同时使用echarts统计图表、VNC连接等方式强化场景展示的美观性和可操作性。

与现有技术相比，本发明的优点为：

1)基于HTML5实现，在Apache进行部署后即可访问，免下载安装，可以随时随地访问并进行拓扑编辑、保存与展示。

2)支持路由器、交换机、实体机、虚拟机等34种网络节点的编辑，加入拓扑校验模块，对网络节点连接和属性进行合理性判断，并提示错误信息。

3)以3D化的形式展示网络拓扑，在三维空间把拓扑图分为不同层级，网络结构一目了然。

4)展示界面加入对网络节点的远程操控，以及系统的监控模块，方便对网络设备进行管理。

附图说明

图1为本系统框图。

图2为网络拓扑编辑及校验模块流程图。

图3为3D展示页面工作流程图。

图4为操作3D节点程序流程图。

具体实施方式

为了使本技术领域的人员更好的理解本发明实施例中的技术方案，并使得本发明的目的、特征和优点能够更加明显易懂，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。

本发明的主要目的为提供一个方便的网络拓扑编辑及可视化系统，以在浏览器环境中进行网络节点拖拽编辑的方式，保存网络拓扑描述json文件，从而在展示页面以3D可视化的方式绘制网络拓扑，并辅之以3D地图、echarts统计图表、VNC连接等方式强化场景展示的美观性和可操作性。

本系统的网络拓扑编辑及校验模块工作流程图如图2所示，首先是用户登录，成功后打开相应项目场景的拓扑编辑的页面，如果系统检测到数据库中存在当前项目保存过的拓扑图json文件，则加载此json文件，恢复保存时候的网络拓扑结构，如果不存在则开始进行网络节点拖拽和编辑，在此过程中，可以任意增加需要的设备如实体机、虚拟机、交换机、路由器等，并且在属性编辑区赋予相应的节点信息如主机名、操作系统、IP地址，最后给节点连线等等。编辑完成之后点击校验或者保存按钮进入拓扑的校验过程，系统根据预先设定的网络连接规则来判定节点属性或者连接是否合法，包括检查节点的IP地址是否重复、节点的属性是否空置、通过获取连线两端的节点类型来判断连线是否合法(如连线两端不能都是终端设备，但可以是路由器和交换机或者交换机和终端设备)、路由关系是否对应(通过获取连线两端节点的IP地址，进而计算其IP段并比较是否相等，相等则表示对应，否则不合法)等，如果校验不通过，弹出提示框显示未通过处的具体信息，自动聚焦到错误的节点并选中，如果校验通过则会根据当前的拓扑分别提取出场景以及各个节点的属性(如节点ID、IP、Name等)，保存成单个的Javascript属性对象，再把场景以及各个节点的属性对象拼接在一起形成成一个长字符串的json描述，这个json描述中存在着当前场景的名称、ID、3D展示选项以及各个节点的属性与连接关系等信息。json描述生成之后点击保存会把这个描述保存在一个json文件当中，然后存储到数据库当中，进入3D展示页面后，就可以从数据库中读取这个json文件，通过其中的网络节点及其连接信息描述还原出网络拓扑结构，并且以3D化的形式展现出来，让用户更加清晰的了解当前网络拓扑结构。

系统的3D展示页面工作流程如图3，首先通过点击展示按钮进入3D页面，页面会根据既定的程序脚本去读取数据库的Json描述文件，如果读取失败提示加载失败，读取成功则开始初始化3D展示环境，包括创建3D canvas、设置3D视角、中心点等。随后开始加载各种网络节点的3D模型(mtl格式)，这里只针对Json描述中出现的节点类型进行相应模型加载，实现按需加载，加快响应时间，加载完成之后遍历Json描述逐个对出现的节点进行3D节点的建立(使用对应的3D模型)。全部3D节点建立完成后，系统按照既定规则把节点分为三层(路由3D节点在3D canvas最底层，即z坐标为0，交换机3D节点在中间层，实体机、虚拟机等终端3D节点在最顶层)。分层完成后检查Json描述的showOption字段，如其值为showByIP则按IP地址进行位置分布，否则不按IP地址分布，在按IP地址分布的情况下，首先读取各个节点的IP地址，根据IP地址在数据库中查询到对应的经纬度，再把经纬度换算成3D地图坐标中的x坐标与y坐标(z坐标已经按固定层级结构确定)，达到所有节点按实际地理位置分布的效果，随后程序按照比例生成3D地图，3D地图呈平面分布在z坐标为-10的区域，达到所有节点分布在地图上方的效果；在不按IP展示的情况下，首先在z坐标为-10的平面生成一个50*50的网格，然后以网格中心为原点，按照圆坐标以及节点数量计算每个路由3D节点的x与y坐标(z坐标固定为0)，把路由3D节点呈圆形分布在底层，把交换机3D节点围绕其连接的路由节点呈圆形分布在中层，虚拟机等终端3D节点围绕其连接的交换机节点呈圆形分布在顶层，生成一个树形3D拓扑。所有3D节点分布完成后，页面加载一些辅助展示的插件，包括实时流量曲线图、实时报警信息滚动框等，最后页面发出实时数据查询请求，把得到的监控数据展示到3D拓扑中(如发生一次A节点到B节点的访问流量则在3D拓扑图中产生一次从A节点到B节点的流量动画效果，流量曲线图也会有相应的变化)，系统中还加入了对3D节点的信息浏览和操控功能，3D节点操作工作流程如图4，首先检测当前操作为单击还是双击，如果是单击3D节点，从json描述中读取到当前3D节点的所有信息，生成一个信息气泡框并置于节点正上方，弹出的信息气泡框包含节点的主机名、IP地址、操作系统、用户名、密码，再次单击接单信息气泡框隐藏，如果双击3D节点则会进入节点的VNC远程操作界面，过程如下，系统检测到用户的双击事件之后，调用后台接口获取被双击的节点VNC用户名与密码，成功获取到之后在新窗口打开VNC页面并传递用户名与密码参数，VNC页面自动填入参数远程连接节点，连接成功后用户即可进行远程操作。

以上包含了本发明优选实施例的说明，这是为了详细说明本发明的技术特征，并不是想要将发明内容限制在实施例所描述的具体形式中，依据本发明内容主旨进行的其他修改和变型也受本专利保护。本发明内容的主旨是由权利要求书所界定，而非有实施例的具体描述所界定。

Claims (9)

1.一种基于Web的复杂网络拓扑编辑及可视化系统，其特征在于，包括平面拓扑编辑模块、拓扑结构校验模块和3D拓扑展示模块；其中，

所述平面拓扑编辑模块，用于以图形化拖拽编辑的方式绘制网络拓扑，增加或删除网络节点、编辑网络节点的属性，生成网络拓扑json描述文件并保存；

所述拓扑结构校验模块，用于对所述网络拓扑json描述文件进行校验，根据预先设定的规则判定网络拓扑的网络节点属性或者网络节点连接是否合法；

所述3D拓扑展示模块，用于对所述网络拓扑json描述文件保存的拓扑结构进行3D可视化展示。

2.如权利要求1所述的系统，其特征在于，所述3D拓扑展示模块根据所述网络拓扑json描述文件中的网络节点描述分别建立相应的3D节点，所有网络节点按照相应的3D模型创建3D节点完成之后根据网络节点的位置信息进行位置排列。

3.如权利要求2所述的系统，其特征在于，所述3D拓扑展示模块根据网络节点的IP地址进行位置排列；其中，首先将所有路由节点对应的路由3D节点呈圆形分布在底层，将交换机节点对应的交换机3D节点围绕其连接的路由节点呈圆形分布在中层，将终端3D节点围绕其连接的交换机节点呈圆形分布在顶层，生成一个树形3D拓扑；然后根据各个3D节点的IP在数据库中查询到对应的经纬度，再把经纬度换算成3D地图坐标中的x坐标与y坐标，在z坐标根据分层已确定的基础上，根据3D节点的坐标(x，y)对各层的3D节点进行排列。

4.如权利要求2所述的系统，其特征在于，所述3D拓扑展示模块根据网络节点的层级结构进行位置排列，将所有路由节点对应的路由3D节点呈圆形分布在底层，将交换机节点对应的交换机3D节点围绕其连接的路由节点呈圆形分布在中层，将终端3D节点围绕其连接的交换机节点呈圆形分布在顶层，生成一个树形3D拓扑。

5.如权利要求2所述的系统，其特征在于，对于每一网络节点，利用3D canvas绘制该网络节点对应的3D模型建立对应的3D节点，所述3D节点包括一个obj文件、mtl文件以及一个放贴图的文件夹；其中，obj文件包含3D模型的顶点坐标数据、顶点颜色数据、顶点法线数据、顶点索引数据，mtl文件包含3D模型的光照参数、RGB参数、镜反射和慢反射位图文件、滤光透射率；然后读取目标节点所属3D模型中包含的obj文件、mtl文件，在3D canvas的默认位置处绘制出对应的3D节点，然后再在该3D节点上方生成一个气泡信息框放置该网络节点的节点信息。

6.如权利要求5所述的系统，其特征在于，所述气泡信息框跟随对应3D节点移动，且默认是隐藏的；当鼠标点击聚焦该3D节点后出现对应的气泡信息框。

7.如权利要求6所述的系统，其特征在于，当3D节点为虚拟机3D节点时，双击虚拟机3D节点则进入虚拟机的VNC远程操作界面，获取该虚拟机3D节点的虚拟机VNC用户名与密码，然后在新窗口打开VNC页面并传递用户名与密码参数，VNC页面自动填入参数远程连接虚拟机。

8.如权利要求1所述的系统，其特征在于，所述拓扑结构校验模块中的校验规则包含属性校验，包括检验网络节点的关键属性是否空置、名称是否重复、IP或者IP段格式是否正确以及IP或者IP段是否重复，如果校验通过则返回通过信息，否则返回出错信息，并弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错的网络节点。

9.如权利要求1所述的系统，其特征在于，所述拓扑结构校验模块中的校验规则包含连接合法性校验规则，用来校验连线两端的网络节点是否正确连接，包括对连线两端的节点的类型是否允许连接、IP段是否相同、路由端口是否正确进行检测，通过遍历每条连线并获取连线两端的网络节点，然后检测网络节点的类型判断连线是否合法、计算IP段，并把路由节点的端口跟与其相连的网络节点的IP进行一一比较，当IP段一致时则判定为合法，返回通过信息，不合法则返回出错信息，并弹出提示框显示错误信息，同时当前编辑视角自动聚焦到出错的网络节点。

Images