Heartbeat API at WordCamp Phoenix 2014

I recently had the chance to share about the Heartbeat API at WordCamp Phoenix 2014!

Thanks to the organizing team for the invitation — it was a blast!

Pippin Williamson was gracious enough to join me and share about his use of the Heartbeat API in a demo!

After the break, you’ll find slides and sample code used in the presentation for your perusal and use.

[edit] The Video of the presentation is now available!  Check it out below. [/edit]


Download slides as PDF

Code for example plugin:

Automatically updates comment counts on your dashboard every 15 seconds. Although it’s great for testing and demo purposes, for production, you might not need the increase in polling rate that’s included.

<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
/*
	Plugin Name: Heartbeat Comment Update
	Description: Updates Comment Count on Dashboard with Heartbeat.
	Author: Andrew Ozz, Mike Schroder
	Version: 0.2
	Author URI: http://www.getsource.net
*/

add_filter( 'heartbeat_received', 'wc_heartbeat_comment_count', 10, 3 );
function wc_heartbeat_comment_count( $response, $data, $screen_id ) {

	// Check if we are on the right screen and data is requested.
	if ( $screen_id == 'dashboard' &&
			isset( $data['wc-comment-heartbeat'] ) ) {

		// Grab our data
		$num_comments = wp_count_comments();

		// Add data in an unique array key -- prefix!
		$response['wc-comment-count'] = array(
			'comment-count' => number_format_i18n($num_comments->total_comments),
			'pending-count' => number_format_i18n($num_comments->moderated),
			'comment-mod-count' => number_format_i18n($num_comments->moderated),
			'spam-count' => number_format_i18n($num_comments->spam),
			'trash-count' => number_format_i18n($num_comments->trash),
		);
	}

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

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

	// Load this script only in the dashboard.
	if ( 'index.php' != $hook_suffix )
		return;

	// 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_comment_js', 20 );
}

function wc_heartbeat_comment_js() {
	?>
	<script>
	jQuery(document).ready( function($) {

		// Request comment count, using prefixed custom event.
		$(document).on( 'heartbeat-send.wp-comment-count', function( e, data ) {

			// For one-time send, use wp.heartbeat.enqueue( 'item', 'value' );
			data['wc-comment-heartbeat'] = 'count';

			// Speed up heartbeat for faster results.
			// Only has to be called every 2.5 minutes.
			window.wp.heartbeat.interval(15);

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

			// Replace all of the comment counts
			$.each( data['wc-comment-count'], function( key, value ) {
				var replaced = $( '.' + key ).html().replace(/(.*)\d+(.*)/g, "$1" + value + "$2");
				$( '.' + key ).html( replaced );
			});
		});

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

If you have any additional questions, feel free to comment below, and I’ll be happy to answer.

😃+

4 thoughts on “Heartbeat API at WordCamp Phoenix 2014”

Leave a Reply