如上图所描绘的，在不断刷新test.html请求页面时，上图total.html页面会实时的更新（1秒响应更新一次），折线图会实时进行上下变动。其中需要导入echarts.min.js和jquery-3.5.1.min.js和fastjson-1.2.53.jar包。
0.首先是创建RequestServlet这个类，创建一个时间集合和与之相对象的值集合，就是每一时间段，有多少的请求数量。比如上图19:14时间段有20多个请求量。代码如下：
package com.wei.total;import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON;/*** Servlet implementation class RequestServlet*/
@WebServlet("/req")
public class RequestServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public RequestServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse* response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// TODO Auto-generated method stubServletContext context = request.getServletContext();// 获得全局对象List<String> timeList = (List<String>) context.getAttribute("timeList");List<Integer> valueList = (List<Integer>) context.getAttribute("valueList");response.setContentType("text/html;charset=utf-8");
// response.getWriter().println(timeList.toString());
// response.getWriter().println("<br/>");
// response.getWriter().println(valueList.toString());Map resultMap=new HashMap();resultMap.put("timeList",timeList );resultMap.put("valueList",valueList );String json= JSON.toJSONString(resultMap);response.getWriter().println(json);}}
1.然后是RequestTotalListener这个类实现 ServletContextListener,ServletRequestListener两个接口，代码如下：
package com.wei.total;import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.ServletRequestEvent;
import javax.servlet.ServletRequestListener;
import javax.servlet.http.HttpServletRequest;public class RequestTotalListener implements ServletContextListener,ServletRequestListener {@Overridepublic void requestDestroyed(ServletRequestEvent sre) {// TODO Auto-generated method stub}@Overridepublic void requestInitialized(ServletRequestEvent sre) {HttpServletRequest request=(HttpServletRequest)sre.getServletRequest();String url=request.getRequestURL().toString();if (url.endsWith("/req")==true) {return;}// TODO Auto-generated method stub//timeList: 10:02,10:03,10:04//ValueList 5 20 15List<String> timeList=(List)sre.getServletContext().getAttribute("timeList");List<Integer> valueList=(List)sre.getServletContext().getAttribute("valueList");Date date =new Date();SimpleDateFormat sdfDateFormat=new SimpleDateFormat("HH:mm");String time=sdfDateFormat.format(date);//得到当前时间//10:05if (timeList.indexOf(time)==-1) {//查找对应的数据集合中是否存在，时间是否存在，不存在返回结果为-1timeList.add(time);valueList.add(1);sre.getServletContext().setAttribute("timeList", timeList);sre.getServletContext().setAttribute("valueList", valueList);}else {int index= timeList.indexOf(time);int value=valueList.get(index);valueList.set(index,value+1);sre.getServletContext().setAttribute("valueList", valueList);}}@Overridepublic void contextDestroyed(ServletContextEvent sce) {// TODO Auto-generated method stubServletContextListener.super.contextDestroyed(sce);}@Overridepublic void contextInitialized(ServletContextEvent sce) {// TODO Auto-generated method stubList timeList=new ArrayList();List valueList=new ArrayList();sce.getServletContext().setAttribute("timeList", timeList);sce.getServletContext().setAttribute("valueList", valueList);}
}
2.进行数据统计页面total.html的编写:代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>
<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px; height: 500px;"></div><script type="text/javascript">function showChart(){$.ajax({url:"./req",type:"get",dataType:"json",success:function(json){console.log(json.timeList);console.log(json.valueList);// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//得到图表对象// 指定图表的配置项和数据var option = {title : {text : '请求流量分析统计'},tooltip : {},legend : {data : [ '访问量' ]},xAxis : {data : json.timeList},yAxis : {},series : [ {name : '访问量',type : 'line',//bar柱状图,line折线图data : json.valueList} ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}})}window.setInterval("showChart()",1000);//1秒向浏览器刷新一次结果</script>
</body>
</html>3.测试页面，可以准备多个测试页面，一定要注意html页面一定要在webcontent下进行创建，发布后，打开进行多次点击，可以发现total.html的折线图会实时的进行变化，也可以换成树状图等图。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>我是第一个测试页面</h1>
<h2>I am test page one</h2>
</body>
</html>
