freejishu
喵!

建立属于你的StatusLive(服务状态监控)

建立属于你的StatusLive(服务状态监控)

StatusLive新版已经上线了,你可以戳https://status.freejishu.com进行体验。

为了让更多的人拥有自己的状态监控页,StatusLive会开放源代码。想不想建立属于自己的监控页呢?

1、前言

以前的StatusLive使用的是自己的服务器,自己进行数据拼合和计算,但现在木有那么多心情钱服务器了,所以决定更换到Uptimerobot,使用他们的监测数据。

以前的页面因为页面构架啥的都是网上找源码复制粘贴的,渲染上存在一定性能问题(这个问题目前还没有定位到是哪里产生的),所以我决定根据我现在的奇葩审美观重新写一个页面。

2、特性

  • 界面简洁明了,基于MDB,全部使用原生组件;

MDB,即Material Design for Bootstrap,关于它你可以戳我之前写的一篇文章https://www.freejishu.com/archives/445

  • 新的分类模式(网站/数据中心);
  • 拥有可设置项,简单设置即可食用,亦可以自行魔改;
  • 双模式反代支持(php反代/nginx等引擎反代);
  • UptimeRobot监控拥有的优点:略
  • 反正还有很多就是了你们自己看着办(雾)

3、开箱!

项目地址:https://github.com/freejishu/StatusLive

监控数据来源:Uptimerobot – https://uptimerobot.com/

(1)首先注册一个Uptimerobot账户,打开注册页面,输入信息注册。

(大陆网络环境看不见验证码,但是不影响验证)

(2)登陆,进入后台,添加站点,开始监控。

(添加网站示例)

关于添加类型展示问题:Ping将在数据中心一栏中展示,其余将在网站一栏中展示。

(3)添加完成后,点击右上角的“My Settings”,找到“Public Status Pages”一栏,点击绿色的“Add Public Status Page”新建一个公共展示页面。

Password一定要留空!

(4)获取Status Page Key

创建完成后,系统会分配给你一个默认连接(“Standard URL”),形似https://stats.uptimerobot.com/KQLq0Cy2M。用户们可以通过这个链接直接访问你的状态了。

(可以按照图示操作找到对应的URL)

连接中斜杠后部分就是我们需要的Status Page Key,例如我的是:KQLq0Cy2M。

(5)下载github上的源代码。

(6)简单配置

找到index.html的293行左右的设置区域,根据以下说明简单配置:

config_title = "状态监控",//主标题
config_title_english = "StatusLive",//副标题(英文标题)
config_warning_flash = false,//warning区域是否添加特效(闪一下)
config_status_key = "KQLq0Cy2M";//你的Status Page Key
config_ajax_mode = 2;//ajax模式 1为依赖core.php模式 2为反代模式(推荐)
config_ajax_proxy_domain = "https://uptimerobot-agent.freejishu.com/uptime"; //当config_ajax_mode设定为2时,在此填写反代域名(要有http(s)://,末尾不带斜杠)
config_show_chart = true;//是否展示图标
config_auto_refresh_seconds = 60;//数据刷新时间,单位为秒,建议不低于60

注意:如果ajax模式使用1,core.php要和index.html位于同一目录下。

或者可以到/js/core.js的108、174行分别修改为你的地址,请不要直接使用Uptimerobot官方提供的页面上的json地址,会出跨域问题。

修改这里即可

如果ajax模式使用2,则需要自行配制反代,反代的域名为“http://stats.uptimerobot.com”(对,就是那个极慢的域名)。

我们推荐各位使用模式2也就是反代模式,这样可以甩开PHP达到完全静态。

没有海外服务器的可以直接白嫖vercel,大陆直连速度比较快,反代域名为https://uptimerobot-agent.freejishu.com/uptime,现在已经加入默认配置了,开箱即用。

(话说vercel真香啊,后期看情况更一些关于vercel的东西吧!)

(7)上传代码到服务器,完工!

4、写在后面

这个项目真的花了不少时间去琢磨,还接触了一个新的前端框架MDB,收获也是不小了。最起码,把自己对前端现状的意识往前抬了一些。

freejishu的美丽世界将在未来进行一次主题风格调整,这取决于我什么时候有灵感了。(老实交代,上一次你说要自己写主题是几个世纪之前了)

各位Dalao们!高抬贵手给个Star吧!

赞赏
感谢您阅读到这里。此处可能有用于缓解服务器资金压力的广告,还请多多包涵。
没有标签
首页      杂文集      建立属于你的StatusLive(服务状态监控)

freejishu

文章作者

发表回复

textsms
account_circle
email

  • 松江腊雪

    一直转圈圈加载不出来

    3年前 回复
  • stat

    是否已经失效了,一直加载中…出不来

    4年前 回复
    • freejishu博主

      @stat: 是的,确实出现了一些问题。
      已经开一个更大的新坑了,大致写好之后会重新上线嘻嘻

      4年前 回复
  • hummm 为啥没考虑来发 PR (逃

    6年前 回复
  • wm88990

    可以给一份老版的statuslive的源码吗?万分感谢!github已star

    6年前 回复
  • 这个不错,收走研究一下

    6年前 回复
  • 偷偷就发布了这么好玩的东西?肯定要给大大的⭐。话说有空悄悄的试试这个监控页面呐

    6年前 回复
  • 在同一台服务器上用反代,服务器真的下线的时候也看不到状态 :huaji5:

    6年前 回复
    • freejishu博主

      @pomoke: 所以说这个适合有两个服务器以上的(
      我回头有空做个公共反代好了,这样就可以部署在类似于GithubPages的服务上了。

      6年前 回复
  • 还有为啥那个注册的邮件我收不到?(QQ邮箱),垃圾箱各种都找遍了 :han:

    6年前 回复
  • 只有我发现这篇文章的标题错了吗? :kaixin: ,原本是StatusLive,标题写的是StatueLive

    6年前 回复
  • 打算把这个融合进我的项目里,不知道设置MIT许可证的你愿不愿意。 :haha:

    6年前 回复
    • freejishu博主

      @KINGSR: 在该有的地方注明原作者即可 |´・ω・)ノ

      6年前 回复
  • 嘿嘿嘿,我拿走了 :huaji:

    6年前 回复
  • 666感觉很美观。

    6年前 回复

freejishu的美丽世界

建立属于你的StatusLive(服务状态监控)
StatusLive新版已经上线了,你可以戳https://status.freejishu.com进行体验。 为了让更多的人拥有自己的状态监控页,StatusLive会开放源代码。想不想建立属于自己的监控页呢? …
扫描二维码继续阅读
2018-07-26