丁振凡

(华东交通大学信息工程学院，江西 南昌 330013)



基于Spring4+HTML5的实时监控应用通信与显示处理

丁振凡

(华东交通大学信息工程学院，江西 南昌 330013)

针对某企业生产线远程数据监测应用中消息推送与显示处理的问题，提出基于Sping4+HTML5的实现方案.采用WebSocket技术实现浏览器与Web服务器的双向消息通信.研究了Spring的WebSocket服务配置和实现消息推送的处理流程，描述了客户方与服务方如何建立SockJS连接，以及实现基于STOMP的消息发布/订阅处理的具体方法.将消息推送封装为REST风格的Web服务，方便调用者发布消息.系统采用HTML5的Canvas实现数据的实时显示处理，可在同一画面中显示各种颜色的曲线.Sping4+HTML5方案具有配置简单、应用灵活、运行效率高等特点，在实际应用中取得了很好的效果.

HTML5;Spring4;WebSocket;Canvas;实时监控;SockJS

随着Web应用的不断深入，在Web界面中实时应用的显示处理一直是研究人员关注的问题，最大的难点是实时数据以何种方式送浏览器显示的问题.由HTTP协议的特点，浏览器与Web服务器之间的连接不能持久保持，浏览器与Web服务器的通信是基于请求/响应的方式.为了持续获取来自生产线的数据，最早是页面定时刷新的方法，后来出现了基于AJAX的定时轮询方式，这种拉方式效率不高，最大问题是客户端请求的频率与服务器端数据更新频率通常会不一致，从而造成网络流量浪费.理想的方法是采用推方式，由服务器将数据推送到浏览器显示，但推方式在技术处理上一直不尽人意，例如采用JAVA applet通信，现在浏览器普遍不支持Applet技术.HTML5的出现为实时应用的通信、显示处理提供了很好的支撑.HTML5 WebSocket 规范定义了WebSocket API，支持页面使用WebSocket 协议与远程主机进行全双工的通信[1].基于WebSocket的通信，可通过消息订阅的推送方式获取数据，实现更为高效的数据传输.WebSocket通过HTTP的子协议来实现消息的传送，STOMP是典型采用的简单消息传送协议.WebSocket目前已经得到IE9，Firefox4，Chrome4 等浏览器，以及Jetty7和Tomcat8等服务器的支持.HTML5的Canvas提供的丰富图形功能可支持浏览器上图形显示编程处理.在智能手机平台也可利用WebSocket结合HTML5实现实时监控[2].

Spring是一种轻量级的开源框架，它具有支持Bean属性的依赖注入、支持面向切面编程等众多特点.Spring Web编程提供了基于REST风格的MVC模式，可方便编写基于REST风格的Web服务.Spring MVC将Web应用程序抽象为模型、视图和控制器3个部分.通过DispatcherServlet这个特殊的控制器处理用户的请求，该控制器在处理HTTP请求时根据Mapping信息查找对应的控制器，实现控制分派[3].2013年底正式推出的Spring4中增加了对WebSocket的支持，并支持STOMP，通过开启SockJS的服务，同时提供相应的URL映射，就可支持基于WebSocket的消息通信.

1 生产线实时监控系统设计

应用系统是用浏览器显示2条生产线上设备的实时状态信息.系统架构如图1所示.

图1 生产线实时监控系统的架构

通过PLC组件获取生产线上各种设备的工作状态参数(如温度、压力变化)，并通过其通信模块与Web服务器的串口通信.每个串口与1条PLC组件的通信模块进行连接.服务器方的串口通信模块采用Java的comm组件编程[4].串口在收到消息后，经过分析处理，再调用Spring MVC实现的REST风格的Web服务将消息借助WebSocket通道推送到浏览器显示.服务端的消息代理(Message Broker)实现与浏览器之间的基于发布/订阅的消息通信.

2 服务方WebSocket编程处理

系统采用Maven工程设计，为支持WebSocket，需要添加Spring-messaging，Spring-WebSocket，Jackson-databind等依赖.Spring的配置可通过注解或XML方式定义[3].采用注解方式配置Spring的控制器和WebSocket.系统中面向消息的WebSocket应用与HTTP应用并存，作为一个Web应用项目，要进行Servlet的配置，在Servlet的配置中加入如下2行，表示支持注解方式定义配置及指定查找配置程序的包路径信息：

.

2.1 Spring 的WebSocket配置

以下注解配置指定采用基于内存的简单消息代理.其中：“/topic”是简单代理的端点，所有发送给客户端的消息要以“/topic”为前缀；“/app”是浏览器请求编码的前缀，所有由客户发送给消息代理的消息要以“/app”为前缀；“/monitor”是websocket连接端点，客户与服务器建立WebSocket连接时通过“/wxm/monitor”，wxm为Web应用路径名.

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{

public void configureMessageBroker(MessageBrokerRegistry config){

config.enableSimpleBroker("/topic");

config.setApplicationDestinationPrefixes("/app");

}

public void registerStompEndpoints(StompEndpointRegistry r){

r.addEndpoint("/monitor").withSockJS();

}

}

