基于Web的企业实时监测应用的设计

丁振凡，王小明，刘亚男，章 斌

（1.华东交通大学，南昌 330013；2.江西安居兄弟建材有限公司，南昌 330233）

0 引言

对生产线运营状况的自动化监控是实现企业信息化、精细化、集成化管理的新要求。由于Web所采用HTTP协议的无状态性，给Web界面的实时监测应用带来不少挑战，其中最关键的是数据的实时传输问题。数据传送在技术层面总体上分为拉方式和推方式两种，拉方式的典型代表是采用AJAX技术，客户方定时轮询从服务端取数据，其最大问题是客户端请求的频率与服务器端数据更新频率不一致会造成无谓的网络流量浪费，拉方式总体上效率低下。推方式是服务器端有数据更新时，将数据推送到客户端，在HTML5出现前，推方式主要是依靠Socket通信的方法，用Java Applet或Flash作为客户端，服务器上也要求编写配合的服务程序，并采用多线程管理连接，编程较复杂，在应用中不理想，效率也不高。随着HTML5的WebSocket技术的出现，在浏览器和服务器之间提供了一个基于TCP连接的双向通道[1]，为推技术的应用提供了舞台，它支持基于发布/订阅的通信，从而方便基于Web的实时应用开发。

本系统将企业的两条玻珠生产线整合为一套集中控制系统。通过Web技术实现对两条生产线上设备工作状态的实时监测。可以在网页上动态显示煤气炉、燃气加热炉、膨胀炉、电预热炉、料仓、包装仓等各处设备的温度、压力、转速等数据的实时变化，并进行超限报警,传输数据中还包括对原料使用和包装产品计量的信息。为满足数据管理和分析要求，系统同时实现数据的集中存储，支持数据的查询、分析、统计报表打印等功能。作为远程控制，可在Web界面中实时设置系统的运行参数，发布生产指令等。

1 系统的基本构成与功能

1.1 系统基本组成

系统采用PLC控制获取来自生产线数据，通过温度、压力以及计量传感器获取数据，经过模拟/数字转换送PLC。可编程控制器PLC是工业控制系统中最常用的控制器，它具有抗干扰好，可靠性高的特点[2]，每条生产线的PLC连接有一台操作显示终端GOT，执行本生产线运行参数设置、参数与状态显示、设备调整、故障显示等功能。一台工控机IPC通过2个串口与2条生产线的PLC的串行通信模块进行通信。IPC通过无线网上网，实现与Web服务器的通信。用户通过访问Web页面实现对生产过程的双向实时监测。系统基本组成如图1所示。

图1 系统基本组成

正向监测中，工控机将串口通信得到的PLC数据，通过调用Web服务器上的Web服务参数传送到Web服务器，在Web服务器上通过WebSocket通信发布给订阅消息的浏览器。

为实现反向监控，在Web服务器引入ActiveMQ消息服务器，浏览器可发送消息给ActiveMQ消息队列，由工控机上Java程序获取队列的消息并经串口转发给PLC。

在整个应用中，浏览器与服务器之间存在三种形式的通信：1）HTTP访问，用于访问Web页面；2）AJAX访问，用于从浏览器页面访问Web服务，获取服务器存储的设备报警参数值；3）WebSocket通信，采用STOMP协议传输基于发布/订阅的实时数据。浏览器通过HTML5的Canvas和DHTML技术绘制参数变化曲线。

Web服务器采用Tomcat8，消息服务器采用ActiveMQ，数据库采用mysql。工控机和Web服务器上的程序代码均采用Spring框架编程实现。Spring是一种轻量级的开源框架，它通过依赖注入实现Bean的配置，通过REST风格的MVC编程实现Web服务[6]。

1.2 系统的功能菜单

系统的一级功能菜单如图2所示。在下级菜单中还要选择具体监测的生产线和具体的子功能。例如，总图显示包括：生产线1、生产线2、两条生产线共3个选项。参数显示时，先选择生产线，进一步再选择具体的监控设备。

图2 系统功能菜单

系统的首要功能是实时监控，根据应用需要，提供了两种形式监测显示，总图显示在页面上显示生产线设备布置示意图，在示意图中对应位置显示相关设备的参数数据；参数显示则是将监测设备的各参数变化分别绘制成曲线。在总图显示中含数据报警提示，接收到的数据与参数范围进行比较，到达报警值则用红色显示数据。数据查询用于查询个日期范围中以分钟为单位的数据记录。系统利用Spring JdbcTemplate实现数据库的访问处理[3]。报表输出要求在网页上显示日报表和月报表。指令发布是从Web上发布指令给生产线上的GOT控制台显示，是一种反向的控制。数据分析可实现当前生产情况与某查询日期情况的数据可视化对比。其中，指令发布和参数设置功能需要进行用户认证，用户访问控制用Spring Security实现[4]。

