Heartbeat + WP REST API at WordCamp NYC

Thanks to the organizers, volunteers, and everyone attending WordCamp NYC for a great event!

Below, you can find the slides and code for my talk on the Heartbeat API for WordPress.

.@GetSource, showing us how to make WordPress honk with the heartbeat API at #wcnyc pic.twitter.com/IwyRKZm4V2

— K. Adam White (@kadamwhite) August 3, 2014

In this presentation, I also included a sample for a custom WordPress API endpoint (hat/tip Ryan McCue) for causing the WordPress admin to honk via a GET request (which is decidedly unRESTful, but equal to the way the Tesla Model S API works). I then provided this URL to the audience prior to discussing the code for much hilarity.

So @GetSource made a custom endpoint with the Heartbeat API to honk a horn in his presentation at #wcnyc: http://t.co/llFoO3e3uR

— Brian Krogsgard (@Krogsgard) August 3, 2014

Luckily, @getsource used heartbeat #wcnyc pic.twitter.com/IkLAzj18cE

— Brent Shepherd (@thenbrent) August 3, 2014

https://twitter.com/alpha1beta/status/496018182571048960

The code’s after the break. But think twice about deploying it on a production server, since it allows others to annoy you with unauthenticated requests. The JSON REST API plugin is required prior to the JSON API’s introduction in WordPress Core itself.

You can download the slides in PDF, and see the slides inline from Speaker Deck below.

<?php
/*
	Plugin Name: Heartbeat Honk
	Description: Honks WordPress' Horn using Heartbeat
	Author: Mike Schroder, Ryan McCue
	Version: 0.1
	Author URI: https://www.getsource.net
*/

add_filter( 'json_endpoints', function ( $routes ) {
	$routes[ '/honk_horn' ] = array(
		function () {
			$count = get_option( 'wc-heartbeat-honk', 0 );
			update_option( 'wc-heartbeat-honk', $count + 1 );
			return array( 'result' => true );
		},
		WP_JSON_Server::READABLE
	);
	return $routes;
} );

add_filter( 'heartbeat_received', 'wc_heartbeat_honk', 10, 3 );
function wc_heartbeat_honk( $response, $data, $screen_id ) {
	$do_honk = get_option('wc-heartbeat-honk', 0 );

	if ( $do_honk ) {
		// Add data in an unique array key -- prefix!
		$response['wc-heartbeat-honk'] = $do_honk;
	}

	delete_option('wc-heartbeat-honk');

	// If the above conditions aren't met,
	// we still pass along the existing $response.
	return $response;
	 
}

add_action( 'admin_enqueue_scripts', 'wc_heartbeat_honk_script_enqueue' );
function wc_heartbeat_honk_script_enqueue( $hook_suffix ) {

	// Make sure the JS part of the Heartbeat API is loaded.
	wp_enqueue_script( 'heartbeat' );

	// Output the JavaScript we need.
	add_action( 'admin_print_footer_scripts', 'wc_heartbeat_honk_js', 20 );
}

function wc_heartbeat_honk_js() {
	$honk_audio = plugins_url( "car-honk.mp3" , __FILE__ );
	?>
	<script>
	jQuery(document).ready( function($) {
		$(document).on( 'heartbeat-send.wp-heartbeat-honk', function( e, data ) {

			window.wp.heartbeat.interval(5);

		// Listen for the tick custom event.
		}).on( 'heartbeat-tick.wc-heartbeat-honk', function( e, data ) {
			// Double-check we have the data we're listening for
			if ( ! data['wc-heartbeat-honk'] ) {
				return;
			}

			var honk = new Audio('<?php echo $honk_audio; ?>');

			for ( var count = data['wc-heartbeat-honk']; count--; count > 0 ) {
				honk.play();
			}
		});

		// Initial connection to cement our new interval timing
		window.wp.heartbeat.connectNow();
	});
	</script>
	<?php
}