The Heartbeat API Aan de slag

Met 3.6, alias "Oscar", zojuist uitgebracht, laten we een paar van de nieuwe functies bekijken die beschikbaar zijn voor ontwikkelaars. In het bijzonder zal ik in deze serie naar de nieuwe heartbeat API kijken en laten zien hoe je deze kunt gebruiken in je plug-ins en thema's..


Wat is de Heartbeat API?

De heartbeat API zorgt voor regelmatige communicatie tussen de browser van de gebruiker en de server. Een van de oorspronkelijke beweegredenen was om vergrendelpalen toe te staan ​​en gebruikers te waarschuwen wanneer meer dan één gebruiker probeert een bericht te bewerken of de gebruiker te waarschuwen wanneer het inloggen is verlopen.

Deze 'communicatie' omvat het routinematig verzenden van gegevens naar de server, die vervolgens reageert met alle geschikte gegevens. Met de API kunnen plug-ins hun eigen gegevens aan beide kanten koppelen, waardoor uw plug-in de mogelijkheid heeft om ook te communiceren tussen server en browser. U kunt deze fasen (gegevens verzonden van browser naar server en antwoord verzonden van server naar browser) beschouwen als de twee 'beats' die een hartcyclus vormen. Dit hele proces wordt met regelmatige tussenpozen herhaald. Dit gebeurt allemaal op de achtergrond, dus meestal zult u waarschijnlijk nooit weten dat het er is.


Gegevens verzenden van browser naar server

Standaard wordt Heartbeat automatisch gestart, maar verzendt het alleen gegevens naar de server wanneer het gegevens heeft om te verzenden. Voor het in wachtrij plaatsen van gegevens moet u de wp.heartbeat.enqueue () functie in uw JavaScript-bestand. Deze functie neemt drie argumenten:

  • Handvat - (tekenreeks) Dit is slechts een tekenreeks-id voor uw gegevens. Zorg ervoor dat het uniek is.
  • Gegevens - (object) De gegevens die als een object moeten worden verzonden.
  • override - (bool) Of je te veel moet rijden bestaand gegevens. Als dit waar is, worden alle eerder toegevoegde gegevens met de opgegeven handle vervangen. Als false en data al bestaat voor die handle, doet het niets.

Bijvoorbeeld:

 wp.heartbeat.enqueue ('wptuts-plugin', 'foo': 'bar', 'wp': 'tuts',, false);

Notitie: Alle gegevens die met een tel worden verzonden, worden onmiddellijk uit de wachtrij verwijderd. Gegevens die na dat punt in de wachtrij zijn geplaatst, worden met de volgende tel verzonden.

Om te controleren of een bepaalde handle al data wacht in de wachtrij, of om die data op te halen, kunt u de wp.heartbeat.isQueued (). Deze functie neemt een handvat als het enige argument en retourneert ook nul of de bijbehorende gegevens wachten in de wachtrij.

Dit is handig, bijvoorbeeld als u extra argumenten wilt toevoegen aan reeds in de wachtrij geplaatste gegevens:

 // Gegevens om var new_data = 'version': '3.6'; if (data = wp.heartbeat.isQueued ('wptuts-plugin')) // Data bestaat al - voeg gegevens samen met nieuwe gegevens new_data = jQuery.extend (data, new_data);  // Wachtrij en overschrijf bestaande gegevens wp.heartbeat.enqueue ('wptuts-plugin', new_data, true); / * wptuts-plugin heeft nu de data en new_data die ermee geassocieerd zijn: 'foo': 'bar', 'wp': 'tuts', 'version': '3.6'; * /

Tip: Je moet een lijst maken 'hartslag'als afhankelijkheid voor JavaScript-bestanden die gebruikmaken van deze API. We zullen dit, samen met een werkende voorbeeldplug-in, in deel drie behandelen.


Gegevens verzenden van server naar browser

Bij de volgende 'beat' worden de bovenstaande gegevens naar de server verzonden, wanneer deze gegevens aan de serverzijde worden ontvangen, zijn er drie hooks die worden geactiveerd:

  • heartbeat_received - Dit filtert het antwoord van de server op de browser. Het geeft ook de gegevens door die zijn ontvangen van de browser en de ID van het beheerdersscherm (of 'vooraan' als dit verzoek afkomstig is van de front-end).
  • heartbeat_send - Deze haak filtert ook het antwoord van de server op de browser. Het enige verschil met het bovenstaande filter is dat het de ontvangen gegevens niet doorgeeft.
  • heartbeat_tick - Deze actie wordt geactiveerd vlak voordat het antwoord is ingesteld. Het geeft de responsarray en scherm-ID door als argumenten.

Als de huidige gebruiker is uitgelogd, dan zijn de haken:

  • heartbeat_nopriv_received
  • heartbeat_nopriv_send
  • heartbeat_nopriv_tick

worden in plaats daarvan geactiveerd. (nopriv betekent geen privileges)

Voor het grootste deel zult u waarschijnlijk alleen de eerste van deze filters nodig hebben: heartbeat_received / heartbeat_nopriv_received. Deze filters geven de ontvangen gegevens door van de browser en laten ons toe om te controleren of we gegevens hebben die aan onze handle zijn gekoppeld, voordat we onze reactie opnemen:

 functie wptuts_respond_to_browser ($ response, $ data, $ screen_id) if (isset ($ data ['wptuts-plugin'])) // We hebben gegevens met onze handle! Laten we reageren met iets ... // echo $ data ['wptuts-plugin'] ['foo']; // prints 'bar'; $ response ['wptuts-plugin'] = array ('hallo' => 'wereld');  return $ antwoord;  // Ingelogde gebruikers: add_filter ('heartbeat_received', 'wptuts_respond_to_browser', 10, 3); // Uitgelogde gebruikers add_filter ('heartbeat_nopriv_received', 'wptuts_respond_to_browser', 10, 3);

Luisteren naar de terugkeer 'Beat'

Tot slot, om de cyclus te voltooien, kunnen we luisteren wanneer de reactie van de server door de browser wordt ontvangen. Wanneer dit gebeurt, activeert WordPress de gebeurtenis heartbeat-tick. We kunnen dit inhaken met onze callback om het antwoord te verwerken:

 jQuery (document) .ready (functie ($) $ (document) .on ('heartbeat-tick.wptuts-plugin', function (event, data) if (data.hasOwnProperty ('wptuts-plugin'))  console.log (data ['wptuts-plugin']); // Afdrukken naar de console 'hallo': 'world'););

Notitie: Het wordt ten zeerste aanbevolen dat u naamgepaste gebeurtenissen gebruikt, dat wil zeggen dat u uw terugbelverzoek verbindt heartbeat-tick. unique namespace zoals hierboven, en niet alleen heartbeat-tick.

Dat is in wezen hoe u kunt profiteren van de Heartbeat API. In het volgende deel van de serie zullen we kijken naar manieren waarop je de hartslag van de beat kunt manipuleren. In het laatste deel maken we een werkvoorbeeld van een plug-in die de API gebruikt.