2 整个应用的消息通信架构设计

整个应用设计包括PLC端的编程、工控机上的编程、Web服务器端的编程。应用系统中各部分之间的数据通信是应用设计的核心，系统通信架构如图3所示，该消息传递架构的特点是实现应用的松耦合和高效性，同时方便应用的部署，Web服务器甚至可以部署到云平台上。限于篇幅，本文仅讨论控制机和Web服务端的编程处理，均用Spring框架编程实现。在图3中，存在两种Web服务，两者均为REST风格，但Web服务1是供IPC的应用程序调用，通过Spring RestTemplate调用，这种形式的服务常用于应用间消息传递；而Web服务2是供浏览器页面访问。IPC上的消息监听程序与Web服务器上ActiveMQ采用异步方式通信。JMS提供了消息监听器接口MessageListener来实现消息的异步接收，根据消息事件触发执行的onMessage方法编程可对接收消息进行处理。

图3 系统的消息通信传递架构

浏览器与PLC之间双向信息传递的具体实施步骤 如下：

1）正向实时监测

将生产线数据的实时传递到客户浏览器显示，用实线表示。具体过程是：（1）PLC将传感器得到的数据通过串口发送给工控机IPC；（2）IPC通过调用Web服务将收到的数据传递给Web服务器处理；（3）Web服务器通过WebSocket消息代理将数据推送给订阅了消息的浏览器页面进行显示，同时数据也将记录到MySql数据库表格中，以便查询分析。

2）反向发布指令

反向发布指令是从浏览器发送数据给PLC处理，用虚线表示。具体过程是：（1）在工控机上的Java应用程序通过定义MessageListener对象实现对ActiveMQ消息队列的监听；（2）浏览器通过HTTP提交消息给相应Web服务；（3）Web服务借助Spring JmsTemplate将消息发送给ActiveMQ消息服务器的指定队列；（4）消息服务器通过消息驱动事件监听者的onMessage方法处理消息，将消息通过串口发送给PLC，PLC收到数据后在GOT上显示。

3 工控机对数据的接收处理

工控机的Java应用程序负责消息的中转，一方面接收来自PLC的数据，将数据通过Web服务传递到Web服务器；另一方面接收来自ActiveMQ消息队列的数据，将数据发送给PLC。

系统利用J2SE提供的扩展包comm.jar实现串口通信编程[5]。在串口通信编程中，采用多线程技术监听数据并采用字节缓冲区存储数据。2条生产线的数据分别由IPC的2个串口读取。PLC发送的数据每隔4秒传输1次，每次传输的数据为73字节，其中含供同步识别的起始和结束标记，每个参数的数据占2个字节。串口数据先由消息接收线程逐字节接收，送到消息缓冲区，在接收到1条生产线数据的结束标志时，将缓冲区数据进行分析处理，系统自动根据接收到的数据特征识别处理数据，将分析整理后的数据封装为代表生产线的Java对象，在经过Google的Gson工具包进行串行化处理后，通过Web服务调用的参数传递发送给Web服务器，这里，通过Spring的RestTemplate对象的getForObject方法调用部署在Web服务器上的REST风格的Web服务[6]。

4 Web端编程的关键处理

Web服务器端的编程处理是整个系统设计的难点，系统在浏览器端的应用界面功能均依赖Web服务端的编程。WebSocket编程处理是Web实时监测的关键，通过Spring框架的WebSocket编程支持，可实现基于发布/订阅的数据通信，浏览器只需要在页面装载时建立与服务器的WebSocket连接，并发送相应主题的订阅请求，就可以不断收到来自服务器的推送数据。

4.1 Spring4的WebSocket服务端支持

系统采用Spring4框架实现编程，通过maven实现工程的依赖管理。Spring框架只有4.0以上版本才支持WebSocket。Spring框架通过简单的注解配置就可以定义WebSocket的服务代理及访问端点。以下注解配置程序指定采用基于内存的简单消息代理，在注册stomp访问端点时设置支持SockJS连接。其中，“/topic”是消息主题端点，浏览器订阅消息以及用服务器的消息代理对象发布消息时，指示消息目标队列要使用该标识为前缀；“/app”是浏览器发送给服务器消息代理时指定消息目标的前缀；“/ws”是websocket连接端点，SockJs是一个WebSocket的通信js库，withSockJS()方法启用Spring对js库的支持。本应用中，客户浏览器与Web服务器建立WebSocket连接时通过“/monitor/ws”路径标识，其中，monitor为Web应用的工程名。各部分的具体使用关系如图4所示。Spring4消息代理采用发布/订阅的方式工作，消息发布者将消息发布到主题队列中，由消息代理将消息推送到主题队列的订阅者。

