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

Warning: get_meta_tags(https://www.binancezh.cc/cn/futures/BTCUSDT): failed to open stream: Connection timed out in /www/wwwroot/www.panziye.com/wp-content/themes/Git-alpha/include/shortcode.php on line 302

文
章
目
录

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();
        }
    }
}