Notifications comme macos Growl/facebook pour site de rencontres - par où commencer?

Question

Salut à tous Je cours un site de rencontres php/mysql et je veux mettre en place des notifications à l'écran pour les membres sur certaines actions (par exemple lorsqu'un autre membre voit votre profil, vous envoie un clin d'oeil, etc.). Très similaire à grogner sur les notifications mac ou facebook lorsque quelqu'un commente ou écrit sur votre profil.

Je ne sais pas vraiment par où commencer - devrai-je mettre en place un mécanisme de poussée côté serveur? Existe-t-il des plugins jquery pour le client?

merci d'avance.

Answer 1

Sur le chemin est de tirer informations de la base de données de temps en temps et l'afficher à l'utilisateur. Dans votre cas, cela pourrait être suffisant. Exemple:

1. Gardez une trace des éléments que vous souhaitez notifier. Supposons que l'utilisateur A consulte le profil de l'utilisateur B, ajoute un message de notification à une table de notification pour l'utilisateur B. Si l'utilisateur C clique sur l'utilisateur B, ajoutez une autre notification à la liste de l'utilisateur B.

2. Vérifiez s'il y a une nouvelle notification. Après avoir récupéré les notifications, marquez-les comme lues afin qu'elles ne s'affichent plus.

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

Donc, en gros: JS appelle 'script.php' toutes les 5 minutes, 'script.php' peut-être renvoie de nouvelles notifications à la fonction JS, vous affichez ces messages. Ceci est juste pour vous donner une idée d'une solution possible.

Une véritable notification push est plus difficile qu'il n'y paraît. Cela nécessiterait une connexion ouverte permanente qui permettrait d'envoyer instantanément de nouveaux messages à l'utilisateur. Vous aurez besoin de regarder quelque chose comme le Comet model pour cela. Mais dans la plupart des cas, cela n'a pas vraiment d'importance s'il y a un léger retard. J'ai utilisé 5 minutes dans mon exemple, mais cela peut aussi bien être 1 minute ou 10 ou 30. Cela dépend aussi de la quantité d'utilisateurs que vous avez et du type de charge que ces contrôles réguliers vont provoquer. Mais généralement tout cela se produit en une fraction de seconde et peut être facilement fait avec un intervalle, même si c'est un très court.

Answer 2

Je suis peut-être un peu en retard avec cette réponse, mais si quelqu'un cherche un plugin côté client pour ce type d'utilisation, j'ai créé un système de notification jQuery open source qui peut être intégré de manière transparente avec des applications Web, appelées jNotifyOSD. Vous pouvez voir une démo sur ce lien. Le code est on GitHub. J'ai essayé de garder l'API propre et mort simple à utiliser.Voici un exemple:

$.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 
}); 

Vous pouvez même définir les valeurs par défaut globales pour toutes les notifications futures (peut être surpassée sur une base par notification):

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

Mise à jour [13 décembre 2012]:

Cela fait un certain temps, mais j'ai finalement implémenté la prise en charge de plusieurs notifications visibles à l'aide d'un système de file d'attente. Par exemple:

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

Vous pouvez voir une démo here. Je pense que le plugin est maintenant suffisamment flexible pour couvrir une grande variété de cas d'utilisation.