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

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

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

[title]1、前言[/title]

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

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

[title]2、特点(自吹一波)[/title]

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

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

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

[title]3、开箱![/title]

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

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

1、首先注册一个Uptimerobot账户,打开注册页面,输入信息注册(看不懂英文的照着翻译,如果还看不懂Emmm我也救不了你

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

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

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

[danger]Password一定要留空![/danger]

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、上传代码到服务器,配置好相关反代,完工!

[title]4、写在后面[/title]

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

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

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

 

 

赞赏

此处可能有用于缓解服务器资金压力的广告,请注意不要误点不需要的广告

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

发表评论

textsms
account_circle
email

  • https://secure.gravatar.com/avatar/55019d6393dff626cbaab707b5c8b28c?s=80&d=mm&r=g
    wm88990

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

    3周前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

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

      3周前回复
  • https://secure.gravatar.com/avatar/38d448102462b1b1fea81b5a254f2716?s=80&d=mm&r=g

    这个不错,收走研究一下

    3周前回复
  • https://secure.gravatar.com/avatar/d03847c21103b57426e3d79a5dde6b5c?s=80&d=mm&r=g

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

    2月前回复
  • https://secure.gravatar.com/avatar/4dfc72b0481839fd64b8ddf3acb1f17c?s=80&d=mm&r=g

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

    2月前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

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

      2月前回复
  • https://secure.gravatar.com/avatar/ee91505fd4744bee6a5e4d1858441a5b?s=80&d=mm&r=g

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

    2月前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

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

      2月前回复
  • https://secure.gravatar.com/avatar/ee91505fd4744bee6a5e4d1858441a5b?s=80&d=mm&r=g

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

    2月前回复
  • https://secure.gravatar.com/avatar/dce77d27fc8bd42ef671230baf5795a8?s=80&d=mm&r=g

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

    2月前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

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

      2月前回复
  • https://secure.gravatar.com/avatar/ee91505fd4744bee6a5e4d1858441a5b?s=80&d=mm&r=g

    嘿嘿嘿,我拿走了 :huaji:

    2月前回复
    • https://secure.gravatar.com/avatar/998a4820101c5491c986a7faf10457c8?s=80&d=mm&r=g
      freejishu博主

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

      2月前回复
  • https://secure.gravatar.com/avatar/dce77d27fc8bd42ef671230baf5795a8?s=80&d=mm&r=g

    666感觉很美观。

    2月前回复

freejishu的美丽世界

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