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

　　3 构建实时数据监测系统

　　3.1 系统结构

　　实时Web数据监测系统由服务器端和客户端2部分构成，其系统结构如图2所示。服务器端主要采集和推送数据，客户端主要实现动态数据接收控制和显示等功能。

　　3.2 系统流程图

　　基于WebSocket实时数据监测系统的流程图如图3所示。从图3可看出，WebSocket服务器主要功能通过WebSocket接口来响应客户端事件，客户端通过WebSocket对象监听事件，通过触发OnMessage接收数据并动态显示数据。

　　3.3 基于Node.js的WebSocket服务器端实现Node.js-WebSocket是专门为WebSocket服务器开发的Node.js模块，通过直接调用Node.js-Web-Socket模块封装的方法可轻松构建属于自己的Web-Socket服务器。Node.js-WebSocket模块的使用及通过模块中的相关函数构建WebSocket服务器过程为：

　　1)在Node.js中通过NPM 包管理器执行程序

　　“NPM install Node.js-WebSocket”安装Node.js-Web-Socket模块。

　　2)通过Node.js提供的require函数调用Node.js-WebSocket模块，并运用其中的createServer()创建服务器对象，开始监听客户端请求，客户端发出请求后，WebSocket服务器端和客户端开始建立连接。

　　var ws=require("nodejs-websocket");

　　//调用Node.js-WebSocket模块

　　var server= ws.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服务器编写完毕后保存文档为Web-Socket.js，打开终端，进入WebSocket.js所在的目录，执行node WebSocket.js命令即可运行WebSocket服务器。

　　3.4 WebSocket客户端与Echarts实时数据显示WebSocket客户端只需要绑定相应地址和端口并与服务器建立连接，可接收服务器推送的数据，因此，WebSocket的客户端很容易使用。具体步骤为：

　　1)创建连接。首先需要新建一个WebSocket对象，并传入相应的URL，WebSocket创建完成后，页面可连接服务器。

　　var ws=new WebSocket('ws：//192.168.17.80：8001')

　　上述代码创建了WebSocket对象，其中URL由3部分组成，分别为通信标记(ws)、主机IP和端口号。

　　2)监听事件。WebSocket对象拥有4个事件：on-Open、onClose、onError和onMessage。

　　a)onOpen：WebSocket服务器建立完成时触发;

　　b)onClose：WebSocket服务器关闭时触发;

　　c)onError：WebSocket服务器创建过程中发生错误时触发;

　　d)onMessage：客户端收到服务器端数据时触发。

　　WebSocket服务器发送数据给客户端时触发on-Message事件，通过onMessage事件将实时数据传入Echarts图表的动态接口。例如：

　　ws.onopen=function(e){console.log(" 连接服务器成功" )

　　ws.send("game1");｝

　　ws.onclose=function(e){console.log(" 服务器关闭" );｝

　　ws.onerror=function(e){console.log(" 连接出错" );｝

　　ws.onmessage=function(e){data2=e.data;｝

　　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.015Mbit/s，10 000个用户Ajax长轮询和Websocket的网络吞吐量分别为56、0.15Mbit/s，100 000个用户Ajax长轮询和Websocket_K]P_浃的网络吞吐量分别为560、1.526Mbit/s。可见，随着用户的增加，WebSocket的吞吐量明显低于Ajax长轮询。

　　5 结束语

　　构建了基于HTML5的实时Web数据监测系统，能将数据(如温度、湿度、电压、电流等)实时发送到客户端，客户端通过Echarts对数据进行直观显示。与传统实时Web技术Ajax轮询对比测试结果表明，HTML5能大大减小网络延时和吞吐量。随着HTML5协议的完善，基于HTML5的实时方案将会被大量应用。

【基于HTML5的实时Web数据监测系统的设计与研究论文】相关文章：

1.基于Web的农机推广信息系统的研究与设计论文

2.基于Java EE的Web系统中数据库设计技术研究论文

3.基于Web Service技术的天气达人安卓系统的设计论文

4.基于Web的教师教学质量评价管理系统的设计论文

5.专业论文：基于Struts+Spring的Web应用设计与实现

6.基于物联网的智能社区互助系统的设计研究论文

7.基于STM32人体脉搏无线监测系统的设计论文

8.简析基于大数据平台的动态票额智能预分系统的研究与实现论文