基于HTML5的生产装置实时监测可视化.pdfVIP

2015年 3月 计算机工程与设计 Mar．2015 第 36卷 第3期 COMPUTER ENGINEERINGAND DESIGN V01．36 No．3 基于HTML5的生产装置实时监测可视化 刘维峰 ，左泽军 ，赵利强 ，于 涛 ，王建林 (1．北京化工大学 信息科学与技术学院，北京 100029；2．中原油田石油化工总厂，河南 濮阳457000) 摘 要：提 出一种基于HTML5的生产装置实时监测web可视化方法。采用基于事件的 自触发机制和WebSocket通信协议 使服务器端主动传输数据，利用Canvas技术实现无浏览器插件式的页面动态可视化显示。基于ASP．NET平台开发生产装 置实时监测Web可视化系统，给出系统架构和实现方法。实际应用结果表明，提 出的服务器端 自触发机制和WebSocket通 信协议有效降低 了服务器运行压力和网络吞吐量，提高了系统通信效率；开发的生产装置实时监测Web可视化系统无需安 装浏览器插件 ，数据可视化效果 良好 。 关键词：HTML5；实时监测；Web可视化；WebSocket协议；Canvas技术 中图法分类号：TP311 文献标识号：A 文章编号：1000—7024 (2015)03—0809—05 doi：10．16208／j．issnl000—7024．2015．03．049 Visualizationofproductionequipmentreal-timemonitoringbasedonHTML5 LIU Wei—feng，ZUOZe-jun，ZHAOLi—qiang，YU Tao，WANGJian-lin (1-CollegeofInformationScienceandTechnology，BeijingUniversityofChemicalTechnology，Beiiing100029，China； 2．ZhongyuanOilfieldPetroChemicalCo mplex，Puyang457000，China) Abstract：A methodofWebvisualizationforproductionequipmentreal-timemonitoringbasedonHTML5wasproposed．Inthis method，thespontaneousmechanism basedoneventandWebSocketprotocolwereusedtOtransferdatainitiativelyontheserver side，Canvastechniquewasusedtoachievefreeplug-indynamicpagedisplay．Thewebvisualizationsystem forproductionequip— mentreal—timemonitoringwasdevelopedbasedonASP．NETplatform，thesystem architectureandimplementationmethodwere given．Practicalapplicationresultsshow thatpressureontheserversideandnetworkthroughputarereducedbythespontaneous mechanism andW ebSocketprotocol，theW ebvisualizationsystem ofproductionequipmentreal-timemonitoringwithoutinstal— linganybrowserplug-inhasagoodinteractiveeffect． Keywords：HTML5；real—timemonitoring；W ebvisualization；W ebSocketprotocol；Canvastechnique 能力较差，服务器端数据处理压力大。基于RIA技术的B／ 0 引 言 S模式，主要包括 Fl