Chrome浏览器桌面通知实现币安合约价格预警案例

Chrome浏览器桌面通知是Chrome浏览器提供给我们的一个API，使用此API可以轻松实现桌面通知提醒功能，不仅可以实现访问网站通知提醒公告内容，也可以帮助我们监控网站的一些数据变化，比如今天潘老师就给大家演示下如何使用该API实现对币安比特币合约数据的监控与提醒。

第1步：打开需要监控的网站页面

我们首先要打开需要监控的网站页面，比如我这里需要监控币安BTCUSD合约的比特币价格数据，其网址如下：

暂未匹配到标题

打开后，我们按F12审查元素找到BTC价格元素如下图：

在此我们可以通过js根据class获取当前的价格，而我们此处的class为showPrice。

第2步：打开chrome浏览器通知

我们需要打开chrome浏览器对该网站的通知权限，默认是询问，我们点击网址栏的小锁，将通知改为允许，操作如图：

第3步：JS桌面通知代码实现

我们通知的代码主要实现功能为定时去获取当前BTC价格，当BTC价格超过设置最高价格会低于最低价格就进行桌面通知提醒，然后将继续监控但不继续通知，除非价格回到监控范围内（即高于最低价格低于最高价格），才继续开启通知功能，当价格再次触发监控时，再次提醒，如此往复。这样可以很好的避免价格一直满足监控条件而一直触发通知，导致桌面通知过多的问题，不过好像通知也可以实现更新，但具体没研究，如果能更新那就更方便了。好了，直接上代码：

//超出此价格预警
var high_price = 19202;
//低于此价格预警
var low_price = 19198;
//监控间隔2秒一次
var times=2;
//定时监控
var st = setInterval(watchprice,times*1000);
//是否继续通知
var flag = true;
//监控价格
function watchprice(){
    //获取监控元素内容-此处根据币安合约价格class获取
    var tprice = document.getElementsByClassName("showPrice")[0].innerText;
    var price = parseInt(tprice.replace(',',''));
    console.log("正在监控中....当前价格："+price);
    //这里填写你的预警价格
    if(price>=high_price || price<=low_price){
        if(flag){//继续通知
            createNotify("价格预警", {
                body: price,
                icon: "https://static-file-1259603563.file.myqcloud.com/static/images/common/favicon.ico",
                data:"https://www.binancezh.pro/cn/futures/BTCUSDT"
            });
            //继续监控但终止通知
            flag = false;
        }
    }else{
        //继续监控但价格回归通知
        flag = true;
    }
}
//创建通知
function createNotify(title, options) {
    var PERMISSON_GRANTED = "granted";
    var PERMISSON_DENIED = "denied";
    var PERMISSON_DEFAULT = "default";
    if (Notification.permission === PERMISSON_GRANTED) {
        notify(title, options)
    } else {
        Notification.requestPermission(function(res) {
            if (res === PERMISSON_GRANTED) {
                notify(title, options)
            }
        })
    }
    //通知
    function notify($title, $options) {
        var notification = new Notification($title, $options);
        //绑定通知显示事件
        notification.onshow = function(event) {
            console.log("show : ", event)
        };
        //绑定通知关闭事件
        notification.onclose = function(event) {
            console.log("close : ", event)
        };
        //绑定通知点击事件
        notification.onclick = function(event) {
            console.log("click : ", event);
            window.open(event.target.data);
            notification.close();
        }
    }
}

第4步：部署代码开启监控

我们可以修改最高监控价格、最低监控价格以及监控间隔，然后将代码全部复制，按F12打开该网页的调试栏，点击console控制台，将代码粘贴进去，然后Enter即可。

其效果如下：

这样我们就实现了通过chrome浏览器桌面通知对BTC合约价格的监控，只要你该网页打开着，代码运行着就可以一直监控，而且你可以使用浏览器去做其他事情也并不影响你对价格的实时掌控，是不是很方便？扯远了，关键点是你对创建桌面通知的代码掌握了吗？如果还有疑问，可以联系潘老师哦。

喜欢 (7)赏

【请潘老师喝杯Coffee吧！】

分享 (0)