API Heartbeat Utiliser Heartbeat dans un plugin

Dans ce tutoriel, nous allons créer un plugin simple qui utilise l'API Heartbeat. Notre plugin alertera les utilisateurs connectés, via une notification de type growl, lorsqu'un autre utilisateur se connecte ou se déconnecte du site..

Étant donné que ce tutoriel est axé sur l'API Heartbeat, je laisserai de côté les détails concernant la création de l'en-tête du plugin ou de la structure du fichier: le plugin est très simple et vous pouvez examiner le code source dans son intégralité dans ce référentiel GitHub..

Un utilisateur sera considéré comme "connecté" lorsqu'il se connectera et aura été actif au cours des 24 dernières heures. Si un utilisateur se déconnecte ou n'est pas actif pendant 24 heures, il sera considéré comme étant hors ligne. Nous garderons un œil sur l'état "en ligne" de l'utilisateur et sur le dernier horodatage "actif" pour aider à déterminer qui est actuellement en ligne..


Connexion et déconnexion

Tout d'abord, nous allons créer quelques fonctions liées à wp_login et wp_logout crochets. Celles-ci sont déclenchées lorsqu'un utilisateur se connecte / déconnecte de WordPress. Lorsqu'un utilisateur se connecte, son statut de connexion (stocké en tant que méta utilisateur) est mis à jour sur "true" et son dernier horodatage actif est mis à jour.

 fonction whoisonline_logged_in ($ username, $ user) update_user_meta ($ user-> ID, 'whoisonline_is_online', true); update_user_meta ($ user-> ID, 'whoisonline_last_active', time ());  add_action ('wp_login', 'whoisonline_logged_in', 10, 2);

De même, lorsqu'un utilisateur se déconnecte, son statut de connexion est mis à jour sur false:

 fonction whoisonline_logged_out () $ user_id = get_current_user_id (); update_user_meta ($ user_id, 'whoisonline_is_online', false);  add_action ('wp_logout', 'whoisonline_logged_out');

qui est en ligne?

Créons maintenant une fonction qui renvoie un tableau de noms d'utilisateurs actifs, indexés par identifiant. Nous allons utiliser le get_users () permet d’interroger tous les utilisateurs actifs au cours des dernières 24 heures (à l’aide de la whoisonline_last_active clé méta).

Nous écarterons ensuite tous les utilisateurs déconnectés en cochant la case whoisonline_is_online utilisateur / métadonnées.

 function who_is_online ($ args = array ()) // Activer les utilisateurs au cours des dernières 24 heures $ args = wp_parse_args ($ args, array ('meta_key' => 'whoisonline_last_active', 'meta_value' => time () - 24 * 60 * 60, 'meta_compare' => '>', 'count_total' => false,)); $ utilisateurs = get_users ($ args); // Lancer le tableau $ online_users = array (); foreach ($ utilisateurs en tant que $ utilisateur) if (! get_user_meta ($ utilisateur-> ID, 'whoisonline_is_online', true)) continue; $ online_users [$ user-> ID] = $ user-> user_login;  return $ online_users; 

Préparation à l'API Heartbeat

Avant de traiter de la partie client de l'API Heaertbeat, examinons la réponse du serveur à une demande "Qui est en ligne". Comme indiqué dans la partie 1 de cette série, nous nous accrocherons au filtre battement de coeur reçu (nous n’avons pas besoin de déclencher ceci pour les utilisateurs déconnectés, nous n’utiliserons donc pas le heartbeat_nopriv_received filtre).

Tout d'abord, nous mettrons à jour l'horodatage d'activité de l'utilisateur actuel et nous nous assurerons que son statut est défini sur "en ligne". Ensuite, nous vérifierons qu’une demande de données "Qui est en ligne" a été faite en recherchant le qui est en ligne clé (que nous utiliserons plus tard) dans le reçu $ data.

