最近一段時間由于服務器響應有些異常，所以花了半天做了一個簡單實時監控頁面。如下圖
基本原理如下：
1、使用Filter攔截請求，采集服務器響應數據。
若是要收集響應狀態碼注意構造新的HttpServletResponse
2
3 import javax.servlet.http.HttpServletResponseWrapper
4 import javax.servlet.http.HttpServletResponse
5
6 /**
7 * 功能描述
8 * @author huzl
9 * @version 0.0.1, 12-7-30 下午3:11
10 */
11 class StatusExposingServletResponse extends HttpServletResponseWrapper {
12 private Integer status = SC_OK;;
13
14 public Integer getStatus() {
15 return status
16 }
17
18 def StatusExposingServletResponse(HttpServletResponse response) {
19 super(response);
20 }
21
22 @Override
23 void sendError(int sc, String msg) {
24 super.sendError(sc, msg)
25 status = sc;
26 }
27
28 @Override
29 void sendError(int sc) {
30 super.sendError(sc)
31 status = sc;
32 }
33
34 @Override
35 void sendRedirect(String location) {
36 super.sendRedirect(location)
37 status = SC_MOVED_TEMPORARILY;
38 }
39
40 @Override
41 void setStatus(int sc) {
42 super.setStatus(sc)
43 status = sc;
44 }
45
46 @Override
47 void setStatus(int sc, String sm) {
48 super.setStatus(sc, sm)
49 status = sc;
50 }
51
52 }
53
54 public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain){
55 long startTime = System.currentTimeMillis();
56 StatusExposingServletResponse response = new StatusExposingServletResponse(servletResponse);
57 Throwable exception = null;
58 try {
59 filterChain.doFilter(servletRequest,response)
60 } catch (Throwable e) {
61 exception = e;
62 throw e;
63 }finally{
64 statisticResult.completeRequest(servletRequest,response,exception,startTime);
65 }
66 }
若只統計錯誤狀態碼則區分Response Code是否大于400，小于400的都是正確響應
如200（OK）,206（斷點續傳),301(永久重定向),302(臨時重定向),304（內容未變),大于等于400的狀態都是錯誤響應，計算響應速度區間和平均響應時間的代碼我就不貼了
2、定時程序或線程把數據入庫或保存到內存中。
盡量不要使用java內嵌數據庫如hsqldb，H2等，因為這些內存數據庫運行時會把所有數據加到內存中，不太適合保存數據采集結果
3、使用Highcharts繪制監控頁面
可以參照官網例子
http://www.highcharts.com/demo/dynamic-update 1 var charts = new Array();
2 var serverCount = 6;
3 var lastTimes = new Array();
4 var max = ${params.int("max")?:120};
5 $(document).ready(function() {
6 Highcharts.setOptions({
7 global: {
8 useUTC: false
9 }
10 });
11
12
13 for (var i = 0; i < serverCount; i++) {
14 charts[i] = new Highcharts.Chart({
15 chart: {
16 renderTo: 'container' + i,
17 type: 'spline',
18 events: {
19 load: function() {
20
21 // set up the updating of the chart each second
22 var series = this.series;
23 var serverIndex = i;
24 lastTimes[serverIndex] = 0;
25 var loadData = function() {
26 $.getJSON("http://${request.serverName}:${request.serverPort}${request.contextPath}/toolkits/queryStatistics.gsp", {"lasTime":lastTimes[serverIndex],"proxy":true,"index":serverIndex,"max":max}, function(data) {
27 for (var k = 0; k < series.length; k++) {
28 for (var j = 0; j < data[k].length; j++) {
29 var point = data[k][j];
30 var isShift = series[k].data.length >= max;
31 console.log("series " + k + ".data.length=" + series[k].data.length);
32 var lastTime = 0;
33 if (series[k].data.length > 0)
34 lastTime = series[k].data[series[k].data.length - 1].x;
35 if (point[0] > lastTime)
36 series[k].addPoint([point[0],point[1]], true, isShift);
37 lastTimes[serverIndex] = point[0];
38 }
39 }
40 })
41 };
42
43 loadData();
44 setInterval(loadData, 60000);
45 }
46 }
47 },
48 title: {
49 text: '訪問量實時監控'
50 },
51 xAxis: [
52 {
53 type: 'datetime',
54 tickPixelInterval: 120
55 }
56 ],
57 yAxis: [
58 {
59 title: {
60 text: '總請求/分鐘',
61 style: {
62 color: '#3E576F'
63 }
64 }
65 },
66 {
67 title: {
68 text: '平均響應時間',
69 style: {
70 color: '#00AA00'
71 }
72 },opposite:true
73 }
74 ],
75 plotOptions: {
76 spline: {
77 marker:{
78 enabled: false,
79 states: {
80 hover: {
81 enabled: true,
82 symbol: 'circle',
83 radius: 5,
84 lineWidth: 1
85 }
86 }
87 }
88 }
89 },
90 tooltip: {
91 formatter: function() {
92 return '<b>' + this.series.name + '</b><br/>' +
93 Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
94 Highcharts.numberFormat(this.y, 2);
95 }
96 },
97 legend: {
98 enabled: true
99 },
100 exporting: {
101 enabled: false
102 },
103 series: [
104 {
105 name: '總請求數',
106 data: []
107 },
108 {
109 name: '錯誤請求數',
110 data: []
111 },
112 {
113 name: '平均響應時間',
114 yAxis:1,
115 data: []
116 }
117 ]
118 });
119 }
120
121 })
需要注意的是：
1、在series的load事件中使用ajax定時加載數據，需要控制當前chart中的Point數據量，
series.addPoint(point, true, isShift);
當series中Point數量超過指定值，設定isShift為true，就可以移除第一個Point，防止瀏覽器內存占用太大無響應
2、ajax請求時只請求最新采集數據，所以每次加載采集數據后把最后時間保留下來，ajax請求時把當前chart中最后時間帶上，獲取最新數據
3、其他非關鍵代碼就不附上了，因為使用grails工程而且與項目xiangg