Exempel på hur du med hjälp av Heartbeat API kan få din postlista att uppdateras i realtid när nya poster publiceras

blog-heartbeat-autoreload.php

<?php
function wg_add_new_posts_to_heartbeat_response( $response, $data )
{
	if ( ! isset( $data['wg-posts-autoreload'] ) )
		return $response; // No client of ours has requested new posts

	$posts = wg_get_posts_since_timestamp( $data['wg-posts-autoreload'] );

	if ( count( $posts ) === 0 )
		return $response; // There were no new posts

	$new_posts_response = array();
	foreach ( $posts as $post )
	{
		// This is the data being sent back to the client.
		// The following code needs to be updated, along with the
		// JavaScript receiving it, to match your theme's post list data.
		$new_posts_response[] = array(
			'title'      => apply_filters( 'the_title', $post->post_title ),
			'content'    => apply_filters( 'the_content', $post->post_content ),
			'date'       => get_the_time( 'Y-m-d H:i:s', $post->ID ),
			'permalink'  => get_permalink( $post->ID ),
		);
	}

	// Return our data
	$response['wg-posts-autoreload'] = $new_posts_response;

	return $response;
}
add_filter( 'heartbeat_received', 'wg_add_new_posts_to_heartbeat_response', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'wg_add_new_posts_to_heartbeat_response', 10, 2 );

function wg_get_posts_since_timestamp( $timestamp )
{
	// Filter the query to only grab posts newer than the specified date
	$since_date = create_function( '$where', 'return $where .= " AND post_date > \'' . $timestamp . '\'";' );

	add_filter( 'posts_where', $since_date );
	$posts = get_posts( array( 'suppress_filters' => false ) );
	remove_filter( 'posts_where', $since_date );

	return $posts;
}

blog-heartbeat-enqueue.php

<?php
function wg_enqueue_autoreload_js()
{
	wp_enqueue_script(
		'wg-posts-autoreload',
		get_template_directory_uri() . '/js/wg-posts-autoreload.js',
		array( 'heartbeat', 'jquery' ),
		false,
		true
	);

	$timestamp = date( 'Y-m-d H:i:s' );
	wp_localize_script(
		'wg-posts-autoreload',
		'WG_Posts_Autoreload',
		array( 'latest-time' => $timestamp )
	);
}
add_action( 'wp_enqueue_scripts', 'wg_enqueue_autoreload_js' );

blog-heartbeat-get-posts-since-timestamp.php

<?php
function wg_get_posts_since_timestamp( $timestamp )
{
	// Filter the query to only grab posts newer than the specified date
	$since_date = create_function( '$where', 'return $where .= " AND post_date > \'' . $timestamp . '\'";' );

	add_filter( 'posts_where', $since_date );
	$posts = get_posts( array( 'suppress_filters' => false ) );
	remove_filter( 'posts_where', $since_date );

	return $posts;
}

blog-heartbeat-js-receive-answer.js

!function ($, doc, latest_timestamp)
{
	$(doc).ready(function ()
	{
		// [...] (Send timestamp)


		// Receive the heartbeat response if there was any
		$(doc).on('heartbeat-tick.wg-posts-autoreload', function(event, data)
		{
			if (!data.hasOwnProperty('wg-posts-autoreload'))
				return;

			// OK, we got posts back. Let's add them to the list.
			$.each(data['wg-posts-autoreload'], function (index, post)
			{
				// This code is quite dumb.
				// This is where you create a new post DOM element
				// and inject it into your post list
				$('<article />')
					.append($('<h1 />').html(post['title']))
					.append(post['content'])
					.hide()
					.prependTo($('#posts'))
					.slideDown();

				// Update the variable that we send to the server
				latest_timestamp = post['date'];
			});
		});
	});
}(jQuery, document, WG_Posts_Autoreload['latest-time']);

blog-heartbeat-js-send-timestamp.js

!function ($, doc, latest_timestamp)
{
	$(doc).ready(function ()
	{
		// Set the interval to 5 secs, for debugging
		wp.heartbeat.interval('fast');

		// On every heartbeat, send the date for when our
		// latest post was published
		$(doc).on('heartbeat-send', function(e, data)
		{
			data['wg-posts-autoreload'] = latest_timestamp;
		});

		// [...]
	});
}(jQuery, document, WG_Posts_Autoreload['latest-time']);

functions.php

<?php

function wg_enqueue_autoreload_js()
{
	wp_enqueue_script(
		'wg-posts-autoreload',
		get_template_directory_uri() . '/js/wg-posts-autoreload.js',
		array( 'heartbeat', 'jquery' ),
		false,
		true
	);

	$timestamp = date( 'Y-m-d H:i:s' );
	wp_localize_script(
		'wg-posts-autoreload',
		'WG_Posts_Autoreload',
		array( 'latest-time' => $timestamp )
	);
}
add_action( 'wp_enqueue_scripts', 'wg_enqueue_autoreload_js' );



function wg_add_new_posts_to_heartbeat_response( $response, $data )
{
	if ( ! isset( $data['wg-posts-autoreload'] ) )
		return $response; // No client of ours has requested new posts

	$posts = wg_get_posts_since_timestamp( $data['wg-posts-autoreload'] );

	if ( count( $posts ) === 0 )
		return $response; // There were no new posts

	$new_posts_response = array();
	foreach ( $posts as $post )
	{
		// This is the data being sent back to the client.
		// The following code needs to be updated, along with the
		// JavaScript receiving it, to match your theme's post list data.
		$new_posts_response[] = array(
			'title'      => apply_filters( 'the_title', $post->post_title ),
			'content'    => apply_filters( 'the_content', $post->post_content ),
			'date'       => get_the_time( 'Y-m-d H:i:s', $post->ID ),
			'permalink'  => get_permalink( $post->ID ),
		);
	}

	// Return our data
	$response['wg-posts-autoreload'] = $new_posts_response;

	return $response;
}
add_filter( 'heartbeat_received', 'wg_add_new_posts_to_heartbeat_response', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'wg_add_new_posts_to_heartbeat_response', 10, 2 );

function wg_get_posts_since_timestamp( $timestamp )
{
	// Filter the query to only grab posts newer than the specified date
	$since_date = create_function( '$where', 'return $where .= " AND post_date > \'' . $timestamp . '\'";' );

	add_filter( 'posts_where', $since_date );
	$posts = get_posts( array( 'suppress_filters' => false ) );
	remove_filter( 'posts_where', $since_date );

	return $posts;
}

wg-posts-autoreload.js

!function ($, doc, latest_timestamp)
{
	$(doc).ready(function ()
	{
		// Set the interval to 5 secs, for debugging
		wp.heartbeat.interval('fast');

		// On every heartbeat, send the date for when our
		// latest post was published
		$(doc).on('heartbeat-send', function(e, data)
		{
			data['wg-posts-autoreload'] = latest_timestamp;
		});

		// Receive the heartbeat response if there was any
		$(doc).on('heartbeat-tick.wg-posts-autoreload', function(event, data)
		{
			if (!data.hasOwnProperty('wg-posts-autoreload'))
				return;

			// OK, we got posts back. Let's add them to the list.
			$.each(data['wg-posts-autoreload'], function (index, post)
			{
				// This code is quite dumb.
				// This is where you create a new post DOM element
				// and inject it into your post list
				$('<article />')
					.append($('<h1 />').html(post['title']))
					.append(post['content'])
					.hide()
					.prependTo($('#posts'))
					.slideDown();

				// Update the variable that we send to the server
				latest_timestamp = post['date'];
			});
		});
	});
}(jQuery, document, WG_Posts_Autoreload['latest-time']);