Découverte de l'API Heartbeat

WPTech Nantes 2014

Sommaire

• Qu'est-ce que l'API Heartbeat ?

• Comment l'utiliser

• Aller plus loin

Qu'est-ce que l'API Heartbeat ?

Qu'est-ce que l'API Heartbeat ?

Introduit avec WordPress 3.6

Qu'est-ce que l'API Heartbeat ?

Permet d'établir une communication périodique navigateur <=> serveur

Qu'est-ce que l'API Heartbeat ?

Chaque battement permet

• D'envoyer des données (client)
• De les traiter (serveur)
• D'exploiter la réponse (client)

Qu'est-ce que l'API Heartbeat ?

Exemple dans WordPress

Qu'est-ce que l'API Heartbeat ?

Exemple dans WordPress

Comment l'utiliser ?

Comment l'utiliser

Ajouter les scripts nécessaires

function hbd_register_scripts() {
    wp_enqueue_script( 'heartbeat' );
    wp_enqueue_script( 'heartbeat-demo',
        plugin_dir_url( __FILE__ ) . 'heartbeat-demo.js',
        'heartbeat', '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'hbd_register_scripts' );

Comment l'utiliser

Le JS de communication

jQuery(document).ready( function($) {
    // Données à envoyer au serveur
    var args = {
       'data': 'hello world'
    }

    /* Met en file les données qui seront envoyées au serveur
    ** au prochain battement
    */
    wp.heartbeat.enqueue(
        'liveComment', // identifiant
        args,
        false // écraser ou non les données existantes, false = oui
    );

    $(document).on( 'heartbeat-tick.liveComment', function( event, data ) {
        // Traitement des données retournées par le serveur
    });
});

Comment l'utiliser

Traitement et retour des données côté serveur

function hbd_live_respond_to_server( $response, $data ) {
    if ( isset( $data['liveComment'] ) ) {
        if ( !isset( $data['liveComment']['data'] )
            return false;

            $response['liveComment'] = array(
                'returnData' => 'hello you',
            );
    }

    return $response;
}
add_filter( 'heartbeat_received', 'hbd_live_respond_to_server', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'hbd_live_respond_to_server', 10, 2 );

Comment l'utiliser

Utilisation des données retournées côté client

$(document).on( 'heartbeat-tick.liveComment', function( event, data ) {
    // hasOwnProperty permet de vérifier si des données ont été retournées
    if ( data.hasOwnProperty( 'liveComment' ) ) {
        if ( data['liveComment'].returnData ) {
            alert( data['liveComment'].returnData );
        }
    }
    wp.heartbeat.enqueue(
        'liveComment',
        args,
        false
    );
});

Aller plus loin

Aller plus loin

Passer des données avec wp_localize_script()

<?php

wp_localize_script(
    'heartbeat-demo', // identifiant du script 
    'heartbeatDemoAttrs', // nom de la variable qui va contenir les données
    array( 'id' => $post->ID ) // Données à passer
);

?>

Aller plus loin

Utiliser ces données en JS

var args = {
       'id' : heartbeatDemoAttrs['id']
    }

wp.heartbeat.enqueue(
        'liveComment',
        args,
        false
    );

Aller plus loin

Gestion des erreurs côté client

$(document).on('heartbeat-error.liveComment',
    function( e, jqXHR, textStatus, error ) {
        console.log( textStatus );
        console.log( error );
    }
);

Aller plus loin

Régler l'intervalle des battements par défaut

function hbd_heartbeat_settings( $settings ) {
    $settings['interval'] = 15; // Minimum 15, Maximum 120
    return $settings;
}
add_filter( 'heartbeat_settings', 'hbd_heartbeat_settings' );

De base toutes les 60 secondes

Aller plus loin

Régler l'intervalle des battements côté client

// Toutes les 5 secondes pendant 2 min 30 sec maximum
wp.heartbeat.interval( 'fast' );

wp.heartbeat.interval( int ); // valeurs possibles : 5, 15, 30, 60, 120

Aller plus loin

Régler l'intervalle des battements côté serveur

function hbd_live_respond_to_server( $response, $data ) {
    if ( isset( $data['liveComment'] ) ) {
        if ( !isset( $data['liveComment']['data'] )
            return false;

            $response['liveComment'] = array(
                'returnData' => 'hello you',
            );
            
            $response['heartbeat_interval'] = 'fast';
    }

    return $response;
}
add_filter( 'heartbeat_received', 'hbd_live_respond_to_server', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'hbd_live_respond_to_server', 10, 2 );

Aller plus loin

Manipuler les données en attente

// Vérifier si des données sont en attente
wp.heartbeat.isQueued( 'liveComment' );

// Enlever des données en attente
wp.heartbeat.dequeue( 'liveComment' );

// Récupérer les données en attente
wp.heartbeat.getQueuedItem( 'liveComment' );

Ressources

• http://wabeo.fr/commentaires-heartbeat-api/
• https://pippinsplugins.com/using-the-wordpress-heartbeat-api/
• https://tommcfarlin.com/wordpress-heartbeat-api/
• http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446

Rémy Perona

Développeur/intégrateur WP

Me retrouver sur :

• http://remyperona.fr
• Twitter : @theloopfr