Heartbeat API Heartbeat gebruiken in een plug-in

In deze tutorial gaan we een eenvoudige plug-in maken die de Heartbeat API gebruikt. Onze plug-in waarschuwt ingelogde gebruikers via een grommende melding, telkens wanneer een andere gebruiker inlogt of de site verlaat.

Aangezien deze tutorial is gericht op de Heartbeat API, zal ik details over het maken van de plug-in header of bestandsstructuur weglaten: de plugin is heel eenvoudig en je kunt de broncode volledig bekijken in deze GitHub-repository.

Een gebruiker wordt als "ingelogd" beschouwd wanneer hij zich aanmeldt en de laatste 24 uur actief is geweest. Als een gebruiker zich gedurende 24 uur afmeldt of niet actief is, worden deze beschouwd als offline. We houden de 'online' status en 'laatste actieve' tijdstempel van de gebruiker in de gaten om te bepalen wie er momenteel online is.


In- en uitloggen

Eerst maken we een aantal functies waaraan verslaafd is wp_login en wp_logout haken. Deze worden geactiveerd wanneer een gebruiker zich aanmeldt bij WordPress. Wanneer een gebruiker zich aanmeldt, werken we zijn inlogstatus (opgeslagen als gebruikers-meta) bij naar 'waar' en werken zijn laatste actieve tijdstempel bij.

 function whoisonline_logged_in ($ gebruikersnaam, $ gebruiker) 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);

Als een gebruiker zich afmeldt, updaten we zijn online status naar false:

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

wie is er Online?

Laten we nu een functie maken die een reeks gebruikersnamen van actieve gebruikers retourneert, geïndexeerd op gebruikers-ID. We zullen de gebruiken get_users () functie om alle gebruikers te vragen die de afgelopen 24 uur actief zijn geweest (met behulp van de whoisonline_last_active meta sleutel).

We verwijderen vervolgens alle gebruikers die zijn uitgelogd door het whoisonline_is_online gebruiker / metadata.

 function who_is_online ($ args = array ()) // Gebruikers in laatste 24 uur actief krijgen $ args = wp_parse_args ($ args, array ('meta_key' => 'whoisonline_last_active', 'meta_value' => tijd () - 24 * 60 * 60, 'meta_compare' => '>', 'count_total' => false,)); $ users = get_users ($ args); // Start array $ online_users = array (); foreach ($ gebruikers als $ gebruiker) if (! get_user_meta ($ user-> ID, 'whoisonline_is_online', true)) ga verder; $ online_users [$ user-> ID] = $ user-> user_login;  return $ online_users; 

Voorbereiding op de Heartbeat API

Voordat we het client-side gedeelte van de Heaertbeat API behandelen, gaan we in op de reactie van de server op een verzoek om 'who's online'. Zoals werd besproken in deel 1 van deze serie, haken we op het filter heartbeat_received (we hoeven dit niet te activeren voor ingelogde gebruikers, dus gebruiken het niet heartbeat_nopriv_received filter).

Eerst zullen we het tijdstempel van de activiteit van de huidige gebruiker bijwerken en ervoor zorgen dat hun status is ingesteld op 'online'. Vervolgens zullen we controleren of een verzoek om 'who's online' gegevens is gemaakt door te zoeken naar de wie is online sleutel (die we later zullen gebruiken) in de ontvangen $ data.

Als dit het geval is, reageren we met een reeks ingelogde gebruikers van het formulier:

 array ([User ID] => [Gebruiker log in])

Zoals geretourneerd door wie is online().

 function whoisonline_check_who_is_online ($ response, $ data, $ screen_id) // Update gebruikersactiviteit $ user_id = get_current_user_id (); update_user_meta ($ user_id, 'whoisonline_last_active', time ()); update_user_meta ($ user_id, 'whoisonline_is_online', true); // Controleer of "who's online?" is aangevraagd als (! empty ($ data ['who-is-online'])) // Gegevens koppelen om te verzenden $ antwoord ['whoisonline'] = who_is_online ();  return $ antwoord;  add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3); add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3);

Heartbeat API

Maak nu het JavaScript-bestand wie-is-online.js bestand in de root van uw plugin-map. Hieronder ziet u de omtrek van het bestand.

Eerst initiëren we onze globale variabele wie is online. whoisonline.online en whoisonline.onlinePrev zijn beide 'associatieve arrays' (strikt genomen, in termen van JavaScript, het zijn objecten) van gebruikersaanmeldingen, geïndexeerd door gebruikers-ID - corresponderend met die gebruikers die 'online' zijn op de huidige / vorige tel. Dit wordt gebruikt om te bepalen wanneer een gebruiker zich heeft aan- of afgemeld.

