网站状态监控系统源码专业版（UptimeRobot集成版）

本套网站监控系统源码基于原生JavaScript开发，采用UptimeRobot官方API接口对接。源码包内集成实时状态看板与多通道告警模块，支持分钟级故障检测（默认5分钟轮询间隔），适用于搭建轻量级网站运维监控平台。

核心功能模块说明：

1. 监控数据对接体系

• UptimeRobot接口集成：
  ▸ 监控状态获取（GET /v2/getMonitors）
  ▸ 响应时间统计（含历史90天数据）
  ▸ 状态码分析（2xx/3xx/4xx/5xx分布）

• 多维度展示方案：
  ▸ 状态卡片布局（红/黄/绿三色标识）
  ▸ 响应时间折线图（Chart.js渲染）
  ▸ 可用率统计（30天滚动计算）

2. 告警通知系统

• 通知渠道配置：
  ▸ 邮件通知（SMTP协议支持）
  ▸ 短信通知（Twilio/阿里云API）
  ▸ Webhook回调（JSON格式POST请求）

• 触发条件设置：
  ▸ 连续失败次数阈值（默认3次）
  ▸ 恢复通知开关（故障解除提醒）
  ▸ 静默时段配置（免打扰时间段）

部署配置指南：

1. 环境要求
   ▌基础运行环境

• Web服务器：
  ▸ Nginx 1.22+（推荐配置）
  ▸ Apache 2.4.57+（需启用mod_rewrite）

• 客户端兼容性：
  ▸ Chrome 90+
  ▸ Firefox 100+
  ▸ Safari 15.4+

2. 源码快速部署

bash复制unzip uptime-monitor.zip -d /var/www/htmlchmod -R 755 /var/www/html/config

3. UptimeRobot配置流程
   ① 注册UptimeRobot账号
   ② 添加监控目标：
   ▸ 监控类型：HTTP(s)/Ping/Port
   ▸ 检查频率：5分钟（免费版上限）
   ▸ 通知策略：绑定告警联系人
   ③ 获取API密钥：
   ▸ 主账号密钥（完全权限）
   ▸ 只读密钥（推荐生产环境使用）

4. 系统参数配置
   修改/config.js关键参数：

javascript复制const CONFIG = {  // UptimeRobot API密钥（第18行）
  API_KEY: 'ur123456-7890abcdef1234567890ab',  
  // 轮询间隔（单位：秒，需≥300）
  REFRESH_INTERVAL: 300,  
  // 时区配置（Asia/Shanghai）
  TIMEZONE: 'UTC+8',  
  // 邮件通知配置
  SMTP: {    host: 'smtp.example.com',    port: 587,    secure: false,    auth: {      user: 'monitor@example.com',      pass: 'your_password'
    }
  }
}

技术架构特性：

• 前端数据交互：
  ▸ Fetch API实时获取数据
  ▸ LocalStorage缓存历史记录
  ▸ Service Worker离线支持

• 安全防护机制：
  ▸ CORS严格限制（仅允许配置域名）
  ▸ API密钥前端加密（Base64+盐值混淆）
  ▸ 请求频率限制（5次/分钟/IP）

监控看板功能：

• 实时状态概览：
  ▸ 全局可用率统计（百分比展示）
  ▸ 最近故障时间轴（精确到秒）
  ▸ 响应时间排行榜（TOP10排序）

• 详细数据查看：
  ▸ 90天历史可用率图表
  ▸ 分时段响应时间对比
  ▸ 故障日志明细下载（CSV格式）

扩展开发接口：

• 自定义通知模板：

  javascript复制function customNotifier(status) {  // 企业微信机器人示例
    fetch('https://qyapi.weixin.qq.com/robot/send?key=xxx', {    method: 'POST',    body: JSON.stringify({      msgtype: 'text',      text: {        content: `监控报警：${status.friendly_name} 服务异常`
        }
      })
    })
  }

• 数据导出方案：
  ▸ JSON格式全量导出
  ▸ Excel模板生成
  ▸ PDF报告自动生成