随着计算机网络的日益庞大,网络拓扑管理也随之迅速发展。基于Client/Server架构的网络拓扑软件升级维护繁琐,而Browser/Server架构中基于Applet的网络拓扑软件对Java运行环境严重依赖;基于Flex的网络拓扑软件的对浏览器性能消耗过大。新一代HTML5技术迅速在浏览器应用软件中流行起来,给网络管理软件应用带来了新的发展,很好地解决了前者的弊端。国内已经有不少网络软件公司开始将网络拓扑软件向HTML5转型,本项目正是在这样的环境下开始的。本文主要介绍了网络拓扑管理系统中的基于HTML5的网络拓扑的展示功能实现过程。HTML5拓扑需要对类型繁多的拓扑元素进行统一管理,对数据进行封装,实现服务器与浏览器的通信,在页面提供数据展示和用户交互操作功能。本文通过需求分析、系统详细设计、系统实现与测试介绍了 HTML5网络拓扑展示系统。首先通过对用户需求的分析,得到系统的功能需求和非功能性需求;然后根据需求分析结果进行了数据模型设计、系统功能分解、系统框架设计和拓扑层次划分。拓扑数据模型主要为拓扑节点、链路、菜单、按键以及作为容器的拓扑模型。拓扑展示系统需要实现加载拓扑、设置拓扑参数、展示元素提示信息、查看图例和保存拓扑的功能。拓扑系统框架中主要涉及了三个模块:1)服务器拓扑业务模块用来完成拓扑请求消息的处理、拓扑的扩展、和拓扑模型数据封装等。2)数据对象传输模块主要封装了拓扑请求消息和响应消息,完成了服务器和浏览器之间的消息通信。3)浏览器页面业务模块以TWaver组件为基础完成拓扑元素的加载,拓扑菜单的展示和事件的执行。拓扑展示系统的实现部分以拓扑系统框架为基础,介绍了拓扑功能的具体实现流程。实现过程从浏览器事件触发开始,到组装请求消息,然后服务器对消息进行处理,并封装拓扑响应消息发送到浏览器,浏览器最后将数据结果呈现出来。最后依据用户的需求对系统进行测试与分析,完成拓扑系统的测试部分。本项目源自网络拓扑软件从Applet到HTML5的转型中的拓扑展示系统,其使用了 HTML5、JSF、WebSocket等技术。本项目能够把握前沿技术潮流,大幅度地提高网络拓扑的性能。拓扑展示系统能够完成用户提出的要求,鉴于HTML5技术在浏览器应用和移动端中的优越性显著增强,基于HTML5的拓扑系统在拓扑管理软件中必能脱颖而出,为用户呈现全新的体验效果。