Development of Web monitoring system using DWR framework and reverse AJAX

Using DWR framework and reverse AJAX, combined with Java multi-threading technology and Siemens SimaTIc S7-400 PLC TCP / IP communication module CP243-1 IT, a new Web monitoring system was developed and applied to the heating pipeline monitoring system of heating companies in. It replaces the original C / S mode industrial control machine and meets the user's functional requirements.

Using Web as the client of the monitoring system greatly facilitates the operation and management personnel of the monitoring system and reduces the maintenance cost of the monitoring system. How to solve the shortcomings of the data reading request / response mode of the traditional Web monitoring system and the problem of refreshing the display page of the monitoring data [1] has always been a problem of the unremitting efforts of developers of Web monitoring systems.

In the realization of various technologies of Web monitoring system, each has its own advantages, AJAX technology has become one of the first choices, regardless of whether the server uses JavaEE or MS.NET platform. Although AJAX solves the problem of partial refresh of the entire monitoring screen, AJAX still uses the HTTP request / response mode to read the web monitoring data obtained by the server [2]. The latest version of the AJAX framework DWR [3] has introduced the reverse AJAX technology, which makes it possible to push data from the server to the Web client and meet the real-time requirements of the monitoring system.

Adopt DWR framework and reverse AJAX, combined with Java multi-thread technology and Siemens SimaTIc S7-400 PLC TCP / IP communication module CP243-1 IT, developed a new Web monitoring system, and in the heating company's heating pipeline monitoring system practical use. It replaces the original C / S mode industrial control machine to meet the user's functional requirements.

1 DWR technology

1.1 DWR framework

DWR (Direct Web RemoTIng) is a Web remote calling AJAX extension framework, through the DWR client JavaScript can directly call the JavaBean class method on the Web server, solving the original AJAX application must request HTTP control components (such as Servlet, Struts AcTIon Etc.) can call the method of the server-side business class, thereby simplifying the development of AJAX applications. Using DWR eliminates the need to write complex control layer components.

1.2 DWR reverse AJAX technology

Under normal circumstances, DWR calls the server-side JavaBean object method to use the forward request / response mode, also known as the pull model (Pull Model). The client-side JavaScript calls the JavaBean method, and the returned result is updated through the callback method to update the HTML element on the page. Monitor the display of data. This forward mode is in line with general management system applications, but it is not effective for applications that require high real-time performance of the monitoring system. The reverse mode is the push model, which is the best way to adapt to the monitoring system. The server component pushes the obtained monitoring data to the Web client. It does not require the client to actively request it, but receives it passively. Therefore, the data update display can be realized without refreshing the page in the Web layer.

The latest version of DWR 2.X adds the Reverse AJAX function. Through the reverse AJAX function, the server-side JavaBean object can push the obtained data directly to the specified client page and write it to the specified HTML element. This The process does not require the client to perform any request operations.

2 Design and implementation of monitoring system

2.1 Overall structure

The entire monitoring system adopts a three-layer structure of lower-level monitoring subsystem, upper-level Web server and client, as shown in Figure 1.


The lower monitoring subsystem adopts Siemens Simatic S7-400 PLC, connects temperature, pressure and flow sensors, and configures TCP / IP communication control unit (CP343). The upper web server uses the open source Tomcat 6.0.20, which optimizes the performance for the new JDK6, greatly improves the response speed, and meets the real-time monitoring needs. The DWR Servlet is configured in the Tomcat6 Web and is responsible for communicating with the client Javascript The terminal uses JavaBean multi-thread technology, communicates with PLC through Socket and TCP / IP protocol, reads PLC monitoring data, and uses DWR reverse AJAX technology to push the monitoring data to the HTML element of the client for display. The client uses IE browser to passively receive the data pushed by the server and update the monitoring data in real time.

2.2 Server-side DWR configuration

In order to use DWR, you need to configure the DWR Servlet in /WEB-INF/web.xml and set the request URL address, and at the same time enable reverse AJAX by setting the parameter activeReverseAjaxEnabled to true. The configuration code is as follows:

2.3 Monitoring Business Unit JavaBean Programming

(1) Server-side JavaBean

In a multi-threaded manner, each monitoring point is an independent thread, using TCP / IP and Socket to read the monitoring data of Siemens Simatic S7 PLC, and using DWR Reverse AJAX and DOM to write directly into the HTML of the client. The code of one of the monitoring point threads is as follows:

The key is to use the setValue method of the DWR reverse AJAX Util object to write the monitoring data to the cell whose DIV element id is siteNo value.

(2) Configure JavaBean to DWR

Using the DWR configuration file /WEB-INF/dwr.xml, JavaBean is introduced into the DWR system, and the JavaBean monitoring method can be directly called through JavaScript.

Among them, the javascript attribute specifies the name of the object in JavaScript, creator = "new" specifies that the DWR engine automatically creates an instance of the JavaBean class.

2.4 Client implementation

The client uses the DWR code base, uses JavaScript combined with HTML, and DOM to monitor the data displayed on the Web page. To save space, only the key configuration and schematic code are introduced.

(1) Introduce DWR code base

The principle of separating HTML from JavaScript is used here, and the JavaScript code is placed in a separate JS file.

(2) Enable DWR reverse AJAX

Define all functions for monitoring business in main.js.

(3) Define the HTML unit for monitoring data reception

Use on monitoring page

Define the display position of the DWR reverse AJAX push data, which is directly read by the server-side JavaBean through DWR AJAX. The client page and JavaScript do not need to perform any request operations. Some measurement points are as follows:

(4) JavaScript calls JavaBean method

Start the server-side JavaBean monitoring method to read PLC data and push data. In the monitoring method, start the monitoring thread of all monitoring points, real-time monitoring data and push to the client.

Combining the JavaEE platform, AJAX, DWR and reverse AJAX, a brand-new Web monitoring system that does not require page refresh and HTTP request is realized, which solves the problem that the traditional Web HTTP request / response mode cannot meet the real-time requirements of the monitoring system . In particular, the push mode implemented by the reverse AJAX technology can push the server-side monitoring data directly to the HTML client through TCP / IP and write it directly into the HTML element, which can be completely different from the traditional mode of the existing Web monitoring system. The brand-new system realizes the working mode without page refresh. Since only the monitoring data is transmitted without the need to transmit the data format HTML code, the system performance has been greatly improved and the monitoring system's real-time requirements have been met. In the future, the Web monitoring system without refresh and push mode will be widely used.

In order to meet customer commercial use, we developed and strongly recommend our 5.5inch PDA Handheld Terminal. With its stylish and fashionable appearance, it gains popularity in market. It is not only a Barcode Scanner PDA with built in printer, but also can support expand functions such as UHF reader, Fingerprint scanner, IC card reader and etc. Welcome to contact us for more information!

5.5inch PDA Handheld Terminal

5.5inch PDA Handheld Terminal

Pda Rfid Scanner,Pda With Fingerprint Scanner,Pda With Built In Scanner,Android Handheld Terminal With Printer

Shenzhen Qunsuo Technology Co., Ltd , https://www.qsprinter.com

Posted on