Vervolgens initiëren we ons verzoek om gegevens over met wie we online zijn wp.heartbeat.enqueue en luister naar de reactie door een callback aan de gebeurtenis te koppelen heartbeat-tick.whoisonline. In die callback controleren we op gegevens die door de server worden geretourneerd, voeren we alle noodzakelijke acties uit en zorgen we ervoor dat ons verzoek om gegevens in de wachtrij wordt geplaatst voor de volgende tel..

 // Variabelen initiëren var whoisonline = online: false, onlinePrev: false; jQuery (document) .ready (function () // Stel de eerste beat in op de snelle - alleen voor demonstratieve doeleinden! wp.heartbeat.interval ('fast'); // Enqueue zijn data wp.heartbeat.enqueue ('who-is -online ',' whoisonline ', false); jQuery (document) .on (' heartbeat-tick.whoisonline ', function (event, data, textStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) / / Acties uitvoeren met geretourneerde gegevens // In ons voorbeeld willen we gegevens bijvoegen voor de volgende tel. // Dit is mogelijk niet het geval in alle toepassingen: wacht alleen gegevens wanneer nodig. Wp.heartbeat.enqueue ( 'who-is-online', 'whoisonline', false);););

Laten we nu de details van de logica binnenin ons invullen heartbeat-tick.whoisonline Bel terug. Wanneer gegevens van de server worden ontvangen, controleren we eerst of het een reeks ingelogde gebruikers bevat (die wordt gegeven door de sleutel 'whoisonline'), door te controleren data.hasOwnProperty ('whoisonline'). Als…

  • Bijwerken whoisonline.onlinePrev om te reflecteren wie bij de laatste tel online was, en whoisonline.online om te reflecteren wie op het huidige ritme online is.
  • Controleer op gebruikers-ID's die verschijnen in whoisonline.online, maar zijn niet in whoisonline.onlinePrev. Deze gebruikers zijn zojuist ingelogd.
  • Controleer op gebruikers-ID's die verschijnen in whoisonline.onlinePrev, maar zijn niet in whoisonline.online. Deze gebruikers zijn zojuist afgemeld.

Het voltooide JavaScript-bestand ziet er dan als volgt uit:

 var whoisonline = online: false, onlinePrev: false; jQuery (document) .ready (function () // Stel eerste beat in op snel wp.heartbeat.interval ('snel'); // Enqueue zijn data wp.heartbeat.enqueue ('who-is-online', 'whoisonline ', false); jQuery (document) .on (' heartbeat-tick.whoisonline ', function (event, data, textStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) if (whoisonline.online == = false) // Als zojuist geladen, zeg dan niets ... whoisonline.online = data.whoisonline; whoisonline.onlinePrev = whoisonline.online || ; for (var id in whoisonline.onlinePrev) if (! whoisonline.online.hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.onlinePrev [id] + "is nu offline"); voor (var id in whoisonline.online) if (! whoisonline.onlinePrev .hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.online [id] + "is nu online"); wp.heartbeat.enqueue ('who-is-online', 'whoisonline', false);););

Onze scripts en stijlen laden

Deze plug-in maakt gebruik van de add-on jQuery Notice van Tim Benniks - een lichtgewicht grommende meldingsplug-in voor jQuery. Gewoon downloaden en uitpakken naar de root van uw plug-in (deze zou uit slechts twee bestanden moeten bestaan: jquery.notice.js en jquery.notice.css)

Nu de jQuery-plug-in is toegevoegd, is het laatste stukje van de puzzel om de nodige scripts en stijlen in te voeren. We willen dat deze plug-in zowel aan de front-end als de admin kant functioneert, dus we zullen beide gebruiken admin_enqueue_scripts en wp_enqueue_scripts hook, maar we willen alleen het script laden voor ingelogde gebruikers.

 function whoisonline_load_scripts () / * Ony laad scripts wanneer dat nodig is - in dit geval overal waar de gebruiker is ingelogd * / 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 ('heartbeat', 'whoisonline-jQuery-notice'));  add_action ('admin_enqueue_scripts', 'whoisonline_load_scripts'); add_action ('wp_enqueue_scripts', 'whoisonline_load_scripts');

En dat is de voltooide plugin.

Je kunt de code volledig bekijken in deze GitHub-repository. Er is hier veel ruimte voor verbetering (bijvoorbeeld een lijst met gebruikers weergeven en wanneer ze voor het laatst actief waren), maar hopelijk heeft deze relatief eenvoudige plug-in aangetoond hoe de Heartbeat API werkt.