How do push notifications work?

Question

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.

Solution 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

Solution 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>

Comments

[tim peterson]

@VirendraRajput, oh awesome thanks, looks interesting, let me see....

[tim peterson]

@VirendraRajput, so from caniuse.com, it looks like websockets is partially supported across browsers. I just tested the demo on my iPhone and it works. Can you comment on other platforms (Caniuse says no version of Android is supported, which is kind of a disaster)? Also only working on IE10 but not earlier isn't great either. Is there a fallback for these cases?

[tim peterson]

-@VirendraRajput, thanks for this answer. Ok now I get it pusher.com uses WebSockets with a Flash fallback. I guess the main thing is whether there service is too expensive or not. I've also now seen socket.io but to use that I'd have to figure out how to connect node.js to my application and Apache server/mysql database.

[Viren Rajput]

Well you dont need to make use socket.io since you will need to make use of Node.js! Well you can make use of Modernizr library for detecting whether the users browser supports websockets or not & fall back for flash! Look out for the updated answer.

[Viren Rajput]

Thanks! In case you found the answer useful - you might want to accept it

[tim peterson]

-@Virendra thanks but it doesn't explain what the receiving.php would look like. I know the concepts just not what the code looks like. Also, I'm particularly interested in Amazon SNS since I'm using AWS for their other services and because it is inexpensive compared with pusher.com and pubnub.com.

[Sameer]

@timpeterson Even I am interested in Amazon SNS and thinking to try it as it is much cheaper option than alternatives like Pusher. So did you tried it out, or you finalised with Pusher?

[tim peterson]

@Sameer still VERY happy with Pusher. SNS doesn't provide the tricky/time-consuming part which is the Websockets (JS with flash fallback). If you have the time and money building this on your might make sense (unlikely unless you are facebook or some other big company) but its hard to beat the ease of implementation of Pusher.

[Atieh]

can this be tested on localhost? I will need this big time. Thanks in advance!

[tim peterson]

yes Pusher.js allows you to push messages to your localhost. It will be pushed to each of the servers where you have implemented this code.