How do push notifications work?

问题:

I'm trying to implement push notifications on my PHP-based website. The goal is to make something similiar to what Stackoverflow and other sites have which notify a user in real-time when they get messages.

I'm using mysql as my database, Apache as my server, and am considering using Amazon-SNS as the framework for these notifications since that is what that service seems to be intended for.

I'm having a hard understanding from the literature how programmatically the sending.php and receiving.php pages are set up. I'd assume the sending.php page just involves a $_POST['message'] to some page, but from there I'm really lost.

If something could help me understand what the receiving.php page would look like for a push notification I would greatly appreciate it.

回答1:

Working

HTML5rocks have provided a good explanation here, about how websockets work.

Well you can make use of Websockets for the browsers that support it (since all modern browsers provide good support)

Getting Started

You can get started with these few resources :

HTML5rocks

Nettuts+

Nettuts+ provide a good tutorial for getting started with websockets.

For Browsers Supporting Websockets

Fallback

You can use Modernizr to detect whether the Client's browser has support for websockets or not & as a fallback you can make use of flash instead of Websockets.

For those projects, when running on browsers with no WebSockets or with it disabled, web-socket-js will be used. It will be less efficient than native, but still much lower latency than long-polling.

Any browser with Flash can support WebSocket using the web-socket-js shim/polyfill.

Reference:

Alternative to WebSockets

https://softwareengineering.stackexchange.com/questions/33713/is-there-an-alternative-to-html-web-sockets-now-that-firefox-4-has-disabled-the

回答2:

I just wanted to share the actual implementation I went with. I decided to go with a great SAAS, Pusher, since there are many challenging issues in implementing Push notifications, as I realized in reading the links in @Virendra's excellent answer, that Pusher solves for you.

What I was most impressed with is how little code you have to write to make this work. See below. My server-side is in PHP (Pusher has libraries in many languages).

require('/application/thirdParty/pusher-html5-realtime-push-notifications/lib/squeeks-Pusher-PHP/lib/Pusher.php');
require('/application/thirdParty/pusher-html5-realtime-push-notifications/config.php');
$pusher = new Pusher(APP_KEY, APP_SECRET, APP_ID);

foreach($recipients as $row){                   
  $channel='my-channel'.$row->recipient_id;
  $pusher->trigger($channel, 'notifications', 
    array('message' => $row->message,
          'notification_id' => $row->notification_id) 
  );
}

Here's the HTML/JS (don't be overwhelmed, most of this code is just to populate the little circle and the list with the incoming notification as Stackoverflow and others do it):

<script src="/application/thirdParty/pusher.min.js"></script>
<script>     
var myID=179; // would receive notification if myID matches $row->recipient_id above;
var myChannel = pusher.subscribe('my-channel'+myID);
myChannel.bind('notifications',
  function(data) {
        var message=String(data.message),
            url='/notifications/'+data.notification_id, 
            icon='<i class=\'icon-heart\'></i>',
            urlText=icon+message;

        var notificationRow='<li><a href='+url+'>'+urlText+'</a></li>';
         $('#notificationsDropdownList').prepend(notificationRow);   

        if(notificationCircleCount==0){
             notificationCircleCount++;
              $notificationCircle.show();
               $notificationCircleCount.html(notificationCircleCount);
        }
        else{
             notificationCircleCount++;
             $notificationCircleCount.html(notificationCircleCount);
        }
        console.log('Pusher happened'+data.message);                  
  } //function
); //myChannel
</script>