Heartbeat API Bruke hjerterytme i et plugin

I denne opplæringen skal vi lage en enkel plugin som bruker Heartbeat API. Vårt plugin vil varsle innloggede brukere, via et grønt-lignende varsel, når en annen bruker logger inn eller ut av nettstedet.

Siden denne opplæringen er fokusert på Heartbeat API, vil jeg legge ut detaljer om å lage pluginhode eller filstruktur: pluginet er veldig enkelt, og du kan undersøke kildekoden i sin helhet ved dette GitHub-depotet.

En bruker vil bli ansett som "logget inn" når de logger på og har vært aktive i løpet av de siste 24 timene. Hvis en bruker logger ut eller ikke er aktiv i 24 timer, blir de ansett som offline. Vi beholder faner på brukerens 'online' status og 'siste aktive' tidsstempel for å avgjøre hvem som er på nett.


Logg inn og logg ut

Først skal vi opprette et par funksjoner som er koblet til wp_login og wp_logout kroker. Disse utløses når en bruker logger inn / ut av WordPress. Når en bruker logger på, oppdaterer vi loggstatusen (lagret som bruker meta) til "sann" og oppdaterer sin siste aktive tidsstempel.

 funksjon whoisonline_logged_in ($ brukernavn, $ bruker) 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);

På samme måte, når en bruker logger ut, oppdaterer vi sin online status til falsk:

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

Hvem er online?

La oss nå lage en funksjon som returnerer en rekke brukernavn for aktive brukere, indeksert av bruker-ID. Vi bruker get_users () funksjon for å spørre alle brukere som har vært aktive de siste 24 timene (ved hjelp av whoisonline_last_active meta nøkkel).

Vi kaster bort alle brukere som har logget av ved å sjekke whoisonline_is_online bruker / meta data.

 fungere who_is_online ($ args = array ()) // Få brukere aktive i de siste 24 timene $ args = wp_parse_args ($ args, array ('meta_key' => 'whoisonline_last_active', 'meta_value' => tid () - 24 * 60 * 60, 'meta_compare' => '>', 'count_total' => false,)); $ users = get_users ($ args); // Start array $ online_users = array (); foreach ($ brukere som $ bruker) hvis (! get_user_meta ($ user-> ID, 'whoisonline_is_online', true)) fortsett; $ online_users [$ user-> ID] = $ user-> user_login;  returner $ online_users; 

Klargjøre for Heartbeat API

Før vi håndterer klientens del av Heaertbeat API, må vi ta opp serverens svar på en forespørsel om "hvem som er online". Som dekket i del 1 i denne serien, hekker vi på filteret heartbeat_received (vi trenger ikke å utløse dette for logget ut brukere, så vil ikke bruke heartbeat_nopriv_received filter).

Først oppdaterer vi den nåværende brukerens tidsstempel for aktivitet og sikrer at statusen deres er satt til 'online'. Deretter sjekker vi at en forespørsel om "hvem som er online" har blitt gjort ved å lete etter hvem er online nøkkel (som vi vil bruke senere) i mottatt $ data.

Hvis den har, svarer vi med en rekke innloggede brukere av skjemaet:

 array ([User ID] => [Bruker logg inn])

Som returnert av hvem er online().

 funksjon whoisonline_check_who_is_online ($ respons, $ data, $ screen_id) // Oppdater brukerens aktivitet $ user_id = get_current_user_id (); update_user_meta ($ user_id, 'whoisonline_last_active', tid ()); update_user_meta ($ user_id, 'whoisonline_is_online', true); // Sjekk for å se om "hvem er online?" har blitt forespurt om (! tomt ($ data ['who-is-online'])) // Bind data som skal sendes $ respons ['whoisonline'] = who_is_online ();  returner $ respons;  add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3); add_filter ('heartbeat_received', 'whoisonline_check_who_is_online', 10, 3);

Heartbeat API

Lag nå JavaScript-filen hvem-er-online.js fil i roten av plugin-mappen din. Nedenfor er oversikten over filen.

Først begynner vi vår globale variabel hvem er online. whoisonline.online og whoisonline.onlinePrev er begge "assosiative arrayer" (strengt sett, når det gjelder JavaScript, er de objekter) av brukerne logger, indeksert av bruker-ID - tilsvarende de brukerne som er 'online' på nåværende / forrige takt. Dette brukes til å bestemme når en bruker har logget inn eller ut.

