用echarts撸了个Nginx连接数监控

最新推荐文章于 2021-08-01 16:27:21 发布
最新推荐文章于 2021-08-01 16:27:21 发布
阅读量1k 收藏
点赞数
分类专栏： 运维开发 文章标签： oa系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamof2015/article/details/78496762
版权

几个月前OA系统反应超慢，流程打开和提交都要等上10几秒，经过一段时间的数据库优化和session共享式web集群的应用，终于，不再每天被领导谈话了。
系统稳定后为了监控Nginx的连接数，就开启了Nginx的status模块，但是，每次访问都得自己刷新页面获取数据，刚开始为了应急就写了静态页面定时刷新，当时的效果是这样的：
这里写图片描述
这里用JS写的定时刷新，每隔3秒刷新一次，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nginx 连接数</title>
</head>
<body>
<iframe src="http://ip/status"></iframe>

<script>
    window.setInterval("refresh()",3000);
    function refresh() {
        self.location.reload();
    }
</script>
</body>
</html>

后来看这个页面越看越不爽，看不爽怎么办，那就做个看得爽的。这就是后面做出来的效果:
这里写图片描述
每隔5秒定时获取status的数据，这里筛选掉数据只保留了Active connections，只显示当前2个小时内的数据，历史数据可做持久化操作（本来想做的，算了下要存储的数据量1天17280条，1个月接近52万，由于用的Oracle数据库还得建个范围分区表，还要定时维护，想想就麻烦…）。

下面贴一下代码：后台获取数据用的httpclient写的方法，前台展示用的echarts
前台页面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nginx状态</title>

    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:800px;"></div>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    //用ajax获取数据
    function getData() {
        var url = "http://ip/status";
        var htmlobj = $.ajax({url: "ajaxAction.jsp?action=nginxNums",data:{url:url},dataType:"json", async: false});
        var json = JSON.parse(htmlobj.responseText);
        var total = json.total;
        console.log(total);
        var date = json.date;
        var time = json.time;
        if(!total){
            total = 0;
        }
        timeData.push(time);
        lineData.push(total);
    }

    var timeData = [];//X轴的数据
    var lineData = [];//Y轴的数据

    option = {
        title: {
            text: 'Nginx连接数监控',
            x: 'left'
        },
        tooltip: {
            trigger: 'axis',

            axisPointer: {
                animation: false
            }
        },
        legend: {
            data: ['连接数'],
            x: 'left'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        axisPointer: {
            link: {
                xAxisIndex: 'all'
            }
        },
        dataZoom: [{
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
        }, {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
        }],
        grid: [{
            left: 40,
            right: 40
        }, {
            left: 40,
            right: 40
        }],
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                onZero: true
            },
            data: timeData
        }, {
            gridIndex: 1
        }],

        yAxis: [{
            type: 'value',
            max: 2000,
            name: '单位:个',
            min: 0,
            interval: 100
        }, {
            gridIndex: 1
        }],
        series: [{
            name: '数值',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 9,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            markArea: {
                silent: true,
                label: {
                    normal: {
                        position: ['10%', '50%']
                    }
                },
                data: [
                    [{
                        name: '低',
                        yAxis: 500,
                        itemStyle: {
                            normal: {
                                color: 'rgba(250,250,51,0.2)'
                            }
                        }
                    }, {
                        yAxis: 1000
                    }],
                    [{
                        name: '中',
                        yAxis: 1000,
                        itemStyle: {
                            normal: {
                                color: 'rgba(153,204,51,0.2)'
                            }
                        }
                    }, {
                        yAxis: 1500
                    }],
                    [{
                        name: '高',
                        yAxis: 1500,
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,153,153,0.27)'
                            }
                        }
                    }, {
                        yAxis: 2000
                    }]
                ]
            },
            data: lineData
        }]
    };

    myChart.setOption(option);
    setInterval(function () {
        //只保留一小时类的数据:60*60/5=720
        if(timeData.length>720){
            timeData.shift();
            lineData.shift();
        }
        //动态获取数据
        getData();
        //重设图标数据
        myChart.setOption({
            xAxis:[{
                data:timeData
            }],
            series: [{
                data: lineData
            }]
        });
    }, 5000);
</script>
</body>
</html>

ajaxAction.jsp代码如下：

<%@ page import="com.eweaver.base.util.StringHelper" %>
<%@ page import="com.eweaver.app.interfaces.HttpRequestUtils" %>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
    String action = StringHelper.null2String(request.getParameter("action"));
    String url = StringHelper.null2String(request.getParameter("url"));
    if("nginxNums".equals(action)){
        JSONObject jsonObject = HttpRequestUtils.httpGetNginxRequestNums(url);
        response.getWriter().print(jsonObject.toString());
    }
%>

HttpRequestUtils的httpGetNginxRequestNums(String url)方法如下：

