Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Heartbeat API: Your Data Simply in Realtime

Heartbeat API: Your Data Simply in Realtime

As of WordPress 3.9, the Heartbeat API is no longer experimental!

It’s intended to help developers synchronize data between a user’s browser and server without manually sending individual AJAX calls.

Attendees will learn how WordPress’ core implements Heartbeat, and how they can use it on their own sites to create more interactive and up-to-date admin screens.

As a bonus, users will learn how to make a WordPress site honk incessantly via a WordPress REST API endpoint.

Code and Context available at: http://www.getsource.net/2014/08/heartbeat-wp-rest-api-wordcamp-nyc/

Presented by Mike Schroder (http://getsource.net)

Mike Schroder

August 03, 2014
Tweet

More Decks by Mike Schroder

Other Decks in Technology

Transcript

  1. Heartbeat API:
    your data simply in realtime.
    !
    WordCamp NYC 2014
    Mike Schroder (DH-Shredder)
    @GetSource - http://www.getsource.net

    View full-size slide

  2. Who Am I?
    • Mike Schroder, a.k.a DH-
    Shredder, a.k.a. @GetSource
    • Third Culture Kid, enjoy
    Coffee & Sailing
    • WordPress 3.9 Co-Lead and
    co-author of Heartbeat API
    • Happy DreamHost Employee

    View full-size slide

  3. WAT is Heartbeat API?

    View full-size slide

  4. Realtime* Bidirectional
    communication via AJAX.

    View full-size slide

  5. 15-30 seconds by default.
    120 seconds when inactive.

    View full-size slide

  6. EXPERIMENTAL WARNING!

    View full-size slide

  7. EXPERIMENTAL WARNING!

    View full-size slide

  8. No longer experimental as of
    WordPress 3.9

    View full-size slide

  9. JS Trigger Flow
    !
    !
    -> heartbeat-send
    -> heartbeat-tick
    -/> heartbeat-error
    !
    !
    (wp-includes/js/heartbeat.js)

    View full-size slide

  10. PHP Filter/Action Flow
    !
    !
    -> heartbeat_received
    -> heartbeat_send
    -> heartbeat_tick (action)
    !
    !
    (wp-admin/includes/ajax-actions.php)

    View full-size slide

  11. if ( ! empty( $_POST['data'] ) ) {
    $data = (array) $_POST['data'];
    $response = apply_filters( 'heartbeat_received', $response,
    $data, $screen_id );
    }
    $response = apply_filters( 'heartbeat_send',
    $response, $screen_id );
    !
    do_action( 'heartbeat_tick', $response, $screen_id );
    // Send the current time according to the server
    $response['server_time'] = time();
    wp_send_json($response);
    Direct from core.

    View full-size slide

  12. wp-json/honk_horn
    custom REST endpoint demo

    View full-size slide

  13. This is just a start.

    View full-size slide

  14. Resources!
    • getsource.net/2014/01/heartbeat-api-wordcamp-phoenix/
    • gist.github.com/getsource/6254495
    • core.trac.wordpress.org/browser/tags/3.9/src/wp-includes/js/heartbeat.js
    • pippinsplugins.com/using-the-wordpress-heartbeat-api/
    Mike Schroder (DH-Shredder)
    @GetSource - http://www.getsource.net

    View full-size slide