图4 消息代理配置的访问标识示意图

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSo cketMessageBrokerConfigurer {

public void configureMessageBroker(MessageBrok erRegistry config) {

config.enableSimpleBroker("/topic"); //采用简单消息代理，指明主题前缀

config.setApplicationDestinationPrefixes("/app");//用于浏览器发送消息

}

public void registerStompEndpoints(StompEndpointR egistry r) {

r.addEndpoint("/ws").withSockJS(); //指定消息代理连接端点

}

}

4.2 定义供工控机访问的Web服务

在Spring框架的控制器的配置中，通过@Controller注解定义控制器，其中允许两类Mapping并存，一种是@RequestMapping，代表定义REST风格的Web服务，接收HTTP请求，相应的注解参数为REST风格的URL路径信息；另一种是@MessageMapping，接收来自浏览器发送的WebSocket消息，相应的注解参数为消息队列，并通过所注解方法的参数获取相应的Java消息对象。

图3中Web服务1用于接收调用者发送的来自生产线1的数据，在服务处理代码中将参数传递得到数据进行反串行化处理转化为代表生产线数据的Java对象，通过依赖注入的SimpMessagingTemplate对象的convertAndSend方法将Java对象发送给WebSocket的主题名为“line1”或“line2”的队列，进而由消息代理推送给订阅了该主题的浏览器客户端。

@Controller

public class MvcController {

@Autowired private SimpMessagingTemplate template;

@RequestMapping(“/info/produceline*”)

@ResponseBody

public String lineProcess( @RequestParam(“message”) String mess,

@RequestParam(“line”) String line) {

Gson json = new Gson(); //利用Gson对象进行串行化处理

ProduceLine me = json.fromJson(mess, ProduceLine.class);

template.convertAndSend("/topic/line"+line, me); //发布消息

return "ok";

}

}

其中，ProduceLine为代表生产线的实体类，该类中封装有代表生产线的各种参数数据。应用中，为方便Java对象的传递，采用Google公司Gson对象进行串行化处理。

4.3 浏览器端HTML5的WebSocket支持

为了进行基于SockJs的stomp消息通信。客户方要用到“sockjs-0.3.4.js”和“stomp.js”。浏览器通过执行以下Javascript脚本可建立与服务器的WebSocket连接。以下代码在连接成功后，客户方将发送订阅主题“line1”的请求给服务端的消息代理。

var socket = new SockJS(‘/monitor/ws’); //连接服务器的消息代理

stompClient = Stomp.over(socket); //采用STOMP协议通信

