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)

Transcript

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

11. EXPERIMENTAL WARNING!
    

    View Slide

12. EXPERIMENTAL WARNING!
    

    View Slide

13. No longer experimental as of
    WordPress 3.9
    

    View Slide

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

    View Slide

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

    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();
    wp_send_json($response);
    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