基于MQTT协议的工控组态软件Web发布系统的设计

谢艳，肖金凤，贾磊

（南华大学电气工程学院，湖南 衡阳 421000）

0 引言

工控组态软件，用来采集工业现场关键位置的数据并能够控制其值变化的专用软件。在现代工业领域，利用组态软件对各种仪表、控制器进行远程管理已经成为一种普遍现象[1]。因为工业现场大部分都比较复杂，而且近年来网络技术发展迅速，考虑数据采集和监控的方便高效，所以Web发布系统也成为了工控组态软件与时俱进的一项必不可少的功能。此系统就是在基础的组态软件上增添Web监控功能，将组态编辑软件设计的监控界面转换成网页的形式，用户直接通过Internet和浏览器就能远程对现场进行实时监控[2]。所以，一个完整的Web系统的实现，需要用到很多种技术，如Web页面生成技术、通讯数据传输技术等等。目前，国内外对此的研究都不够成熟，其研究方向主要集中在监控界面的生成和实时数据的传输。

近年来，MQTT协议因为轻量、开发使用简单在物联网平台应用普遍，针对目前广泛使用的嵌入式组态软件Web发布系统实时性较差、监控界面配置复杂等问题，提出一种基于MQTT协议的新的工控组态软件Web发布系统解决方案，该方案具实时性较高、跨平台、系统维护升级便利等多项优点，且在国内生产PLC工控组态软件中实现。

1 功能分析与技术介绍

工控组态软件的Web发布系统由其功能特点主要满足两大需求。

（1）远程浏览器端监控界面与工控组态软件设计的监控界面一致。由此就考虑到浏览器端监控界面的生成方式，需读取组态软件中的画面，转换格式并能成功嵌入网页，且画面中各控件的逻辑变化功能一致。在浏览器端生成画面的方法有以下几种：①ActiveX技术虽能完全复用相同的画面，但其控件只能基于Windows，不能跨平台，且运行必须安装ActiveX控件，而控件的开发维护复杂且升级繁琐；②Applet基于Java，可实现图形绘制、人机交互，但其程序运行速度慢，且开发代码量大，不易维护；③WPF框架模型比较统一，使用灵活，但需安装.NET Framework，安装复杂且固定平台；④SliverLight是WPF的轻量版，可跨平台，但其动态属性计算复杂，大概率导致延时；⑤SVG是一种矢量图形标准，基于XML，此格式有四大优点：即跨平台、可指定对象类型、动态交互性强和支持DOM。因此，可以将画面以SVG格式嵌入能在网页显示出高清晰度的界面，且具动态变化，无需安装特定控件。相比较而言，SVG技术更适用。

（2）监控界面的动态变化靠实时数据驱动，这就要求数据传输的实时性尽可能高。数据来源是现场的监控设备或者组态软件。工业现场为局域网环境，客户端网络也大概率为局域网，要想实现远程浏览器监控，则需实现内网穿透，而一般的互联网通信的实时性都比较差。本文通过对现有网络通信技术的研究，决定在以MQTT消息发布订阅形式进行现场监控设备或组态软件与Web服务器之间的实时数据的传输，而Web服务器与浏览器之间则通过WebSocket传输。下面介绍关键技术MQTT及WebSocket。

1.1 MQTT

MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的轻量级通讯协议，构建于TCP/IP协议上，提供可靠、有序与双向的数据传输机制[3]。

MQTT协议中共有发布者（Publisher）、代理（Broker）、订阅者（Subscriber）三种角色，其关系如图1所示。

图1 MQTT协议原理

Publisher和Subscriber都是客户端，Publisher同时也可以是Subscriber，Subscriber也可以是另一Topic的Publisher，Broker是MQTT代理服务器（如mosquitto）。作为客户端的两种角色并不需要知道对方是否存在，它们只需要通过IP和端口成功连接上Broker，Broker就能够对所有的消息进行筛选，并且根据各消息的Topic对它们进行分发，就可实现消息的发布和订阅[4]。MQTT对传输的消息有三种服务类型（QoS）：最多一次（QoS0），至少一次（QoS1），只有一次（QoS2），对应着消息传递时不同的可靠程度。代理服务器对所有的Topic采用的是二叉树结构式管理，二叉树每个节点的存储方式为孩子兄弟链表法。即代理服务器将所有的Topic根据“/”分叉，所有Topic将形成一棵二叉树，而从主节点沿树杈到树中的任何一节点即是该节点的实际Topic，所以每个节点都有一个订阅列表，该订阅列表中保存了所有订阅当前Topic的客户端信息。

MQTT协议能够以较少的代码和有限的带宽为远程设备提供实时可靠的消息服务。特别适用于资源有限、带宽低、延迟大或网络环境不可靠的嵌入式设备。