stompClient.connect({}, function(frame) { //连接成功执行以下代码

stompClient.subscribe('/topic/line1',

function(produceLine){ //收到消息执行

mess=JSON.parse(produceLine.body);

…… //利用DHTML显示数据

});

当浏览器收到主题为“line1”的消息时，将触发执行函数function(produceLine)。通过函数参数中的body属性可得到消息内容，服务器发送的消息均进行了串行化，客户方通过用JSON.parse分析将消息内容转化为Java对象，通过访问对象的属性可得到来自生产线各设备的参数值，利用DHTML技术在页面上显示。

浏览器与Web服务器之间这种发布/订阅通信是一种高效灵活的消息推送机制。来自串口的生产线数据可以推送给所有浏览器的订阅者，某页面中也可以通过订阅不同的主题来获取来自不同发布者的数据。

4.4 浏览器端实时数据的显示处理

系统提供了总图显示和参数显示两种形式的数据监测。在总图显示中，如图5所示，利用仿真生产线各工序流程的图形作为页面显示背景，在图形的对应位置利用DHTML技术显示相关的参数数据，从而能直观形象地观测到生产线上各工序的生产状况。在总图显示的实时监控中，当前数据到达报警值时要用红色显示数据。为了方便客户方对参数的报警值和目标值的读取，系统采用HTML5的本地存储技术，每次报警检查只要与客户方的本地存储变量进行比较即可。为检查本地存储是否最新设置，可专门引入一个时间变量，当本地记录的时间变量与服务器参数设置的时间变量不一致，则代表参数设置有变，系统利用AJAX技术获取存储在服务器上的XML参数配置信息。可在网页加载时进行参数变化检查，并通过WebSocket通道订阅参数变化消息，来跟踪参数的变化，特权账户每次更改参数将发布参数变化消息，如此可保持客户本地存储的参数信息与服务器上XML文件中配置信息的同步一致。应用效率也能保持高效。

图5 总图显示

在参数曲线显示中，采用HTML5的canvas实现各监控项目的数据变化曲线的图形绘制，如图6所示。Canvas实现曲线绘制过程：1）用Canvas的getContext("2d")取得图形环境，后面的操作均针对图形环境对象进行访问；2）用strokeStyle属性设置颜色；3）用其moveTo方法定位起点；4）用lineTo方法定位要经过的点；5）用stroke()方法实现线条填充绘制。但要注意，为了在同一画布中绘制不同颜色的曲线，每次绘制新线条前要使用beginPath()方法进行设置，否则，Canvas会用最后的颜色去填充所有的线条。

图6 参数显示

上面的曲线绘制的内容是当前时刻生产线的数据，对于本班已有数据应先行绘制，系统采用AJAX技术获取数据，在服务器上还将来自生产线的数据存储在一个数组列表中，数组列表的内容动态增加。如此，可保证查看不同参数时能看到完整的曲线变化。

4.5 自动根据查询要求生成Web报表

根据用户需求，系统设计了多种查询和报表，包括每天各班种的日生产统计报表，企业的月统计报表。本系统是要在Web页面中显示报表，系统利用Spring框架的PDF视图实现报表显示，在访问控制器设计时，通过REST的访问参数得到报表需要的参数数据，将参数数据填入模型传递给视图。Spring的AbstractPdfView抽象类用于生成PDF格式的视图，通过覆盖该类的buildPdfDocument方法可将代码产生的PDF文档送客户端。系统利用iText组件实现PDF报表的动态生成[7]。报表处理需要引入com.lowagie.text依赖，但注意com.lowagie.text引入的jar包不支持中文，需要进行特殊处理。本系统采用Window系统的字体来构建基本字体对象。

BaseFont basefont = BaseFont.createFont("c：\windows\fonts\simkai.ttf",

BaseFont.IDENTITY_H, BaseFont.NOT_EMBEDDED)；

在基本字体的基础上，表格内容使用的字体可再设置具体的大小。例如：

Font myfont= new Font(basefont, 18)；

借助PdfPTable及相关类可容易编程方式生成报表，并实现报表数据的动态填写。最后，视图返回给浏览器的就是一个PDF报表文档，客户可打印或另存该文档。

4.6 Spring任务定时在班组切换中应用

根据厂商要求，需要按白班和晚班进行生产数据的统计。19：00前开机为白班，19：00以后开机为晚班。连续作业到19：00时自动转为晚班状态，连续作业到早上7：00时自动转为白班状态。在换班时要对统计变量进行初始化。另外系统要求每隔1分钟要对期间的数据进行1次分析处理，将数据写入历史表，以便日后统计分析。Spring框架提供的任务定时机制可容易实现此类应用需求，最直观高效的是采用@Scheduled注解的方法[8]。只需要在方法前加上@Scheduled注解，并通过cron表达式或者fixedDelay就可让方法按指定的时刻或间隔定时执行。例如，@Scheduled(cron = "0 0 7 * * ?") 指定每天早7点执行, @Scheduled(fixedDelay = 60000) 指定每隔1分执行。

5 结束语

本文介绍的企业生产线监测系统采用分布式架构方式，通过引入Web服务和消息队列实现应用各组成部分之间数据传递的松耦合。实际企业中由于场地条件，工控机采用无线上网，而Web服务器可以部署在Internet的任何一台服务器上。来自PLC生产线数据通过数据传输，可及时传递到Web服务器上，并通过基于WebSocket的发布/订阅通信实时推送到浏览器客户端。

该系统通过统一的架构对来自企业的两条生产线的数据实施监控。通过Web服务的参数区分数据所处生产线，可以对两条生产线同时进行监测、并自动实现数据记录和统计。有效提升了企业的产品管理能力，有利于企业产品质量监督和控制。

[1] 李慧云,何震苇,李丽,等.HTML5技术与应用模式研究[J].电信科学,2012.5：24-29.

[2] 戚立强,叶文华,陈蔚芳,等.基于PLC的废金属破碎生产线监控系统设计[J].制造业自动化,2014.36(1)：117-119.

[3] 丁振凡.Spring REST风格Web服务的Json消息封装及解析研究[J].智能计算机与应用,2012.2(2)：9-11.

[4] 丁振凡,李馨梅.基于JdbcTemplate的数据库访问处理[J].智能计算机与应用,2012.2(3)：29-32.

[5] 丁振凡.基于Spring Security的Web资源访问控制[J].宜春学院学报,2012.34(8)：71-74.

[6] 丁振凡,王小明,邓建明,等.基于Java的串口通信应用编程[J].微型机与应用,2012.31(13)：84-86.

[7] 丁振凡,王小明,吴小元,等.利用iText包实现Java报表打印[J].微型机与应用,2012.31(18)：84-86.

[8] 丁振凡.Spring3.x编程技术与应用[M].北京：北京邮电大学出版社,2013.8.