根据需要还可以将ActiveMQ和RabbitMQ等消息队列代理与WebSocket进行捆绑，用消息代理作为中继，这样可利用RabbitMQ的Web监控功能监控应用的消息收发状况，同时也方便基于消息的应用集成处理.在配置代码中只需作如下改动：

config.enableStompBrokerRelay("/topic").

2.2 WebSocket通信与Spring MVC的整合

在控制器的配置中，允许2类Mapping并存，一种是@RequestMapping，接收来自浏览器的HTTP请求，注解参数为REST风格的路径信息；另一种是@MessageMapping，接收来自浏览器发送的WebSocket消息.在Spring中，用REST风格的路径标识来表示消息目标，该目标对应消息队列中的主题.@MessageMapping的注解参数代表消息源的目标，通过其注解方法参数传递消息对应的Java对象.Spring的WebSocket和SockJS并不依赖Spring MVC，它是通过SockJSHTTPRequestHandler将WebSocket支持集成到HTTP服务环境.

在以下控制器定义中列出了2个方法：(1)方法line1用于将生产线1的消息进行推送，来自请求参数message的消息是实体类ProduceLine中数据对象的Json表示的串，ProduceLine类中封装有代表生产线的各种参数数据.应用中采用Google公司Gson类实现对Java对象的Json串行化处理，以方便Java对象的传递.借助自动依赖注入得到的SimpMessagingTemplate对象，用其convertAndSend方法可发送消息给“/topic/line1”主题.(2)方法curve用于进入显示生产线的参数变化曲线的页面.

@Controller

public class MvcController{

@Autowired private SimpMessagingTemplate template;

@RequestMapping("/info/line1*")

@ResponseBody

public String line1(@RequestParam("message") String message){

GsonJson=new Gson();

ProduceLine me=json.fromJson(message,ProduceLine.class); ∥由Json串得到Java对象

template.convertAndSend("/topic/line1",me); ∥发布消息给/topic/line1主题

return "message send ";

}

@RequestMapping("/curve*") ∥监视生产线参数页面

public String curve(@RequestParam("line") String line,Model m){

m.addAttribute("line",line); ∥生产线编号

return "curveinfo"; ∥用curveinfo.jsp视图显示

}

}

图2 应用的消息通信处理流程

通过定义REST风格的Web服务对消息发送进行封装，可以在任何需要的地方调用该服务进行消息的发送.图2给出了应用的消息通信处理流程.

利用Spring的RestTemplate可调用上面方法line1对应的REST风格的Web服务[3]，应用中只要调用以下定义的sendProduceLine方法就可将生产线数据推送给客户：

public static void sendProduceLine(ProduceLine data){

RestTemplate template=new RestTemplate();

GsonJson=new Gson();

String msg=Json.toJson(data)；∥Java对象转Json串

template.getForObject("http:∥localhost:8080/wxm/info/line1?message={message}",String.class,new Object[]{msg});

}

Spring的WebSocket也可接收客户方发送的消息并转发该消息.对于控制器定义的带@MessageMapping注解的方法，可用@SendTo注解加在方法头前，表示将方法的结果作为消息负载发送给指定主题的订阅者.例如，以下Mapping方法，服务端收到客户浏览器发送给目标“app/hello”的消息后，将在消息前增加“hello：”，再转发给“/topic/welcome”的订阅者，这种方式可用于实时聊天等应用：

@MessageMapping("/hello")

@SendTo("/topic/welcome")

public String welcome(String message) throws Exception{

return new String("Hello:"+message+"!");

}

3 客户端WebSocket通信处理

为了支持基于SockJS的Stomp消息通信，客户方要用到“sockjs-0.3.4.js”和“stomp.js”这2个js文件.客户方通过执行以下Javascript脚本可建立与服务器的WebSocket连接，在Stomp通信中，使用最多的命令是发送消息命令send和订阅消息命令subscribe：

var Socket=new SockJS(′/wxm/monitor′)；

stompClient=Stomp.over(Socket)；

