DWR+VML实时曲线
最近公司要求做一个WEB端的服务器实时流量利用率监控曲线！具体做法是后台采用SNMP4J采集服务器流量，前台采用DWR调用后台Bean得到数据，然后利用VML显示曲线。
1、DWR配置，先把DWR.jar加入到WEB-INF/lib下。
在web.xml下加入如下片段：
2、加入SNMP4J.JAR包，将SNMP4J.JAR加入到WEB-INF/lib下，写好流量采集代码，如下：
1
package
com.wingo.util;
2
3
4 import org.snmp4j.CommunityTarget;
5 import org.snmp4j.PDU;
6 import org.snmp4j.Snmp;
7 import org.snmp4j.TransportMapping;
8 import org.snmp4j.event.ResponseEvent;
9 import org.snmp4j.smi.Address;
10 import org.snmp4j.smi.GenericAddress;
11 import org.snmp4j.smi.OID;
12 import org.snmp4j.smi.OctetString;
13 import org.snmp4j.smi.VariableBinding;
14 import org.snmp4j.transport.DefaultUdpTransportMapping;
15
16 /**
17 * snmp代理工具类
18
19 *
20 * <pre>
21 * ***************************************************************
22 * Copyright. Wingo 2006 ALL RIGHTS RESERVED.
23 *
24 * This software is only to be used for the purpose for which it
25 * has been provided. No part of it is to be reproduced,
26 * disassembled, transmitted, stored in a retrieval system or
27 * translated in any human or computer language in any way or
28 * for any other purposes whatsoever without the prior written
29 * consent of Wingo.
30 * ***************************************************************
31 *
32 * Class Name: SnmpUtil.java
33 * Creation Date: 2007-8-6
34 * Description:
35 *
36 * Amendment Date CMM/PPCRNo. Programmer Description
37 * 2007-8-6 Administartor create
38 * </pre>
39 *
40 * @author Administartor
41 * @version 1.0
42 */
43 public class SnmpUtil {
44
45 public static final int version1 = 0 ;
46
47 public static final int version2c = 1 ;
48
49 public static final int version3 = 3 ;
50
51 private static TransportMapping transport = null ;
52 private static Snmp protocol = null ;
53 /**
54 * 创建snmp连接
55 */
56
57 public static Snmp createSnmp() {
58 try {
59 // 设定采取的协议
60 TransportMapping transport = new DefaultUdpTransportMapping();
61 if ( false && transport == null || protocol == null ) {
62 transport = new DefaultUdpTransportMapping();
63 protocol = new Snmp(transport);
64 transport.listen();
65 }
66 return protocol;
67 }
68 catch (Exception ex) {
69 ex.printStackTrace();
70 }
71 return null ;
72 }
73
74 /**
75 * 连接目标机器
76 * url格式：udp:192.168.1.168/161 community:默认是public
77 */
78 public static CommunityTarget createTarget(String url, String community, int version) {
79 // 设定CommunityTarget
80 CommunityTarget myTarget = new CommunityTarget();
81 Address deviceAdd = GenericAddress.parse(url);
82 myTarget.setAddress(deviceAdd);
83 myTarget.setCommunity( new OctetString(community));
84 myTarget.setRetries( 2 );
85 myTarget.setTimeout( 5 * 60 );
86 myTarget.setVersion(version); // org.snmp4j.mp.*;
87 return myTarget;
88 }
89
90 /**
91 * 获取当前OID的值，如果不存在返回null
92 * url 格式为udp:192.168.1.168/161
93 */
94 public static PDU get(String url, String community, int version, String oid) {
95 return get(url,community,version2c, oid, PDU.GET);
96 }
97
98 /**
99 * 获取当前OID的下一个节点的值
100 * 格式为udp:192.168.1.168/161
101 */
102 public static PDU getNext(String url, String community, int version, String oid) {
103 return get(url,community,version2c, oid, PDU.GETNEXT);
104 }
105
106 /**
107 * 得到一个PDU类
108 */
109 private static PDU get(String url, String community, int version, String oid, int type) {
110 try {
111 Snmp protocol = createSnmp();
112 CommunityTarget target = createTarget(url, community, version);
113 VariableBinding var = new VariableBinding( new OID(oid));
114
115 PDU request = new PDU();
116 request.add(var);
117 request.setType(type); // PDU.GETNEXT
118 ResponseEvent responseEvent = protocol.send(request, target);
119
120 return responseEvent.getResponse();
121 } catch (Exception ex) {
122 ex.printStackTrace();
123 }
124 return null ;
125 }
126
127 /**
128 * 获得具体的值，在此为了测试，采用随机数
129 * @return
130 */
131 public double getValue(){
132 double value = 0 ;
133 String url = " udp:192.168.1.38/161 " ;
134 String community = " public " ;
135 int version = SnmpUtil.version2c;
136 PDU response = SnmpUtil.get(url, community, version, " 1.3.6.1.2.1.2.2.1.10 " ,PDU.GETNEXT);
137 for ( int i = 0 ; response != null && i < response.size(); i ++ ) {
138 value = response.get( 0 ).getVariable().toLong(); // 取得当前的值
139 }
140 // 下面一行代码为方便测试采用产生随机数，由于在页面上是利用率，所以前面取得当前值的时候要把它计算成当前利用率
141 value = Math.random() * 100 ;
142 return value;
143 }
144
145 public static void main(String[] str) {
146 String url = " udp:192.168.1.38/161 " ;
147 String community = " public " ;
148 int version = SnmpUtil.version2c;
149
150 try {
151 PDU response = SnmpUtil.get(url, community, version, " 1.3.6.1.2.1.2.2.1.10 " ,PDU.GETNEXT);
152 for ( int i = 0 ; response != null && i < response.size(); i ++ ) {
153 System.out.println( " ***** " + response.get( 0 ).getVariable());
154 }
155 } catch (Exception ex) {
156 ex.printStackTrace();
157 }
158
159 }
160
161 }
162
2
3
4 import org.snmp4j.CommunityTarget;
5 import org.snmp4j.PDU;
6 import org.snmp4j.Snmp;
7 import org.snmp4j.TransportMapping;
8 import org.snmp4j.event.ResponseEvent;
9 import org.snmp4j.smi.Address;
10 import org.snmp4j.smi.GenericAddress;
11 import org.snmp4j.smi.OID;
12 import org.snmp4j.smi.OctetString;
13 import org.snmp4j.smi.VariableBinding;
14 import org.snmp4j.transport.DefaultUdpTransportMapping;
15
16 /**
17 * snmp代理工具类
18
19 *
20 * <pre>
21 * ***************************************************************
22 * Copyright. Wingo 2006 ALL RIGHTS RESERVED.
23 *
24 * This software is only to be used for the purpose for which it
25 * has been provided. No part of it is to be reproduced,
26 * disassembled, transmitted, stored in a retrieval system or
27 * translated in any human or computer language in any way or
28 * for any other purposes whatsoever without the prior written
29 * consent of Wingo.
30 * ***************************************************************
31 *
32 * Class Name: SnmpUtil.java
33 * Creation Date: 2007-8-6
34 * Description:
35 *
36 * Amendment Date CMM/PPCRNo. Programmer Description
37 * 2007-8-6 Administartor create
38 * </pre>
39 *
40 * @author Administartor
41 * @version 1.0
42 */
43 public class SnmpUtil {
44
45 public static final int version1 = 0 ;
46
47 public static final int version2c = 1 ;
48
49 public static final int version3 = 3 ;
50
51 private static TransportMapping transport = null ;
52 private static Snmp protocol = null ;
53 /**
54 * 创建snmp连接
55 */
56
57 public static Snmp createSnmp() {
58 try {
59 // 设定采取的协议
60 TransportMapping transport = new DefaultUdpTransportMapping();
61 if ( false && transport == null || protocol == null ) {
62 transport = new DefaultUdpTransportMapping();
63 protocol = new Snmp(transport);
64 transport.listen();
65 }
66 return protocol;
67 }
68 catch (Exception ex) {
69 ex.printStackTrace();
70 }
71 return null ;
72 }
73
74 /**
75 * 连接目标机器
76 * url格式：udp:192.168.1.168/161 community:默认是public
77 */
78 public static CommunityTarget createTarget(String url, String community, int version) {
79 // 设定CommunityTarget
80 CommunityTarget myTarget = new CommunityTarget();
81 Address deviceAdd = GenericAddress.parse(url);
82 myTarget.setAddress(deviceAdd);
83 myTarget.setCommunity( new OctetString(community));
84 myTarget.setRetries( 2 );
85 myTarget.setTimeout( 5 * 60 );
86 myTarget.setVersion(version); // org.snmp4j.mp.*;
87 return myTarget;
88 }
89
90 /**
91 * 获取当前OID的值，如果不存在返回null
92 * url 格式为udp:192.168.1.168/161
93 */
94 public static PDU get(String url, String community, int version, String oid) {
95 return get(url,community,version2c, oid, PDU.GET);
96 }
97
98 /**
99 * 获取当前OID的下一个节点的值
100 * 格式为udp:192.168.1.168/161
101 */
102 public static PDU getNext(String url, String community, int version, String oid) {
103 return get(url,community,version2c, oid, PDU.GETNEXT);
104 }
105
106 /**
107 * 得到一个PDU类
108 */
109 private static PDU get(String url, String community, int version, String oid, int type) {
110 try {
111 Snmp protocol = createSnmp();
112 CommunityTarget target = createTarget(url, community, version);
113 VariableBinding var = new VariableBinding( new OID(oid));
114
115 PDU request = new PDU();
116 request.add(var);
117 request.setType(type); // PDU.GETNEXT
118 ResponseEvent responseEvent = protocol.send(request, target);
119
120 return responseEvent.getResponse();
121 } catch (Exception ex) {
122 ex.printStackTrace();
123 }
124 return null ;
125 }
126
127 /**
128 * 获得具体的值，在此为了测试，采用随机数
129 * @return
130 */
131 public double getValue(){
132 double value = 0 ;
133 String url = " udp:192.168.1.38/161 " ;
134 String community = " public " ;
135 int version = SnmpUtil.version2c;
136 PDU response = SnmpUtil.get(url, community, version, " 1.3.6.1.2.1.2.2.1.10 " ,PDU.GETNEXT);
137 for ( int i = 0 ; response != null && i < response.size(); i ++ ) {
138 value = response.get( 0 ).getVariable().toLong(); // 取得当前的值
139 }
140 // 下面一行代码为方便测试采用产生随机数，由于在页面上是利用率，所以前面取得当前值的时候要把它计算成当前利用率
141 value = Math.random() * 100 ;
142 return value;
143 }
144
145 public static void main(String[] str) {
146 String url = " udp:192.168.1.38/161 " ;
147 String community = " public " ;
148 int version = SnmpUtil.version2c;
149
150 try {
151 PDU response = SnmpUtil.get(url, community, version, " 1.3.6.1.2.1.2.2.1.10 " ,PDU.GETNEXT);
152 for ( int i = 0 ; response != null && i < response.size(); i ++ ) {
153 System.out.println( " ***** " + response.get( 0 ).getVariable());
154 }
155 } catch (Exception ex) {
156 ex.printStackTrace();
157 }
158
159 }
160
161 }
162
3、配置DWR函数调用：
在WEB-INF文件夹下创建dwr.xml文件，具体代码如下：
4、页面调用：
1
<%
@ page language
=
"
java
"
import
=
"
java.util.*
"
pageEncoding
=
"
UTF-8
"
%>
2 < html xmlns:v ="urn:schemas-microsoft-com:vml" >
3 < head >
4 < title > 动态创建VML </ title >
5 </ head >
6 < STYLE >
7 v\:* { BEHAVIOR : url(#default#VML) }
8 </ STYLE >
9 < script language ="JavaScript" >
10 var art = new Array( 21 ); // 定义数据存储数组
11 var str = ''; // 线的数据组合
12 for (i = 0 ;i <= 20 ;i ++ ){ // 初始化一条直线，在坐标的底部
13 art[i] = i * 10 + " ,200 " ;
14 str = str + art[i];
15 }
16
17 // 绘制一条性能曲线。
18 function createLine(str){
19 if (document.getElementById( " temp " )){
20 var temp = document.getElementById( " temp " );
21 temp.removeNode( true ); // 把原来的线，删除。
22 }
23
24 var strElement = ' < v:PolyLine id = " temp " filled = " false " Points = " '+ str +' " style = " position:relative " /> ';
25
26 var newPoint = document.createElement(strElement);
27 group1.insertBefore(newPoint); // 创建一条新的线。
28 }
29 // 把新取到的参数，放到数组的尾部，并位移最早的坐标值。
30 function newLine(tem){
31 str = '';
32 for (i = 1 ;i <= 20 ;i ++ ){
33 var t1 = art[i].split(',');
34 t1[ 0 ] = t1[ 0 ] - 10 ;
35 art[i - 1 ] = t1[ 0 ] + ',' + t1[ 1 ];
36 str = str + art[i - 1 ];
37 }
38 art[ 20 ] = " 200, " + tem + ' ';
39 str = str + art[ 20 ];
40 }
41 </ script >
42 < script type ='text/javascript' src ='dwr/interface/SnmpUtil.js' ></ script >
43 < script type ='text/javascript' src ='dwr/engine.js' ></ script >
44 < script type ='text/javascript' src ='dwr/util.js' ></ script >
45
46 < body >
47 < br >
48 < br >
49 <!-- 坐标绘制 -->
50 < v:group ID ="group1" style ="WIDTH:500px;HEIGHT:200px"
51 coordsize ="200,200" >
52 <% for ( int i = 0 ;i <= 20 ;i ++ ){ %>
53 < v:PolyLine filled ="false" Points ="<%=i*10%>,0 <%=i*10%>,200" style ="position:relative" StrokeColor ="red" />
54 <% } %>
55 <% for ( int i = 0 ;i <= 20 ;i ++ ){ %>
56 < v:PolyLine filled ="false" Points ="0,<%=i*10%>,200,<%=i*10%>" style ="position:relative" StrokeColor ="red" />
57 <% } %>
58 </ v:group >
59 < script >
60
61 function ccc(msg){
62 // alert(msg);
63 newLine(msg);
64 createLine(str);
65 }
66 </ script >
67 < script type ="text/javascript" >
68
69 function getNum(){
70 SnmpUtil.getValue(callback);
71 }
72
73 function callback(msg) {
74 ccc(msg);
75 }
76
77 function clock(){
78 setInterval( " getNum() " , 1000 );
79 }
80 clock();
81 </ script >
82 </ body >
83 </ html >
84
85
86
2 < html xmlns:v ="urn:schemas-microsoft-com:vml" >
3 < head >
4 < title > 动态创建VML </ title >
5 </ head >
6 < STYLE >
7 v\:* { BEHAVIOR : url(#default#VML) }
8 </ STYLE >
9 < script language ="JavaScript" >
10 var art = new Array( 21 ); // 定义数据存储数组
11 var str = ''; // 线的数据组合
12 for (i = 0 ;i <= 20 ;i ++ ){ // 初始化一条直线，在坐标的底部
13 art[i] = i * 10 + " ,200 " ;
14 str = str + art[i];
15 }
16
17 // 绘制一条性能曲线。
18 function createLine(str){
19 if (document.getElementById( " temp " )){
20 var temp = document.getElementById( " temp " );
21 temp.removeNode( true ); // 把原来的线，删除。
22 }
23
24 var strElement = ' < v:PolyLine id = " temp " filled = " false " Points = " '+ str +' " style = " position:relative " /> ';
25
26 var newPoint = document.createElement(strElement);
27 group1.insertBefore(newPoint); // 创建一条新的线。
28 }
29 // 把新取到的参数，放到数组的尾部，并位移最早的坐标值。
30 function newLine(tem){
31 str = '';
32 for (i = 1 ;i <= 20 ;i ++ ){
33 var t1 = art[i].split(',');
34 t1[ 0 ] = t1[ 0 ] - 10 ;
35 art[i - 1 ] = t1[ 0 ] + ',' + t1[ 1 ];
36 str = str + art[i - 1 ];
37 }
38 art[ 20 ] = " 200, " + tem + ' ';
39 str = str + art[ 20 ];
40 }
41 </ script >
42 < script type ='text/javascript' src ='dwr/interface/SnmpUtil.js' ></ script >
43 < script type ='text/javascript' src ='dwr/engine.js' ></ script >
44 < script type ='text/javascript' src ='dwr/util.js' ></ script >
45
46 < body >
47 < br >
48 < br >
49 <!-- 坐标绘制 -->
50 < v:group ID ="group1" style ="WIDTH:500px;HEIGHT:200px"
51 coordsize ="200,200" >
52 <% for ( int i = 0 ;i <= 20 ;i ++ ){ %>
53 < v:PolyLine filled ="false" Points ="<%=i*10%>,0 <%=i*10%>,200" style ="position:relative" StrokeColor ="red" />
54 <% } %>
55 <% for ( int i = 0 ;i <= 20 ;i ++ ){ %>
56 < v:PolyLine filled ="false" Points ="0,<%=i*10%>,200,<%=i*10%>" style ="position:relative" StrokeColor ="red" />
57 <% } %>
58 </ v:group >
59 < script >
60
61 function ccc(msg){
62 // alert(msg);
63 newLine(msg);
64 createLine(str);
65 }
66 </ script >
67 < script type ="text/javascript" >
68
69 function getNum(){
70 SnmpUtil.getValue(callback);
71 }
72
73 function callback(msg) {
74 ccc(msg);
75 }
76
77 function clock(){
78 setInterval( " getNum() " , 1000 );
79 }
80 clock();
81 </ script >
82 </ body >
83 </ html >
84
85
86