Vi starter så vår forespørsel om data om hvem som er online med wp.heartbeat.enqueue og lytt etter svaret ved å knytte tilbakering til arrangementet hjerterytme-tick.whoisonline. I den tilbakeringingen kontrollerer vi for data returnert av serveren, utfører nødvendige handlinger og kontroller at vår forespørsel om data er i kø for neste takt.

 // Inititate variabler var whoisonline = online: false, onlinePrev: false; jQuery (dokument) .ready (funksjon () // Still inn første takt for rask - kun for demonstrasjonsformål! wp.heartbeat.interval ('fast'); // Enqueue er data wp.heartbeat.enqueue ('who-is -online ',' whoisonline ', false); jQuery (dokument) .on (' heartbeat-tick.whoisonline ', funksjon (hendelse, data, textStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) / Utfør handlinger med returnerte data // I vårt eksempel vil vi legge ved data for neste takt. // Dette kan ikke være tilfelle i alle applikasjoner: kun kødata når du trenger. Wp.heartbeat.enqueue ( 'who-is-online', 'whoisonline', false);););

La oss nå fylle ut detaljene i logikken inne i vår hjerterytme-tick.whoisonline Ring tilbake. Når data mottas fra serveren, kontrollerer vi først at den inneholder en rekke innloggede brukere (som vil bli gitt av nøkkelen 'whoisonline') ved å sjekke data.hasOwnProperty ('whoisonline'). I så fall…

  • Oppdater whoisonline.onlinePrev for å reflektere hvem som var online på siste takt, og whoisonline.online for å gjenspeile hvem som er online på dagens takt.
  • Sjekk etter bruker-IDer som vises i whoisonline.online, men er ikke inne whoisonline.onlinePrev. Disse brukerne har nettopp logget inn.
  • Sjekk etter bruker-IDer som vises i whoisonline.onlinePrev, men er ikke inne whoisonline.online. Disse brukerne har nettopp logget ut.

Den ferdige JavaScript-filen ser så ut som:

 var whoisonline = online: false, onlinePrev: false; jQuery (dokument) .ready (funksjon () // Sett inn første takt til rask wp.heartbeat.interval ('fast'); // Enqueue er data wp.heartbeat.enqueue ('who-is-online', 'whoisonline ', false); jQuery (dokument) .on (' heartbeat-tick.whoisonline ', funksjon (hendelse, data, tekstStatus, jqXHR) if (data.hasOwnProperty (' whoisonline ')) if (whoisonline.online == = false) // Hvis bare lastet, ikke si noe ... whoisonline.online = data.whoisonline; whoisonline.onlinePrev = whoisonline.online || ; for (var id i whoisonline.onlinePrev) if (! whoisonline.online.hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.onlinePrev [id] + "er nå frakoblet"); for (var id i whoisonline.online) if ! whoisonline.onlinePrev .hasOwnProperty (id)) jQuery.noticeAdd (text: whoisonline.online [id] + "er nå online"); wp.heartbeat.enqueue ('who-is-online', 'whoisonline' falsk ); ); );

Laster inn våre skript og stiler

Dette pluginet vil benytte jQuery Notice add-on av Tim Benniks - et lett, grønt-lignende varselplugin for jQuery. Bare last det ned, og hent det til roten til pluginet ditt (det skal bestå av bare to filer: jquery.notice.js og jquery.notice.css)

Nå som jQuery-pluginet er lagt til, er det siste stykket av puslespillet å kjenne de nødvendige skript og stiler. Vi vil at dette pluginet skal fungere både på forsiden og admin siden, så vi vil bruke begge admin_enqueue_scripts og wp_enqueue_scripts krok, men vi vil bare laste inn skriptet for innloggede brukere.

 fungere whoisonline_load_scripts () / * Ony belastningsskript når du trenger - i dette tilfellet overalt hvis brukeren er logget inn * / hvis (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');

Og det er det ferdige pluginet.

Du kan se koden i sin helhet på dette GitHub-depotet. Det er god plass til forbedring her (for eksempel vise en liste over brukere, og når de var sist aktive), men forhåpentligvis har dette relativt enkle pluginet vist hvordan Heartbeat API fungerer.