html5 桌面定时提醒,H5界面实现桌面推送通知

66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

我们产品线的服务器告警模式是:“每十分钟执行一次脚本,脚本会使用zkclient获取当前服务器的CPU、内存、带宽、服务负载,然后以邮件的形式发送到运维人员的邮箱里”,每十分钟一次的频率可想而知,一天下来邮箱要有几百几千封邮件,看着就心烦。于是我就冒出了一个大胆的想法,重构这套土了吧唧的告警模式。

思路是这样的:“依旧是通过后台脚本结合crontab定时获取服务器的相关采集值,然后将值传入到Django的views.py里,呈现到某个页面上,这个页面也会定时自动刷新,每次刷新的时候也就顺便取到了新的采集值,如果有告警,那么页面对应的告警值红色标注,同时弹出通知。”

这么一看感觉高大上了很多,至少不用天天去outlook里清理垃圾邮件。

实现自动刷新

页面自动刷新的方法很简单,有如下2种:

1.页面自动刷新:把如下代码加入

区域中1

这个功能也能结合页面自动跳转:把如下代码加入

区域中1//其中20指隔20秒后跳转到http://www.webjx.com页面

我想,QQ好友生日祝福功能里10秒钟自动关闭就应该是这么做出来的。

2.页面自动刷新之js版1

2

3

4

5

6

function (){

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

这里多说一下http-equiv,http-equiv是响应头报文。它只能出现在meta标签里,用来代替name,它的值使用content属性描述,HTTP服务器通过此属性收集HTTP协议的响应头报文。

比如:1

上面代码告诉浏览器等设备,语言使用了中文;1

上面代码指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)。

实现桌面通知

桌面通知是一个比较优雅的功能,只要你后台打开网页,那么一旦网页里触发了通知,就会在windows桌面上弹出一个小窗口告诉我们页面发生了,如图:

notify1.png

它的实现关键词就是Notification API,这个动作的js代码如下:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//判断浏览器是否支持Notification

if (window.Notification) {

var title;

var options;

title = '服务器告警提醒';//通知的标题

options = {//通知的所有内容

body: "机器千万台,稳定第一条,服务一瘫痪,运维泪两行。",//通知主体内容

tag: "custom",//代表通知的一个识别标签,相同tag时只会打开同一个通知窗口

icon: "http://img.mp.itc.cn/upload/20160723/a5953dc52c484834ab1ce924bb344da8_th.jpg",//要在通知中显示的图标的URL

// images: "https://xxx.jpg" //要在通知中显示的图像的URL

requireInteraction: false//通知保持自动关闭

};

Notification.requestPermission(function(){

var notification = new Notification(title, options);

notificationEvents.forEach(function(eventName){

notification[eventName] = function(event){

};

});

});

} else {

alert("你使用的浏览器不支持弹出提示,请更换Chrome内核浏览器!");

}

再结合上面的自动刷新语句,在浏览器打开的时候,首先会询问是够接受“通知”,如图:

notify2.png

同意了之后,浏览器每10秒钟自动刷新,同时弹出上面那个加菲猫弹窗。

全部整合

现在就需要把上面两个功能全部整合到一起,实现每10分钟自动刷新,同时判断传入数值,如果数值超标就发送桌面通知。

首先,先在django的url.py里设定访问的路径和对应的函数:1

2

3

4

5

6

7from django.urls import path

from . import views

urlpatterns = [

# 前面略

path(r'test222/',views.ttt),

]

然后在views.py里简单设置一下这个ttt函数:1

2

3

4

5def ttt(request):

cpu = 6.66

mem = 66.6

disk = 26

return render_to_response('test222.html',{'CPU':cpu,'MEMORY':mem,'DISKUSED':disk})

现在已经传入了三个数值,然后我们加工一下test222.html页面,如下:1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

服务器监控页面

var cpu="{{CPU}}",mem="{{MEMORY}}",disk="{{DISKUSED}}"

// alert(cpu+' '+mem+' '+disk)

if ( cpu > 80 || mem > 80 || disk > 80) {

if (window.Notification) {

var title;

var options;

title = '服务器告警提醒'; //通知的标题

options = { //通知的所有内容

body: "机器千万台,稳定第一条,服务一瘫痪,运维泪两行。", //通知主体内容 tag: "custom", //代表通知的一个识别标签,相同tag时只会打开同一个通知窗口

icon: "http://img.mp.itc.cn/upload/20160723/a5953dc52c484834ab1ce924bb344da8_th.jpg" //要在通知中显示的图标的URL

};

Notification.requestPermission(function() {

var notification = new Notification(title, options);

notificationEvents.forEach(function(eventName) {

notification[eventName] = function(event) {

};

});

});

} else {

alert("你使用的浏览器不支持弹出提示,请更换Chrome内核浏览器!");

}

}

服务器名称是test-ooxx-001


CPU情况是:{{ CPU }}
内存情况是:{{ MEMORY }}
磁盘容量情况是:{{ DISKUSED }}

界面如下:

notify3.png

现在修改一下views.py里的三个值,只要有一个大于设定的标准值,就会触发桌面推送。

js里“a=空就判断b,b如果也是空再判断C,然后执行func()”的语句是:1

2

3if ( a != null || b != null || c != null ) {

fun();

}

参考资料

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值