/**
     * 获取Nginx的连接数
     * @param url
     * @return
     */
    public static JSONObject httpGetNginxRequestNums(String url){
        CloseableHttpClient httpclient = HttpClients.createDefault();
        JSONObject jsonObject = new JSONObject();
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String total = "0";
        HttpGet httpGet = new HttpGet(url);
        try {
            CloseableHttpResponse response = httpclient.execute(httpGet);
            BufferedReader in = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
            StringBuffer sb = new StringBuffer("");
            String line = "";
            String NL = System.getProperty("line.separator");
            while ((line = in.readLine()) != null) {
                sb.append(line + NL);
            }
            in.close();
            String content = sb.toString();
            if(content.length()>1){
                String[] contentArr = content.split("\r\n");
                total = contentArr[0].split(": ")[1];
                total = total.split(" ")[0];
                total = total.trim();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        String nowDate = simpleDateFormat.format(new Date());
        jsonObject.put("date",nowDate.split(" ")[0]);
        jsonObject.put("time",nowDate.split(" ")[1]);
        jsonObject.put("total",total);
        return jsonObject;
    }

这个代码还是很简单的。唯一的难点是卡在echarts折线图如何动态的获取数据，看了官网上的例子动态数据+时间坐标轴想把X轴的数据换成秒来显示总是失败，后来看其他例子发现多个背景颜色图,虽然这个数据也是静态的，但是却带给了我思路，xAxis.type属性用category也可以用动态数据来展示，之前一直以为category就是固定的。解决了这个问题就先写了个静态页面去组装数据，测试完全没问题，然后再修改成动态获取，搞定。
下面是静态页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态折线图</title>
  <script src="../js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px;"></div>
<script>
  var myChart = echarts.init(document.getElementById('main'));

  function getData() {
    var nowDate = new Date();
    var hour = nowDate.getHours();
    var minute = nowDate.getMinutes();
    var seconds = nowDate.getSeconds();
    var time = hour+":"+minute+":"+seconds;
    timeData.push(time);
    lineData.push(Math.round(Math.random()*100)*10);
  }

  var timeData = [];
  var lineData = [];

  option = {
    title: {
      text: '动态折线图',
      x: 'left'
    },
    tooltip: {
      trigger: 'axis',

      axisPointer: {
        animation: false
      }
    },
    legend: {
      data: ['连接数'],
      x: 'left'
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        restore: {},
        saveAsImage: {}
      }
    },
    axisPointer: {
      link: {
        xAxisIndex: 'all'
      }
    },
    dataZoom: [{
      show: true,
      realtime: true,
      start: 0,
      end: 100,
      xAxisIndex: [0, 1]
    }, {
      type: 'inside',
      realtime: true,
      start: 0,
      end: 100,
      xAxisIndex: [0, 1]
    }],
    grid: [{
      left: 40,
      right: 40
    }, {
      left: 40,
      right: 40
    }],
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLine: {
        onZero: true
      },
      data: timeData
    }, {
      gridIndex: 1
    }],

    yAxis: [{
      type: 'value',
      max: 1000,
      name: '单位:个',
      min: 0,
      interval: 50
    }, {
      gridIndex: 1
    }],
    series: [{
      name: '数值',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 9,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      markPoint: {
        data: [{
          type: 'max',
          name: '最大值'
        }, {
          type: 'min',
          name: '最小值'
        }]
      },
      markArea: {
        silent: true,
        label: {
          normal: {
            position: ['10%', '50%']
          }
        },
        data: [
          [{
            name: '低',
            yAxis: 0,
            itemStyle: {
              normal: {
                color: 'rgba(0,153,153,0.27)'
              }
            }
          }, {
            yAxis: 300
          }],
          [{
            name: '中',
            yAxis: 300,
            itemStyle: {
              normal: {
                color: 'rgba(153,204,51,0.2)'
              }
            }
          }, {
            yAxis: 600
          }],
          [{
            name: '高',
            yAxis: 600,
            itemStyle: {
              normal: {
                color: 'rgba(250,250,51,0.2)'
              }
            }
          }, {
            yAxis: 1000
          }]
        ]
      },
      data: lineData
    }]
  };

  myChart.setOption(option);
  setInterval(function () {

    // for (var i = 0; i < 5; i++) {
    //   data.shift();
    //   data.push(getData());
    // }
    getData();
    myChart.setOption({
      xAxis:[{
          data:timeData
      }],
      series: [{
        data: lineData
      }]
    });
  }, 5000);
</script>
</body>
</html>

git地址：https://github.com/dreamof2080/echartsLine.git

