動作の仕組み

ページが読み込まれると、クライアントサイドのハートビートコードは、15〜120秒ごとに実行される間隔（「ティック」と呼ばれる）を設定します。実行されると、ハートビートはデータを収集し、jQueryイベントを介して送信し、サーバーに送信して応答を待ちます。サーバーでは、admin-ajaxハンドラーが渡されたデータを受け取り、応答を準備し、応答をフィルタリングし、JSON形式でデータを返します。クライアントはこのデータを受け取り、データが受信されたことを示す最終的なjQueryイベントを発火させます。

カスタムハートビートイベントの基本的なプロセスは次のとおりです：

  • 1. 送信されるデータに追加フィールドを追加する（JS heartbeat-send イベント）
  • 2. PHPで送信されたフィールドを検出し、追加の応答フィールドを追加する（heartbeat_received フィルター）
  • 3. JSで返されたデータを処理する（JS heartbeat-tick）

（必要な機能に応じて、これらのイベントのうち1つまたは2つだけを使用することを選択できます。）

APIの使用

ハートビートAPIを使用するには、JavaScriptでの送信および受信コールバックと、PHPで渡されたデータを処理するためのサーバーサイドフィルターの2つの異なる機能が必要です。

サーバーへのデータ送信

ハートビートがサーバーにデータを送信する際に、カスタムデータを含めることができます。これは、サーバーに送信したい任意のデータ、またはデータを期待していることを示す単純なtrue値である可能性があります。 

  1. jQuery( document ).on( 'heartbeat-send', function ( event, data ) {
  2.     // Add additional data to Heartbeat data.
  3.     data.myplugin_customfield = 'some_data';
  4. });

サーバーでの受信と応答

サーバー側では、このデータを検出し、応答に追加のデータを追加できます。 

  1. /**
  2.  * Receive Heartbeat data and respond.
  3.  *
  4.  * Processes data received via a Heartbeat request, and returns additional data to pass back to the front end.
  5.  *
  6.  * @param array $response Heartbeat response data to pass back to front end.
  7.  * @param array $data     Data received from the front end (unslashed).
  8.  *
  9.  * @return array
  10.  */
  11. function myplugin_receive_heartbeat( array $response, array $data ) {
  12.     // If we didn't receive our data, don't send any back.
  13.     if ( empty( $data['myplugin_customfield'] ) ) {
  14.         return $response;
  15.     }
  17.     // Calculate our data and pass it back. For this example, we'll hash it.
  18.     $received_data = $data['myplugin_customfield'];
  20.     $response['myplugin_customfield_hashed'] = sha1( $received_data );
  21.     return $response;
  22. }
  23. add_filter( 'heartbeat_received', 'myplugin_receive_heartbeat', 10, 2 );

応答の処理

フロントエンドに戻ると、このデータを受信する処理を行うことができます。 

  1. jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
  2.     // Check for our data, and use it.
  3.     if ( ! data.myplugin_customfield_hashed ) {
  4.         return;
  5.     }
  7.     alert( 'The hash is ' + data.myplugin_customfield_hashed );
  8. });

すべての機能がこれらの3つのステップすべてを必要とするわけではありません。たとえば、サーバーにデータを送信する必要がない場合は、後の2つのステップだけを使用できます。