Si tel est le cas, nous répondrons avec un tableau d'utilisateurs connectés du formulaire:

 tableau ([ID utilisateur] => [Connexion de l'utilisateur])

Comme retourné par qui est en ligne().

 function whoisonline_check_who_is_online ($ response, $ data, $ screen_id) // Met à jour l'activité de l'utilisateur $ user_id = get_current_user_id (); update_user_meta ($ user_id, 'whoisonline_last_active', time ()); update_user_meta ($ user_id, 'whoisonline_is_online', true); // Vérifiez si "qui est en ligne?" a été demandé si (! empty ($ data ['qui-est-en-ligne']))) // Joindre les données à envoyer $ response ['whoisonline'] = who_is_online ();  return $ response;  add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3); add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3);

API Heartbeat

Maintenant, créez le fichier JavaScript qui-est-en-ligne.js fichier à la racine de votre dossier plugin. Ci-dessous le contour du fichier.

Tout d'abord, nous initions notre variable globale qui est en ligne. whoisonline.online et whoisonline.onlinePrev sont à la fois des «tableaux associatifs» (à proprement parler, en termes de JavaScript, des objets) de connexions d'utilisateurs, indexées par ID utilisateur - correspondant aux utilisateurs qui sont «en ligne» au temps actuel / précédent. Ceci est utilisé pour déterminer quand un utilisateur est connecté ou déconnecté.

Nous initions ensuite notre demande de données sur qui est en ligne avec wp.heartbeat.enqueue et écoutez la réponse en liant un rappel à l'événement battement de coeur.whoisonline. Dans ce rappel, nous vérifions les données renvoyées par le serveur, effectuons les actions nécessaires, puis nous nous assurons que notre demande de données est en file d'attente pour le temps suivant..

 // Inititer des variables var whoisonline = online: false, onlinePrev: false; jQuery (document) .ready (function () // Définir le temps initial sur fast - à des fins de démonstration seulement! wp.heartbeat.interval ('fast'); // les files d'attente sont des données wp.heartbeat.enqueue ('who-is -online ',' whoisonline ', false); jQuery (document) .on (' heartbeat-tick.whoisonline ', fonction (événement, données, textStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) / / Effectue des actions avec les données renvoyées // Dans notre exemple, nous souhaitons associer des données pour le temps suivant: // Il se peut que cela ne soit pas le cas dans toutes les applications: mettez uniquement les données en file d'attente lorsque vous avez besoin de. Wp.heartbeat.enqueue ( 'qui-est-en-ligne', 'whoisonline', faux);););

Maintenant, complétons les détails de la logique à l’intérieur de notre battement de coeur.whoisonline rappeler. Chaque fois que des données sont reçues du serveur, nous vérifions d’abord qu'il contient un tableau d'utilisateurs connectés (qui serait donné par la clé 'whoisonline'), en vérifiant data.hasOwnProperty ('whoisonline'). Si c'est le cas…

  • Mettre à jour whoisonline.onlinePrev pour refléter qui était en ligne au dernier temps, et whoisonline.online pour refléter qui est en ligne au rythme actuel.
  • Vérifier les ID d’utilisateur qui apparaissent dans whoisonline.online, mais ne sont pas dans whoisonline.onlinePrev. Ces utilisateurs viennent de se connecter.
  • Vérifier les ID d’utilisateur qui apparaissent dans whoisonline.onlinePrev, mais ne sont pas dans whoisonline.online. Ces utilisateurs viennent de se déconnecter.

Le fichier JavaScript fini ressemble alors à:

 var whoisonline = online: false, onlinePrev: false; jQuery (document) .ready (function () // Définir le temps initial sur fast wp.heartbeat.interval ('fast'); // Les files d'attente sont des données wp.heartbeat.enqueue ('who-is-online-online', 'whoisonline ', false); jQuery (document) .on (' heartbeat-tick.whoisonline ', fonction (événement, données, textStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) if (whoisonline.online == = false) // S'il vient d'être chargé, ne dites rien… whoisonline.online = data.whoisonline; whoisonline.onlinePrev = whoisonline.online || ; pour (var id dans whoisonline.onlinePrev) if (! whoisonline.online.hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.onlinePrev [id] + "est maintenant hors ligne"); .hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.online [id] + est maintenant en ligne "); wp.heartbeat.enqueue ('qui est en ligne", "whoisonline", faux ); ); );

Chargement de nos scripts et styles

Ce plugin utilisera le complément jQuery Notice de Tim Benniks, un plug-in de notification léger semblable à un growl pour jQuery. Téléchargez-le simplement et extrayez-le à la racine de votre plugin (il ne devrait contenir que deux fichiers: jquery.notice.js et jquery.notice.css)

Maintenant que le plugin jQuery a été ajouté, la dernière pièce du puzzle consiste à mettre en file d'attente les scripts et les styles nécessaires. Nous voulons que ce plugin fonctionne à la fois du côté frontal et de l’administrateur, nous allons donc utiliser à la fois admin_enqueue_scripts et wp_enqueue_scripts hook, mais nous voulons seulement charger le script pour les utilisateurs connectés.

 function whoisonline_load_scripts () / * Ne chargez les scripts que lorsque vous avez besoin - dans ce cas, partout si l'utilisateur est connecté * / if (is_user_logged_in ()) wp_enqueue_script ('whoisonline-jquery-notice', plugin_dir_url (__FILE__). 'jquery.notice.js', array ('jquery')); wp_enqueue_style ('whoisonline-jquery-notice', plugin_dir_url (__FILE__). 'jquery.notice.css'); wp_enqueue_script ('whoisonline', plugin_dir_url (__FILE__). 'who-is-online.js', array ('pulsation', 'whoisonline-jquery-notice'));  add_action ('admin_enqueue_scripts', 'whoisonline_load_scripts'); add_action ('wp_enqueue_scripts', 'whoisonline_load_scripts');

Et c'est le plugin fini.

Vous pouvez voir le code complet dans ce dépôt GitHub. De nombreuses améliorations sont possibles ici (par exemple, affichez une liste des utilisateurs et la date de leur dernière activité), mais espérons que ce plug-in relativement simple a démontré le fonctionnement de l'API Heartbeat.