Jeffrey_L_F
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echart之实现服务器资源监控
貌似高手
12-24 7508
前一段时间接触了echarts，不过没怎么深入研究过，不过现在又有跟他打交道的机会了，应项目需求
nginx 限制ip、并发量、连接数等配置
01-30
Nginx可以通过`limit_conn`模块来限制每个IP地址的并发连接数。首先，需要在Nginx配置文件中加载`limit_conn_module`模块，然后在`http`、`server`或`location`上下文中定义限制： ```nginx http { limit_conn_...
zabbix监控nginx连接数
luoqinglong的专栏
06-02 637
一、nginx配置 配置location location /nginx_status { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; stub_status on; access_log off;
zabbix 监控nginx连接数
IChen.的博客
08-01 384
1、修改nginx配置文件，在nginx.conf中添加如下内容 location /status { stub_status on; access_log off; ｝ 2、加载配置文件 nginx -s reload 3、测试是否生效，执行如下命令： curl -s http://127.0.0.1:80/status 执行结果： Active connections: 24071 server accepts handled requests 1784687
zabbix监控nginx的连接数
fighting
11-15 290
接着上篇博客，server5作为zabbix server，实现监控server4(192.168.34.5)主机上的nginx连接数 server4: 安装zabbix agent [root@server4 ~]# cd zabbix/ [root@server4 zabbix]# ls 4.0 percona-zabbix-t...
Nginx服务器中限制连接数与限制请求的模块配置教程
09-30
在Nginx服务器中，管理和优化并发连接数以及限制恶意请求是确保系统稳定性和资源有效利用的关键措施。本文将深入探讨如何使用Nginx的ngx_http_limit_conn_module和ngx_http_limit_req_module模块来实现这两个目标。 ...
nginx限速之连接数限制技巧分享
01-20
nginx 内置模块限速怎么使用就不多说了，今天来说说连接数和单个连接数限速的事。话不多说了，来一起看看详细的介绍吧。 场景： A公司有100人，A公司只有一个公网IP，假设A公司可能有100个人同时在下载你的网站文件...
nginx限制并发连接请求数的方法
09-29
在Nginx中限制并发连接请求数和限制并发请求数是两种不同的策略，用于管理服务器资源并防止过载。这两个功能都是通过Nginx的模块实现的，分别是`http_limit_conn_module`和`http_limit_req_module`。这两个模块默认...
echarts-doc-5-nginx.zip
06-04
适合国企等内网开发，有配置项、示例及示例的代码等核心内容，带nginx环境，解压后运行nginx.exe即可访问localhost:81/zh/option.html和localhost:82/zh/index.html查看
基于Echarts的可视化大屏可视化监控管理.rar
04-03
基于Echarts的可视化大屏可视化监控管理，包含html+css+js+image
EchartsDemo(线型图、柱状图、雷达图等)
07-03
demo中有柱状图、线型图、圆饼图、雷达图等的实例代码，使用简单的servlet实现，直观、方便部署，便于学习Echarts
Echarts3配置项手册离线网页版
02-06
完整拷贝官网配置项页面,彻底离线查询各个配置项.........
vue-cli项目中使用echarts图表实例
10-17
在本篇文章里我们给大家分享了关于vue中使用echarts图表的实现方法，有兴趣的朋友们学习下。
前端echarts图可以传到后台吗_结合Echarts、Ajax技术实现可视化大屏监控 3D
weixin_39953629的博客
12-06 219
#三维可视化# #3D开发#ECharts是 Enterprise Charts缩写，表示商业级数据表图，它是一个基于html5 Canvas的图标库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器 (E6/7/8/9/10/1, chrome, firefox, Sarari等)，底层依赖轻量级的 Canvas类库 ZRender，创建了坐标系、图例、提示、工具箱等基础组件，能够提供直...
【ECharts系列|03可视化大屏】大数据管理平台实时展示
孙叫兽的博客
04-03 2247
基于echats实现可视化大数据管理平台实时展示。
Zabbix对nginx的图形监控
柠檬精哒博客
08-16 856
实验环境： server5:具有原码安装的nginx server1:安装了zabbix，并且可以对server5进行监控 vim /etc/nginx [root@server5 nginx]# vim conf.d/default.conf [root@server5 nginx]# nginx [root@server5 nginx]# nginx -s reload [root@s...
Echarts 磁盘使用监控( 创建多图例 js动态拼接 )
mengxiangfeiyang的专栏
04-01 1887
<title>DISK page</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/echarts2/esl.js"></script> <script type="text/javascript" src="js
nginx监控界面
木子甘
11-02 1745
一、在nginx.conf中配置1.配置location /status { stub_status on; access_log /var/log/nginx/status.log; auth_basic "muzihan" auth_basic_user_file ..
nginx 最大连接数
最新发布
06-20
nginx 最大连接数取决于系统的最大文件描述符数量和nginx配置中的worker_processes和worker_connections参数。 在Linux系统中，文件描述符数量可以通过`ulimit -n`命令查看和修改。而在nginx配置中，worker_processes和worker_connections参数可以控制nginx的并发连接数。其中worker_processes表示nginx启动的worker进程数，一般设为CPU核心数；worker_connections表示每个worker进程能够处理的最大连接数。 因此，nginx最大连接数可以通过以下公式计算： ``` max_connections = worker_processes * worker_connections ``` 默认情况下，nginx的worker_processes参数设置为auto，表示自动根据CPU核心数确定worker进程数。而worker_connections参数默认为512。 因此，如果系统的最大文件描述符数量为65535，nginx配置中的worker_processes和worker_connections参数分别为4和1024，则nginx最大连接数为： ``` max_connections = 4 * 1024 = 4096 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值