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

More Decks by Mike Schroder

Other Decks in Technology


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

    View 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 Slide

  3. WAT is Heartbeat API?

    View Slide

  4. Realtime* Bidirectional
    communication via AJAX.

    View Slide

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

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide


    View Slide


    View Slide

  13. No longer experimental as of
    WordPress 3.9

    View Slide

  14. JS Trigger Flow
    -> heartbeat-send
    -> heartbeat-tick
    -/> heartbeat-error

    View Slide

  15. PHP Filter/Action Flow
    -> heartbeat_received
    -> heartbeat_send
    -> heartbeat_tick (action)

    View Slide

  16. 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();
    Direct from core.

    View Slide

  17. View Slide

  18. wp-json/honk_horn
    custom REST endpoint demo

    View Slide

  19. View Slide

  20. This is just a start.

    View Slide

  21. 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 Slide