1.2 WebSocket

WebSocket协议是一种通过单个TCP连接进行全双工通信的协议，应用于浏览器和服务器之间，两者只需要进行一次握手，就能够建立长久的连接，实现双向的信息通信。其工作机制基于订阅发布模式。

浏览器和服务器之间传统的通信是通过AJAX轮询，即浏览器定时向服务器发送连接请求，服务器收到此请求后再返回浏览器需要的消息并断开连接。虽然AJAX实现较简单，但对服务器资源浪费比较严重，效率比较低[5]。而WebSocket在最开始握手时利借助HTTP协议，利用HTTP连接中的Upgrade字段，与服务端协商将HTTP协议升级为WebSocket，服务器与浏览器从而建立长久连接，双方可主动给对方发送信息。且其握手数据包的请求头只有2个字节，对网络带宽占用较小。图2显示了AJAX轮询和WebSocket两种方式建立连接的不同。

图2 AJAX轮询和WebSocket连接方式

在工业现场，实时信息更新较快，发布系统的数据传输也更频繁，因此，浏览器和服务器之间使用WebSocket通信比AJAX轮询更加有效适用。

2 系统设计与实现

2.1 系统架构

根据系统的功能实现分析，基于组态软件的Web发布系统设计主要有组态软件、设备（监控终端）、MQTT代理服务器和监控登录系统四部分，如图3所示。组态软件有两个功能：（1）实现监控界面的设计与编辑；（2）能将界面信息分别转化成可在设备和浏览器端运行的文件。设备是监控终端，在工业现场收集数据信息并在监控界面显示。MQTT代理服务器是发布系统的信息传输中枢，组态软件、设备及监控登录系统通过MQTT协议连接代理服务器，进行实时信息转发。监控登录系统保存远程监控用户的用户信息及运行监控界面。

图3 系统架构

2.2 界面生成

组态软件设计监控界面的同时，对每个界面元素配置为SVG格式的图元，整个界面保存为SVG格式的矢量图文件，Web发布系统前端网页收到矢量图文件解析后嵌入vue，再发布到网页显示。

图4 浏览器端页面生成

2.3 数据传输实现

触摸屏可以收集控制器数据，是MQTT的客户端，MQTT的消息代理服务器构建在阿里云平台的ECS云服务器上，开启触摸屏打开监控画面的同时，触摸屏的MQTT模块通过代理服务器的IP和端口与代理服务器建立连接，在触摸屏上有数据变动时，变动数据打包后由触摸屏MQTT客户端发送至云代理服务器中转，云服务器通过其收到数据的主题进行分类。用户通过网页端登录系统，不同位置的触摸屏其发送消息的主题不同，用户登录系统后通过选择订阅想要监视的触摸屏对应的主题，进入此触摸屏的监视画面。消息发布者触摸屏发送实时消息到mosquitto服务器，mosquitto对主题进行分类后再发布，网页后台的Web服务器作为mosquitto的订阅者，收到对应主题的消息，对消息进行解析。网页前后端通讯通过websocket长连接方式，后端一收到消息主动推送至前端，前端通过改变网页界面相对应的参数，刷新界面。

2.4 系统测试

此系统已在国内生产的工控组态软件上测试成功。测试环境为基于Windows操作系统的PC，组态编辑软件使用Qt开发，Web服务器选用Apache，测试浏览器采用的是搜狗或谷歌浏览器，监控登录系统的前端为Vue框架，后端开发为Springboot框架，在阿里云上建立linux操作系统，采用mosquitto作为MQTT的代理服务器，监控设备为触摸屏。组态编辑软件（仿真时）或触摸屏运行时通过MQTT发布消息，不同监控地点的发布消息的主题不同，mosquitto代理服务器订阅多个主题，在浏览器端登录监控系统后，根据想监控的具体触摸屏发布的主题进行选择订阅，网页监控界面根据此主题的消息实时更新界面。监控界面中用到文本、编辑框、按钮、数据历史趋势图、表格等元素，运行效果如图5所示，根据监控界面的复杂程度，与现场监控设备比，其实时界面刷新延迟在1s左右。

图5 浏览器端数据监控界面效果

3 结论

本文以MQTT协议为主要实时数据传输方式，以SVG为监控界面生成方式，实现的工控组态软件的Web发布系统，可以实现互联网方式的消息传输，且具有实时性较高、跨平台、系统维护升级便利等多项优点，满足了国内生产的PLC工控组态软件Web发布系统在工程中的要求。未来组态软件的发展方向应该是直接基于浏览器开发组态编辑工具，监控界面可直接在浏览器上设计和编辑，使监控管理工作更加便利。