基于html5的机器实时监控系统设计与实现

一、相关技术

(一) Html5

HTML5的技术标准在2014年制定完毕推出。它提供了需要开发的API接口, 我们可以在不同的平台上面调用这些接口, 为我们多平台进行实时监控提供了基础。同时Html包含了我们需要的多媒体元素, 比如video, audio等, 让我们可以不用在浏览器上面安装插件, 就能很好的进行视频和音频的播放。通过Html设计的页面适应能力很好。在不同分辨率的终端设备上可以自适应, 自动调整页面的布局, 从而不用去针对不同设备和系统进行单独开发, 大大节约了我们的成本[1]。Html5中Canvas标签可以通过使用Javascript中的脚本来绘制图形。可以用它来绘制照片, 动画, 以及进行实时视频的处理[2]。

(二) Web RTC

谷歌公司为了让我们在web浏览器当中更好的开发出实时性的高质量web应用, 把html5语言和Java Script API进行了封装, 就产生了Web RTC技术。我们知道浏览器是不支持两个客服端建立信道来进行实时数据的通信。要完成他们之间的通信, 就必须通过一个服务器来进行中转。同时通信的质量还受到客户端和服务器之间带宽的影响。Web RTC为我们很好的解决了这个问题[3]。Web RTC在我们的浏览器当中集成了实时通讯模块, 使我们的开发人员不需要去关注多媒体数据是如何处理的, 我们在进行多媒体通信的时候, 只需要去调用Web RTC的API, 不需要安装任何插件, 就可以在浏览器之间建议一个Peer to Peer的信道, 浏览器之间就可以在没有服务器的条件下, 使用这个信道进行任何数据的传输[4,5,6,7,8]。

在两个或者多个端点之间要实现端到端的通信, Web RTC首先需要一个信令服务器, 可以使用XHR, SIP。其次Web RTC需要的实时通信双方使用是公网地址, 因此需要做NAT转换, 这里使用的是STUN Server来做NAT转换[9]。

二、实时监控系统的设计与实现

使用上面的技术, 基于Web Socket, 数据库采用Mysql, 结合express平台, 实现了服务器和浏览器实时数据的通信, 再利用Html5的标签canvas来绘制动态的实时图像。

(一) 系统的整体架构

基于express平台来开发和设计实时监控系统。Express一个基于node.js的平台, 它可以快速简化开发一个web以及移动端应用程序。Express为我们提供了多种功能, 可以非常快速的搭建Node服务器, 通过Node服务器, 客户端和服务器都可以访问数据库, 使两者之间保持最新的数据同步[10]。视频的采集端可以使用Html5来录制, 采用Web RTC技术, 把实时采集的数据存储到Mysql数据库, 传输到服务器。这里我们需要根据我们自己的需求来采集一些关键的数据。不需要把所有的数据进行采集进行存储。比如对于电机设备, 我们采集电机的开机状态, 转速, 温度, 以及三维坐标。当mysql数据库当中的数据改变会被Node服务器所监听, 把需要的数据封装为Json数据, 通过Web Socket协议建立起了服务器和客户端的实时通信, 把封装的Json数据推送到客户端。浏览器把Json数据进行解析, 利用Html5的标签Canvas来完成绘图和数据显示[11]。

(二) 数据双向传输

Node服务器使用基于Web Socket协议来进行实时的数据通信。首先客户使用浏览器发出连接请求, 服务器收到连接请求, 并判断为允许通信的消息版本, 那么连接成功。否则连接失败, 服务器返回给客户端包括允许通信的版本以及所支持的字段, 并且关闭正在通信的底层连接。客户端收到允许通信的版本信息后会使用服务器支持的版本去和服务器建立好连接。

Web Socket允许使用Java Script编写代码来实现客户端建立与远程服务器的连接, 从而实现客户端与服务器间双向的通信。在Web Cocket中有几个重要的方法, 向远程服务器发送数据使用Send方法, 关闭该Web Cocket链接使用Close方法, On Message方法监听服务器触发事件。具体实现通信代码如下

(三) 数据的展示

客户端浏览器展示的图形化页面是基于Html5的Canvas标签, 使用百度的图表库echarts, 用Node.js进行编写。展示的数据包括电机实时转速曲线, 电机实时工作状态图、等电机实时数据的反映。以电机实时温度曲线为例阐述具体实现方法。用户首先通过Html5的选择标签选中需要监控的电机属性。点击确认, 使用node.js触发点击事件提交查询。此时浏览器向Node服务器发出查询请求, 客服端和服务器通过websocket建立起了实时双向通信。Mysql数据库中的数据被服务器所监听, 一单数据发生变化, 服务器会把改变后的数据封装为JSON格式, 然后推送给客户端。客户端接收到JSON数据解析为option需要的值, 使用命令my Chart.set Option (option) 完成图表的绘制。

三、应用分析

基于Node平台, 使用Html的标签和Javascript等语言编写了可用于监控机器设备的可视化系统, 可用于实际的电器设备监控当中。由于echart的响应式布局特点, 在手机端和PC端进行了测试都能正确显示。PC端测试使用浏览器为谷歌浏览器, win10操作系统。可以根据电机的实时状态监控界面, 能购准确的反映出电机的工作状态信息, 从而判断电机是否正常。如果电机温度过高, 转速不正常, 电机的状态为显示为红色等出现不正常状态, 会根据不同报警状态发出不同的声音。以便管理人员及时发现和处理。达到了很好的监控效果。

摘要：实时数据的采集和监控运用于很多领域。目前市面上的监控系统都需要用户在电脑或者手机上面安装特定软件。为了解决在多平台上面进行数据的实时采集和监控, 采用html5技术实现了在工业生产当中对我们的机器设备进行实时数据监控。采用模块化的思想, 对系统的架构和功能给出了具体的实现方法。测试结果得出, 无论在手机还是电脑上面都可以直观的进行实时监控和控制, 具有良好的可视化效果。

关键词：Html5,Node.Js,实时监控