Notifications like macos Growl/facebook for dating site - where to start?

Question

Hi all I'm running a php/mysql dating site and I want to implement on-screen notifications for members on certain actions (for example when another member views your profile, sends you a wink, etc). Very similar to growl on the mac or facebook notifications when someone comments or writes on your profile.

I'm not really too sure where to start - will I have to implement some push mechanism on the server side ? are there any jquery plugins for the client side of things ?

thanks in advance.

Answer 1

On way is to pull information from the database every once in a while and display that to the user. In your case that might be sufficient. Example:

1. Keep track of things you want to notify. Say user A visits user B's profile, add a notification message to a notification table for user B. If user C winks at user B, add another notification to user B's list.

2. Check if there are new notification. After you've retrieved the notifications, mark them as read so they won't show up anymore.

JS

// set an interval to run a function every 5 minutes
// (300000 = 1000 * 60 seconds * 5 minutes)
setInterval(function() {
    // call on check.php
    $.post('check.php', {
        // add a variable with the userId,
        // so the script knows what to check
        userId: 123
    }, function(data) {
        // say there are notifications, which are stored in data
        // now display them in any way you like
    });
}, 300000);

check.php

$userId = $_POST['userId'];

// make sure to only show new messages
$notifications = array();
$sql = "SELECT message FROM notifications WHERE userId = $userId AND new = 1";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
    while ($r = mysql_fetch_object($res)) {
        $notifications[] = $r->message;
    }
}

// now make sure that all the notifications are set to new = 0
$sql = "UPDATE notifications SET new = 0 WHERE userId = $userId";
mysql_query($sql) or die(mysql_error());

// you can handle the markup wherever you want,
// e.g. here and simply show each message a new line
// this data will be returned to the jQuery $.post method
echo implode('<br />', $notifications);

So basically: JS calls on 'script.php' every 5 minutes, 'script.php' possibly returns new notifications to the JS function, you display these messages. This is just to give you an idea of a possible solution.

A real push notification is harder than it seems. This would require a constant open connection that would allow new messages to be sent to the user instantly. You'll need to look at something like the Comet model for that. But in most cases it doesn't really matter if there's a slight delay. I used 5 minutes in my example, but it might as well be 1 minute or 10 or 30. It also depends on the amount of users you have and what kind of load these regular checks will cause. But usually all this happens in a fraction of a second and can be easily done with an interval, even if it's a very short one.

Answer 2

I might be a bit late with this answer, but if anybody comes here looking for a client-side plugin relevant to this kind of use-case, I've made an open source jQuery notification system that can be integrated seamlessly with web apps, called jNotifyOSD. You can see a demo on that link. The code's up on GitHub. I've tried to keep the API clean and dead simple to use. Here's an example:

$.notify_osd.create({
  'text'        : 'Hi!',             // notification message
  'icon'        : 'images/icon.png', // icon path, 48x48
  'sticky'      : false,             // if true, timeout is ignored
  'timeout'     : 6,                 // disappears after 6 seconds
  'dismissable' : true               // can be dismissed manually
});

You can even set global defaults for all future notifications (can be overridden on a per-notification basis):

$.notify_osd.setup({
  'icon'        : 'images/default.png',
  'sticky'      : false,
  'timeout'     : 8
});

UPDATE [13th Dec, 2012]:

It's been some time, but I've finally implemented support for multiple visible notifications using a queue system. So for example:

$.notify_osd.setup({
  // ... config ...
  'visible_max' : 5                  // max 5 notifications visible simultaneously
  'spacing'     : 30                 // spacing between consecutive notifications
});

You can see a demo here. I think the plugin is now flexible enough to cover a wide variety of use-cases.