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账户,打开注册页面,输入信息注册(看不懂英文的照着翻译,如果还看不懂Emmm我也救不了你

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

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

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

Password一定要留空!

4、获取Status Page Key

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

怎么可能,这个连接在国内访问速度相当慢,用户体验极差,为了做出属于自己的风格,请务必使用StatueLive!(这个人抽风了不要理他)

连接中的KQLq0Cy2M区域每个人都不一样,这也就是我们需要的Status Page Key。

5、下载github上的源代码。

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

6、简单配置

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

config_title = “状态监控”,//主标题
config_title_english = “StatusLive”,//副标题(英文标题)
config_warning_flash = false,//warning区域是否添加特效(闪一下)
config_status_key = “KQLq0Cy2M”;//你的statuspageskey
config_ajax_mode = 1;//ajax模式 1为依赖core.php模式 2为反代模式
config_ajax_proxy_domain = “”; //当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的107、161行分别修改为你的地址,请不要直接使用Uptimerobot官方提供的页面上的json地址,会出跨域问题。

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

7、上传代码到服务器,配置好相关反代,完工!

4、写在后面

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

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

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

赞赏
没有标签
首页      杂文集      建立属于你的StatusLive(服务状态监控)

freejishu

文章作者

发表评论

textsms
account_circle
email

  • hummm 为啥没考虑来发 PR (逃

    11月前回复
    • freejishu博主

      @lwl12: 已发,谢谢
      (诶我为什么要发谢谢

      11月前回复
  • wm88990

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

    12月前回复
    • freejishu博主

      @wm88990: 待我回头整理一下托管到github吧~
      (主要是有个调整网页大小时的性能问题解决不掉

      12月前回复
  • 这个不错,收走研究一下

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

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

    1年前回复
    • freejishu博主

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

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

    1年前回复
    • freejishu博主

      @Liues: 注册的邮件?哪个服务呢

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

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

    1年前回复
    • freejishu博主

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

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

    1年前回复
    • freejishu博主

      @Liues: 拿走之前送个Star呗 :mianqiang:

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

    1年前回复

freejishu的美丽世界

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