用echarts撸了个Nginx连接数监控

最新推荐文章于 2026-06-22 09:24:53 发布

原创

最新推荐文章于 2026-06-22 09:24:53 发布 · 1.1k 阅读

标签

#oa系统

本文介绍了一种通过ECharts实现实时动态监控Nginx连接数的方法，并提供了完整的前端和后端代码实现。

几个月前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:

最低0.47元/天解锁文章