where interesting happend !

web实现消息推送及桌面提醒1

jimmy
应用场景介绍

最近做一个点餐小系统,用户下单并付款成功后,立即给 cms 管理系统发送一个推送消息,提示有新的订单请及时处理。

但并不是发送手机消息,而是发送电脑上的消息通知。效果如图:

image

实现基本思路
  • 推送消息部分:为了减少工作量,保证系统的稳定性,直接使用第三方服务。(也是自己能力不够,没法开发自己的推送服务)
  • 桌面推送部分:接收到服务器推送后,调用 HTML5 Notification ,显示推送通知面板,同时播放语音消息。
具体操作
推送第三方服务:GoEasy

服务准备:

  1. 先申请一个 goeasy 的账号,可以免费使用三个月,到期后一个月33元。
  2. 用注册好的账号登录到 GoEasy 的后台管理系统,创建您自己应用( application )。
  3. Application 创建好之后系统会自动为您生成 appkey

系统会生成两个 keys ,一个 Subscribe key 和一个 Common key ;它们的区别在于前者只能用于订阅,后者既可以订阅又可以推送。我们一开始不用管着么多,我们先都是用 Common key

具体使用服务

  1. 后台订单支付成功后请求 goeasy 服务,让其推送消息到 cms 中。以 php 为例子:

    php

    public function  sendMessageToClient(){
        $url = "http://goeasy.io/goeasy/publish";
        $post_data = array(
                "channel" => "channel1",
                "appkey" => "*****************************",
                'content'=>'new order'
        );
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
        curl_exec($ch);
        curl_close($ch);
    }
    

    基本就是给 goessy 服务器发送一个请求,地址是固定的。我们解释下参数: channel appkey content

    • channel 即频道,当我们的用户很多时,他们会被分成不同的频道,比如会员 vip 频道,只有会员才会收到我们后台推送的通知,普通的用户是接收不到的。

      channel 写的时候,要求前后台一致。发送的地方,也就是这里。如果写了 channel1,那么在接收的cms页面上也要求是 channnel1

    • appkey 即秘钥,这是我们的 Common key
    • content 即推送的消息内容。
  1. 前台cms接收推送

    • 需要引入 goeasy.js 。 直接使用网上的就可以,速度很快,大家不用担心速度问题。

      <script type="text/javascript" src="http://cdn.goeasy.io/goeasy.js"></script>
      
    • 使用 goeasy 对象

      var goEasy = new GoEasy({
          appkey: '*********************************' //Common key
      });
      goEasy.subscribe({
          channel: 'channel1',  //对应后台使用的 channel
          onMessage: function(message){
              alert('新的订单');
          }
      });
      

经过这么简单几步,我们就实现了一个 web 消息推送,下一章我们讨论具体的语音提醒和 html5 面板提醒。

Comments

Proudly published with Hexo