基于HTML5的实时Web数据监测系统的设计与研究论文

　　随着人们对信息实时性需求的不断提高，实时Web技术越来越受到人们的重视。例如，实时在线版网络游戏、在线购票系统等都是实时Web的典型代表。有国外媒体称实时Web的时代即将到来，实时Web不仅仅是一种时尚也是一种技术趋势。客户端数据的实时性要求服务器能主动向客户端实时发送数据，将最新的消息通知用户。传统的Web应用中，服务器都是响应浏览器请求发送数据给客户端，而客户端并不知道服务器数据何时变化，因此，无法做到真正的实时性。随着HTML5技术的发展，通过HTML5的WebSocket技术和Canvas可实现真正实时Web的需求。为此，构建基于HTML5的实时Web数据监测系统，与传统实时Web技术相比，有效地减少了网络延时和吞吐量。
　　1传统实时Web技术
　　传统实时Web技术是基于HTTP协议（超文本传输协议），HTTP协议下的服务器和客户端的信息交互方式为：客户端发送请求到服务器端，服务器端接收并处理客户端请求后返回结果给客户端，然后断开连接。由于HTTP协议是无状态协议，对于实时性要求比较高的Web应用，当客户端准备呈现服务器端的响应数据时数据可能已经过时，如果用户想要获得实时性信息需要不停地刷新页面，这显然是不明智的。目前，实时Web的实现形式主要是轮询和其他服务器推送，最常用的主要是轮询和长轮询技术。
　　1）轮询技术。客户端以固定频率向服务器发送HTTP请求，通过服务器端响应请求实现实时性。显然，消息传递之间如果有准确的时间间隔，轮询是一个很好的方法，但是通常实时数据之间的时间间隔是不可预知的，实时数据何时发生改变无法预测，若频率过高会加重服务器负载和网络负担，频率过低会丢失重要数据，并且每次连接需要发送HTTP报头而产生网络噪声。因此，轮询技术是一种很低效的实时通信方案。
　　2）长轮询技术。客户端向服务器发送请求后，在一段时间内服务器会保持打开状态，在此期间，如果服务器收到发送消息通知，会发送数据到客户端，客户端接收到数据时重新发送请求信息。然而，当数据量较大时，长轮询对于传统轮询方式并无性能改善。从以上分析可知，传统实时Web存在的缺陷是服务器端和客户端缺少全双工、稳定的长连接。
　　2相关技术与开发环境
　　2。1WebSocket技术HTML5为继HTML4。01后由W3C（万维网联盟）和WHATWG（Web超文本应用技术工作组）共同开发的一个全新版本的HTML。WebSocket作为HTML5的一种新的协议，它提供了一种全新的服务器客户端的异步通信方法，弥补了传统实时Web的缺陷，成为未来实时Web应用的首选方案。
　　WebSocket协议和WebSocketAPI分别为WebSocket的理论和实践部分。WebSocket协议由握手和数据传输2个阶段构成。TCP建立连接后首先要进行WebSocket层的握手操作，这个阶段非常简单，客户端给服务器发送HTTP请求，服务器响应客户端请求。
　　这个阶段的数据传输都基于文本，与现有的HTTP1。1相兼容。握手成功后进入数据传输阶段，这个阶段脱离了HTTP协议。WebSocketAPI由W3C制定，在WebSocketAPI中客户端和服务器端只需一个交互信息，客户端和服务器端就建立了一条全双工的信息传输通道，可直接相互传输数据，类似于TCPIP。这种技术不仅为实时Web应用节省了大量的服务器带宽和资源，而且能满足实时性的需求。
　　2。2WebSocket服务器
　　WebSocket协议基于BS架构，因此要实现WebSocket协议，必须要有WebSocket服务器。目前WebSocket服务器的开源实现有很多，例如：
　　1）KaazingWebSocketGateway（Java实现的WebSocket服务器）；
　　2）Netty3。0（Java实现的WebSocket服务器）；
　　3）Node。js（JavaScript实现的WebSocket服务器）；
　　4）modpywebsocket（Python实现的WebSocket服务器）；
　　Node。js是由RyanDahl发起的开源项目，现由Joyent公司管理维护。Node。js是可以让JavaScript在服务器端运行的平台，它可以让JavaScript既可在浏览器端又可在服务器环境下运行。Node。js与其他服务器语言相比优势有以下几点：
　　1）Node。js采用V8引擎，大大提升了JavaScript代码的运行速度。
　　2）Node。js摒弃了传统平台采用多线程实现高并发的方法，采用了单线程、异步式IO、事件驱动的方式，不仅摆脱了多线程所带来的困扰，也使性能得到了巨大的提升，提高了开发效率。
　　3）Node。js充分考虑了数据的实时性，是一个为实时Web而诞生的平台。通过Node。js与WebSocket的合作，可开发实时性要求较高的Web应用。
　　2。3客户端图形实时呈现
　　如今，实时Web应用的开发者越来越注重用户的体验度，将繁杂的数据进行可视化可向用户更加简单、直观地展示数据的变化，减少用户整理和思考的时间。目前，互联网上的数据可视化工具有很多，例如Spss、Matlab、Excel、TableauDesktop、Echarts等。其中，Spss更加注重统计分析，但图表与其他软件的兼容性较差；Matlab需要很强的编程能力，更偏向于科学方面的可视化处理；Excel输出图表无交互性，不能进行动态数据的可视化处理；TableauDesktop需要收取较高的费用。
　　HTML5中的Canvas元素提供了可进行绘图的平台，采用JavaScript语言对其操作可绘制理想的图形，通过Canvas元素可对系统的实时数据进行可视化处理。Echarts（EnterpriseCharts商业产品图表库）是基于Canvas使用JavaScript语言编写的可视化图表库，而且拥有动态数据接口。通过Echarts的动态数据接口，可对系统的实时数据进行可视化处理。
　　2。4开发工具及开发环境
　　Web程序主要是在浏览器上观看运行效果，在后端服务器和浏览器中完成调试和运行Web程序，选用Editplus作为编辑器，可在编码过程中对代码进行高亮显示，提高编程效率。目前浏览器对HTML5的支持程度良莠不齐，系统选用GoogleChrome浏览器（版本35。0。1916。114m）作为开发和测试环境，与其他浏览器相比，Chrome打开速度快，用户体验好。服务器端安装Node。js（版本0。10。26）及Node。js的包管理器NPM（版本1。4。3）。在Windows系统中安装Node。js非常简单，访问http：nodejs。org下载安装包后点击Next就可以自动完成安装，通过这种方式还自动安装了Node。js的包管理器NPM。另外，在命令提示符中输入node，即可测试Node。js是否安装成功。
　　3构建实时数据监测系统
　　3。1系统结构
　　实时Web数据监测系统由服务器端和客户端2部分构成，其系统结构如图2所示。服务器端主要采集和推送数据，客户端主要实现动态数据接收控制和显示等功能。
　　3。2系统流程图
　　基于WebSocket实时数据监测系统的流程图如图3所示。从图3可看出，WebSocket服务器主要功能通过WebSocket接口来响应客户端事件，客户端通过WebSocket对象监听事件，通过触发OnMessage接收数据并动态显示数据。
　　3。3基于Node。js的WebSocket服务器端实现Node。jsWebSocket是专门为WebSocket服务器开发的Node。js模块，通过直接调用Node。jsWebSocket模块封装的方法可轻松构建属于自己的WebSocket服务器。Node。jsWebSocket模块的使用及通过模块中的相关函数构建WebSocket服务器过程为：
　　1）在Node。js中通过NPM包管理器执行程序
　　NPMinstallNode。jsWebSocket安装Node。jsWebSocket模块。
　　2）通过Node。js提供的require函数调用Node。jsWebSocket模块，并运用其中的createServer（）创建服务器对象，开始监听客户端请求，客户端发出请求后，WebSocket服务器端和客户端开始建立连接。
　　varwsrequire（nodejswebsocket）；
　　调用Node。jsWebSocket模块
　　varserverws。createServer（function（conn）｛
　　｝）。listen（8001）；
　　上述代码创建WebSocket服务器对象并监听8001端口。
　　3）注册事件并为事件指定响应的函数。本代码注册了text、error、close三个事件：
　　a）text，当服务器接收到客户端字符串时触发；
　　b）error，连接过程中发生错误时触发；
　　c）close，当WebSocket连接关闭时触发。
　　WebSocket服务器接收到客户端字符串时触发text事件，进而调用相应的函数，将Mysql数据库中实时数据发送给客户端。例如：
　　conn。on（text，function（str）｛console。log（收到的信息为：str）
　　sendmess（）发送实时数据到客户端｝）
　　conn。on（close，function（code，reason）｛
　　console。浃鉥K〕log（关闭连接）｝）
　　conn。on（error，function（code，reason）｛
　　console。log（异常关闭）｝）
　　WebSocket服务器编写完毕后保存文档为WebSocket。js，打开终端，进入WebSocket。js所在的目录，执行nodeWebSocket。js命令即可运行WebSocket服务器。
　　3。4WebSocket客户端与Echarts实时数据显示WebSocket客户端只需要绑定相应地址和端口并与服务器建立连接，可接收服务器推送的数据，因此，WebSocket的客户端很容易使用。具体步骤为：
　　1）创建连接。首先需要新建一个WebSocket对象，并传入相应的URL，WebSocket创建完成后，页面可连接服务器。
　　varwsnewWebSocket（39；ws：192。168。17。80：800139；）
　　上述代码创建了WebSocket对象，其中URL由3部分组成，分别为通信标记（ws）、主机IP和端口号。
　　2）监听事件。WebSocket对象拥有4个事件：onOpen、onClose、onError和onMessage。
　　a）onOpen：WebSocket服务器建立完成时触发；
　　b）onClose：WebSocket服务器关闭时触发；
　　c）onError：WebSocket服务器创建过程中发生错误时触发；
　　d）onMessage：客户端收到服务器端数据时触发。
　　WebSocket服务器发送数据给客户端时触发onMessage事件，通过onMessage事件将实时数据传入Echarts图表的动态接口。例如：
　　ws。onopenfunction（e）｛console。log（连接服务器成功）
　　ws。send（game1）；｝
　　ws。onclosefunction（e）｛console。log（服务器关闭）；｝
　　ws。onerrorfunction（e）｛console。log（连接出错）；｝
　　ws。onmessagefunction（e）｛data2e。｝
　　3）数据显示。Echarts拥有动态数据接口，将数据库动态数据传入动态数据接口就可展示实时数据，例如：
　　myChart。addData（〔动态数据接口addData
　　〔0系列索引
　　data2，
　　新增数据，data2为服务器发送给客户端实时
　　数据
　　False新增数据是否从队列头部插入
　　false是否增加队列长度
　　4）主动关闭连接。若客户端认为通信已结束，可调用disconnect（）函数关闭连接：ws。disconnect（）。图4为采用该实时数据监测系统开发的实时温度数据显示图。其中，X轴为动态并持续更新最新时间，Y轴为对应时间的温度值。由此可对温度数据进行实时监测。
　　4轮询与WebSocket服务器推送方式的测试
　　4。1网络延时
　　图5为Ajax长轮询与WebSocket服务器推送方式的网络延时对比。从图5可看出，Ajax轮询方式下客户端与服务器之间的平均延时为50ms，为了保持连接，服务器与客户端需不断进行请求和响应的操作，从而造成多次延时，并且延时中服务器无法向客户端发送消息，从而造成资源浪费。WebSocket模式下，服务器和客户端只在第一次握手连接时会造成延时，握手连接成功后客户端无需向服务器发送请求，服务器主动发送消息到客户端，从而减少了网络延时，提高了系统的实时性。
　　4。2网络吞吐量
　　本次实验中，Ajax长轮询的请求和响应的报头大小为734Byte，不包含任何数据。采用WebSocket技术，消息为一个数据帧，开销为2Byte。3种情景下连接数增加时Ajax长轮询和采用WebSocket技术的网络吞吐量对比情况如图6所示，其中1000个用户Ajax长轮询和Websocket的网络吞吐量分别为5。6、0。015Mbits，10000个用户Ajax长轮询和Websocket的网络吞吐量分别为56、0。15Mbits，100000个用户Ajax长轮询和WebsocketK〕P浃的网络吞吐量分别为560、1。526Mbits。可见，随着用户的增加，WebSocket的吞吐量明显低于Ajax长轮询。
　　5结束语
　　构建了基于HTML5的实时Web数据监测系统，能将数据（如温度、湿度、电压、电流等）实时发送到客户端，客户端通过Echarts对数据进行直观显示。与传统实时Web技术Ajax轮询对比测试结果表明，HTML5能大大减小网络延时和吞吐量。随着HTML5协议的完善，基于HTML5的实时方案将会被大量应用。