stompClient.connect({},

function(frame){

stompClient.subscribe(′/topic/line${line}′,

function(produceLine){

obj= Json.parse(produceLine.body)； ∥取得封装在消息中的Java对象

drawCurve(1,1,1,obj.temperature1); ∥绘制温度曲线

…

});

}

注意，客户方在指定连接的WebSocket端点(endpoint)时要加上Web应用名，这里为“wxm/monitor”.连接成功后将执行function(frame)方法，进而通过调用StompClient对象的subscribe方法订阅主题为“/topic/line${line}”的消息，这里，${line}是来自MVC模型的代表生产线编号的数据，其值为1或2.消息broker在收到主题对应的消息时将发送给浏览器，function(produceLine)是消息到达时触发执行的消息处理函数，它将通过Json.parse方法对消息体进行分析，提取设备的温度值，调用drawCurve方法绘制出温度实时变化曲线.

需要说明的是，这里为清晰起见，将所有主题描述均加上了“/topic”前缀.若用ActiveMQ作为代理中继，则可在ActiveMQ的监控页面看到主题名称仅为“/topic”之后的部分(如line1).由于“/topic”是代理的端点，因此实际发送消息给主题时必须以“/topic”为前缀.

浏览器与服务器间这种基于发布/订阅的消息推送机制是一种高效灵活的数据传递方式.来自生产线的数据不仅可以同时提供给不同浏览器的订阅者，同一个页面中也可以通过订阅不同的主题获取来自不同发布者的数据(如应用系统中就有一个页面要同时显示来自2条生产线的数据).订阅者只需进行1次订阅就可不断接收数据，数据的推送频率由提供者决定，消息通信效率很高，避免了AJAX等轮询技术需要每次发送请求来获取数据所带来的低效问题.

4 实时监测数据的变化曲线绘制

以往Web实时监测应用，大多采用SVG或VML实现图形绘制[5-6]，编程较复杂，应用也有局限.本系统采用HTML5的Canvas实现数据变化曲线的绘制，代码简练.由于实际应用中需要观察的监测参数的数量众多，每个参数有自己的变化曲线，考虑到这些曲线的绘制方法是一样的，只是颜色不同，绘制的画布不同，因此合并用一个函数drawCurve实现绘制.绘制曲线时要记下上一点的位置，各条曲线的上一点位置安排存储在2个全局数组x和y中，且给y数组的元素赋初值0，给x数组的元素赋初值为坐标轴起点在Canvas中的实际位置.定义一个全局字符串类型的数组color，存储要使用的几种颜色值.

function drawCurve(index,canvas,colorIndex,value){

if (y[index]!=0){

var c=document.getElementById("myCanvas"+canvas);

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.strokeStyle=color[colorIndex]; ∥设置线条颜色

ctx.moveTo(x[index],170-y[index]);

var x2=x[index]+1; ∥x坐标每次增加1

ctx.lineTo(x2,170-value)；

ctx.stroke(); ∥线条的填充绘制

if (x2>450){ ∥绘制到画布最右边位置，清除画面

ctx.clearRect(36,0,450,180)；

x2=36；

}

x[index]=x2；

}

y[index]=value; ∥记下新位置点

}

Canvas实现曲线绘制的方法很简单，用moveTo方法定位起点，用lineTo方法定位要经过的点，用stroke()方法实现线条填充绘制.

5 结语

Spring4+HTML5的Web实时应用设计方案具有广泛的应用空间.客户端和服务方用基于SockJS连接的Stomp协议实现数据的传送，通过消息的发布/订阅机制实现生产线数据的远程监测，并用HTML5的Canvas实现图形绘制.Spring4通过很好的封装设计，可让编程者容易地配置基于SockJS的消息代理服务.本设计是将消息推送封装为Web服务，其好处是可以实现应用部件之间的松耦合.实践证明，该方案具有配置简单、编程方便、运行效率高等特点.

[1] 李慧云,何震苇,李 丽,等.HTML5技术与应用模式研究[J].电信科学,2012,28(5):24-29.

[2] 张延召,陈少红.基于智能手机平台的实时控制系统[J].计算机应用与软件,2013,30(7):236-239.

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

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

[5] 杨 斌,张利欣,章立军,等.基于SVG的Web远程实时监测客户端研究[J].计算机应用研究,2010,27(6):2 144-2 146.[6] 刘 丹,李 刚,田银枝,等.利用VML和SVG绘制军标箭头符号的算法实现[J].测绘科学,2014,39(4):115-118.

(责任编辑 向阳洁)

Communication and Display Processing for the Real-Time Monitoring Application Based on Spring4+HTML5

DING Zhenfan

(School of Information Engineering,East China Jiaotong University,Nanchang 330013,China)

In view of message pushing and display processing problems in the remote data monitoring application for the production line in one enterprise,this paper proposes an implementation scheme based on HTML5 and the Spring framework 4.WebSocket technology is used for the message transfer on the two way communication between the web browser and Web server.The Spring WebSocket service configuration and the processing scheme for message pushing are studied.The creation of SockJS connection between the client and server and the processing method for STOMP message publishing/subscription are described.By providing the REST style Web services with the messages pushing process,it is convenient for the caller to publish message.The system adopts Canvas in HTML5 for the real time data display processing,thus achieving the effect of displaying curves of various colors in the same screen.The Spring4+HTML5 scheme has the advantages of easy configuration,flexible application and efficient operation and can get satisfactory practical effects.

HTML5;Spring4;WebSocket;Canvas;real-time monitoring;SockJS

1007-2985(2015)04-0018-05

2014-10-12

丁振凡(1965—)，男，江西丰城人，华东交通大学信息工程学院教授，硕士生导师，主要从事云计算、语义Web、计算机辅助教学等研究.

TP393

A

10.3969/j.issn.1007-2985.2015.04.005