Heartbeat API #2

Cet article est la suite de Heartbeat API

Revenons sur notre exemple :

J’ai un plugin qui affiche en alert, dans le panneau d’administration et en front-end, qu’on soit connecté un alert.

Ce plugin comprend un fichier PHP :

/*
Plugin Name: JBS3 heartbeat-ajax
Plugin URI: http://www.wp-rest-api.site
Description: Heartbeat API test 
Version: 1
Author: Jackie Boscher (completed by)
Author URI: https://developer.wordpress.org/plugins/javascript/heartbeat-api/#sending-data-to-the-server
*/

/*
Filter the Heartbeat data being sent to the client
add_filter( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
add_filter()
*/ // Logged in users: // Add filter to receive hook, and specify we need 2 parameters. add_filter( 'heartbeat_received', 'myplugin_receive_heartbeat', 10, 2 ); // Logged out users /* ---------------------------------------------------------------------- NOTE - THIS PART IS NOT PRESENT IN THE WORDPRESS TUTORIAL */ add_filter( 'heartbeat_nopriv_received', 'myplugin_receive_heartbeat', 10, 2 ); /* ---------------------------------------------------------------------- */ /** * Receive Heartbeat data and respond. * * Processes data received via a Heartbeat request, and returns additional data to pass back to the front end. * * @param array $response Heartbeat response data to pass back to front end. * @param array $data Data received from the front end (unslashed). */ function myplugin_receive_heartbeat( $response, $data ) { // If we didn't receive our data, don't send any back. if ( empty( $data['myplugin_customfield'] ) ) { return $response; } // Calculate our data and pass it back. For this example, we'll hash it. $received_data = $data['myplugin_customfield']; $response['myplugin_customfield_hashed'] = sha1( $received_data ); return $response; } /* function myplugin_receive_heartbeat_log_out( $response, $data ) { // If we didn't receive our data, don't send any back. if ( empty( $data['myplugin_customfield_log_out'] ) ) { return $response; } // Calculate our data and pass it back. For this example, we'll hash it. $received_data = $data['myplugin_customfield_log_out']; $response['myplugin_customfield_hashed_log_out'] = sha1( $received_data ); return $response; } */ /* ---------------------------------------------------------------------- NOTE - THIS PART IS NOT PRESENT IN THE WORDPRESS TUTORIAL */ /* Add an action to call our script enqueuing function */ /* Usage #Usage 1 wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered. You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script. his is the recommended method of linking JavaScript to a WordPress generated page. The function should be called using the wp_enqueue_scripts action hook if you want to call it on the front-end of the site, like in the examples above. To call it on the administration screens, use the admin_enqueue_scripts action hook. For the login screen, use the login_enqueue_scripts action hook.
wp_enqueue_script()
*/ /* admin_enqueue_scripts is the first action hooked into the admin scripts actions. It provides a single parameter, the $hook_suffix for the current admin page. https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts */ // Pour l'ADMIN add_action( 'admin_enqueue_scripts', 'enqueue_jbs3_heartbeat_script' ); /* wp_enqueue_scripts is the proper hook to use when enqueuing items that are meant to appear on the front end. Despite the name, it is used for enqueuing both scripts and styles. https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts */ // Pour le FRONTEND /* ---------------------------------------------------------------------- NOTE - THIS PART IS NOT PRESENT IN THE WORDPRESS TUTORIAL */ add_action( 'wp_enqueue_scripts', 'enqueue_jbs3_heartbeat_script' ); /** * Enqueues our Heartbeat script */ function enqueue_jbs3_heartbeat_script() { /* Prepare the dependencies - our script requires jQuery and WordPress' Heartbeat scripts. */ $depends = array( 'jquery', 'heartbeat' ); /* Enqueue our script, using the dependencies we declared above */ wp_enqueue_script( 'jbs3-heartbeat-script', plugin_dir_url( __FILE__ ) . 'jbs3.js', $depends ); } et un fichier JS : // https://developer.wordpress.org/plugins/javascript/heartbeat-api/#sending-data-to-the-server // heartbeat_nopriv_send // heartbeat-send // Lorsque l'utilisateur est connecté jQuery( document ).on( 'heartbeat-send', function ( event, data ) { // Add additional data to Heartbeat data. data.myplugin_customfield = 'some_data'; return ; }); // A chaque tick, de l'utilisateur connecté jQuery( document ).on( 'heartbeat-tick', function ( event, data ) { // Check for our data, and use it. jQuery( document ).on( 'heartbeat-tick', function ( event, data ) { // Check for our data, and use it. if ( ! data.myplugin_customfield_hashed ) { return; } alert( 'The hash is ' + data.myplugin_customfield_hashed ); }); // A chaque tick, que l'utilisateur non connecté // jQuery( document ).on( 'heartbeat_nopriv_tick', function ( event, data ) { // Check for our data, and use it. // if ( data.myplugin_customfield_hashed_log_out ) { // return; //} // alert( 'Log out ' + data.myplugin_customfield_hashed_log_out ); // });

première modification

La première modification que je fais est pour que le message ne s’affiche pas dans le panneau d’administration.

Il suffit de ne pas charger le script dans l’admin.

// add_action( 'admin_enqueue_scripts', 'enqueue_jbs3_heartbeat_script' );

deuxième modification

La deuxième modification que je veux est – à titre d’exemple – remplacer une partie d’un article par une autre au moment où le tick tombe.

Je mets dans un article (en mode texte) le contenu suivant :


<div id="abcde">abc</div>


<div class="fgh">fgh</div>

et je remplace l’alert dans mon script par un replaceWith.

(note importante : le $ ne marche pas toujours dans WordPress. C’est pourquoi j’utilise jQuery.

/ A chaque tick, de l'utilisateur connecté jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
    // Check for our data, and use it.
jQuery( document ).on( 'heartbeat-tick', function ( event, data ) {
    // Check for our data, and use it.
    if ( ! data.myplugin_customfield_hashed ) {
        return;
    }
  
    // alert( 'The hash is ' + data.myplugin_customfield_hashed );
    jQuery( "#abcde" ).replaceWith( "
<h2>Other heading</h2>

" );
    jQuery( "div.fgh" ).replaceWith( "
<h2>New heading</h2>

" );
});

Suite de l’article Heartbeat API #3