Die Heartbeat-API Erste Schritte

Mit der soeben erschienenen Version 3.6, kurz "Oscar", können wir uns einige der neuen Funktionen ansehen, die den Entwicklern zur Verfügung stehen. In dieser Serie werde ich insbesondere die neue Heartbeat-API betrachten und zeigen, wie Sie sie in Ihren Plugins und Themes verwenden können.

Was ist die Heartbeat-API??

Die Heartbeat-API ermöglicht die regelmäßige Kommunikation zwischen dem Browser des Benutzers und dem Server. Eine der ursprünglichen Beweggründe bestand darin, das Sperren von Beiträgen zuzulassen und Benutzer zu warnen, wenn mehrere Benutzer versuchen, einen Beitrag zu bearbeiten, oder den Benutzer zu warnen, wenn ihre Anmeldung abgelaufen ist.

Bei dieser "Kommunikation" werden routinemäßig Daten an den Server gesendet, der daraufhin mit geeigneten Daten antwortet. Die API ermöglicht Plugins, ihre eigenen Daten an beiden Enden anzuhängen, sodass Ihr Plugin auch zwischen Server und Browser kommunizieren kann. Sie können sich diese Stufen (Daten, die vom Browser an den Server gesendet werden, und die Antwort, die vom Server an den Browser gesendet werden) als die zwei "Schläge" vorstellen, die einen Herzzyklus ausmachen. Dieser gesamte Vorgang wird in regelmäßigen Abständen wiederholt. Dies alles geschieht im Hintergrund, so dass Sie die meiste Zeit wahrscheinlich nie wissen, dass es da ist.

Senden von Daten vom Browser an den Server

Standardmäßig wird Heartbeat automatisch ausgeführt, es werden jedoch nur Daten an den Server gesendet, wenn Daten zu senden sind. Um Daten einreihen zu können, müssen Sie die wp.heartbeat.enqueue () Funktion in Ihrer JavaScript-Datei. Diese Funktion benötigt drei Argumente:

Griff - (Zeichenfolge) Dies ist nur eine Zeichenfolge für Ihre Daten. Stellen Sie sicher, dass es einzigartig ist.
Daten - (object) Die Daten, die als Objekt gesendet werden sollen.
Überschreiben - (bool) Ob zu überfahren bestehender Daten. Bei true werden alle Daten, die zuvor mit dem angegebenen Handle hinzugefügt wurden, ersetzt. Wenn false vorhanden ist und bereits Daten für diesen Handle vorhanden sind, wird nichts ausgeführt.

Zum Beispiel:

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

Hinweis: Alle Daten, die mit einem Beat gesendet werden, werden sofort aus der Warteschlange entfernt. Daten, die nach diesem Punkt in die Warteschlange gestellt wurden, werden mit dem nächsten Takt gesendet.

Um zu überprüfen, ob für ein bestimmtes Handle bereits Daten in der Warteschlange warten, oder um diese Daten abzurufen, können Sie das verwenden wp.heartbeat.isQueued (). Diese Funktion nimmt ein Handle als einziges Argument an und gibt eines zurück Null oder die zugehörigen Daten, die in der Warteschlange warten.

Dies ist z. B. nützlich, wenn Sie an bereits in der Warteschlange befindliche Daten zusätzliche Argumente anhängen möchten:

 // Daten zum Hinzufügen von var new_data = 'version': '3.6'; if (data = wp.heartbeat.isQueued ('wptuts-plugin')) // Daten bereits vorhanden - Daten mit neuen Daten zusammenführen new_data = jQuery.extend (data, new_data);  // Vorhandene Daten in die Warteschlange stellen und überschreiben wp.heartbeat.enqueue ('wptuts-plugin', new_data, true); / * wptuts-plugin hat jetzt die zugehörigen Daten und neuen Daten: 'foo': 'bar', 'wp': 'tuts', 'version': '3.6'; * /

Spitze: Sie sollten auflisten 'Herzschlag'als Abhängigkeit für alle JavaScript-Dateien, die diese API verwenden. Wir werden dies zusammen mit einem funktionierenden Beispiel-Plugin in Teil drei behandeln.

Senden von Daten vom Server an den Browser

Beim nächsten "Schlag" werden die oben genannten Daten an den Server gesendet. Wenn diese Daten serverseitig empfangen werden, gibt es drei Hooks, die ausgelöst werden:

heartbeat_received - Dadurch wird die Antwort des Servers an den Browser gefiltert. Außerdem werden die vom Browser erhaltenen Daten und die Admin-Bildschirm-ID (oder "Front", wenn diese Anforderung vom Front-End stammt) übergeben..
heartbeat_send - Dieser Haken filtert auch die Antwort des Servers an den Browser. Der einzige Unterschied zum obigen Filter besteht darin, dass die empfangenen Daten nicht durchgelassen werden.
heartbeat_tick - Diese Aktion wird unmittelbar vor dem Setzen der Antwort ausgelöst. Das Antwortarray und die Bildschirm-ID werden als Argumente übergeben.

Wenn der aktuelle Benutzer abgemeldet ist, werden folgende Schritte ausgeführt:

heartbeat_nopriv_received
heartbeat_nopriv_send
heartbeat_nopriv_tick

werden stattdessen ausgelöst. (nopriv steht für keine Privilegien)

In den meisten Fällen benötigen Sie wahrscheinlich nur den ersten dieser Filter: heartbeat_received / heartbeat_nopriv_received. Diese Filter leiten die vom Browser erhaltenen Daten weiter, sodass wir prüfen können, ob mit unserem Handle Daten verknüpft sind, bevor wir unsere Antwort hinzufügen:

 Funktion wptuts_respond_to_browser ($ response, $ data, $ screen_id) if (isset ($ data ['wptuts-plugin'])) // Wir haben Daten mit unserem Handle! Lass uns mit etwas antworten… // echo $ data ['wptuts-plugin'] ['foo']; // druckt 'bar'; $ response ['wptuts-plugin'] = array ('hello' => 'world');  $ Antwort zurückgeben;  // Angemeldete Benutzer: add_filter ('heartbeat_received', 'wptuts_respond_to_browser', 10, 3); // Abgemeldete Benutzer add_filter ('heartbeat_nopriv_received', 'wptuts_respond_to_browser', 10, 3);

Warten auf den Return 'Beat'

Zum Abschluss des Zyklus können wir abwarten, wann die Antwort des Servers vom Browser empfangen wird. In diesem Fall löst WordPress das Ereignis aus Herzschlag-Tick. Wir können uns mit unserem Rückruf darauf einklinken, um die Antwort zu verarbeiten:

 jQuery (document) .ready (Funktion ($) $ (document) .on ('heartbeat-tick.wptuts-plugin', Funktion (Ereignis, Daten) if (data.hasOwnProperty ('wptuts-plugin'))  console.log (data ['wptuts-plugin']); // Druckt auf die Konsole 'hello': 'world'););

Hinweis: Es wird dringend empfohlen, dass Sie Namespace-Ereignisse verwenden, d. H. Sie binden Ihren Callback an Herzschlag-Tick. eindeutiger Namensraum wie oben und nicht nur zu Herzschlag-Tick.

Das ist im Wesentlichen, wie die Heartbeat-API genutzt werden kann. Im nächsten Teil der Serie werden wir nach Wegen suchen, wie Sie den Puls des Beats beeinflussen können. Im letzten Teil erstellen wir ein Arbeitsbeispiel für ein Plugin, das die API verwendet.

Code