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上的源代码。
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:
发表评论