基于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?？删幊炭刂破鱌LC是工業控制系統中最常用的控制器，它具有抗干擾好，可靠性高的特點[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參數配置信息?？稍诰W頁加載時進行參數變化檢查，并通過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.