WordPress Heartbeat API y admin-ajax.php

Desde el 1 de Agosto de 2013 con la versión 3.6 a WordPress se le incorporó un corazón, se conoce como la HeartBeat API, o al menos un sistema que de «latidos» que mandan sangre o información a todos aquellos sitios de WordPress donde se requiere… y tras esta introducción tan médica, empezaré a explicarme un poco más.

La documentación del Codex es bastante pobre al respecto así que para encontrar algo más detallado hay que buscar en las tripas del código del gestor de contenidos, así tenemos la API en el fichero heartbeat.js dentro de wp-includes.

Esta API en su cabecera nos indica lo siguiente:

/**
 * Heartbeat API
 *
 * Heartbeat is a simple server polling API that sends XHR requests to
 * the server every 15 - 60 seconds and triggers events (or callbacks) upon
 * receiving data. Currently these 'ticks' handle transports for post locking,
 * login-expiration warnings, autosave, and related tasks while a user is logged in.
 *
 * Available PHP filters (in ajax-actions.php):
 * - heartbeat_received
 * - heartbeat_send
 * - heartbeat_tick
 * - heartbeat_nopriv_received
 * - heartbeat_nopriv_send
 * - heartbeat_nopriv_tick
 * @see wp_ajax_nopriv_heartbeat(), wp_ajax_heartbeat()
 *
 * Custom jQuery events:
 * - heartbeat-send
 * - heartbeat-tick
 * - heartbeat-error
 * - heartbeat-connection-lost
 * - heartbeat-connection-restored
 * - heartbeat-nonces-expired
 *
 * @since 3.6.0
 */

Para que nos entendamos:

Heartbeat es una API que envía peticiones XMLHttpRequest al servidor cada 15 – 60 segundos y lanza eventos con datos recibidos. Actualmente se gestiona el post locking, los avisos de expiración de sesion, autoguardados y tareas relacionadas cuando el usuario está logeado.

Con esto vemos que es el JavaScript junto con una serie de filtros ubicados en ajax-actions.php los encargados de gestionar esos mensajes que vemos en el Escritorio de WordPress cuando alguien está editando un post y nos indica quién, o la ejecución de cuando nuestras entradas se guardan automáticamente.

Algunos plugins también lo utilizan en la parte pública de la web, por ejemplo algunos plugins de distribución de contenido en redes sociales para obtener la cantidad de veces que ha sido una entrada compartida. Este caso en concreto me dio dolores de cabeza y luego explicaré por qué.

Un ejemplo de WordPress Heartbeat API

Os invito a mirar esta entrada en la que hablé del Customizer de WordPress y Genesis, usando HeartBeat API de WordPress vamos a mostrar en tiempo real los cambios en las coordenadas de la empresa en la consola de JavaScript de Chrome.

El proceso va a constar básicamente de 3 pasos:

  1. Código del lado del servidor donde mandamos al lado del navegador la información.
  2. Código del lado del navegador que se encarga de modificar con JavaScript el contenido.
  3. Enlace de ambos.

En el primer paso en functions.php debemos crear el filtro adecuado y asociarlo a una función.

function jiac_datos_recibidos( $response, $data ) {
  
  // Vemos cual es la petición desd el navegador
  if ( 'dime_las_coordenadas' == $data['client'] ) {
  
    $coordenadas = array($get_option('latitud-empresa'),$get_option('longitud-empresa'));
    $response['server'] = $coordenadas;
  
  }
  return $response;
}

add_filter( 'heartbeat_received', 'jiac_datos_recibidos', 10, 2 );
add_filter( 'heartbeat_nopriv_received', 'jiac_datos_recibidos', 10, 2 );

Debemos crear ahora el fichero JavaScript y encolarlo en la parte pública de la web, lo he llamado cambia-coordenadas.js.

jQuery(document).ready(function() { 

  jQuery(document).on('heartbeat-send', function(e,data) { 
    data['client'] = 'dime_las_coordenadas';
  });
  
  jQuery(document).on('heartbeat-tick', function(e,data) { 
    console.log(data['server']);
  });
});

 

add_action('wp_enqueue_scripts', 'jiac_scripts');
function jiac_scripts() {
  wp_enqueue_script('heartbeat');
  wp_enqueue_script('dime-coordenadas', get_stylesheet_directory_uri() . '/cambia-coordenadas.js', array('heartbeat', 'jquery'), '1.0.0');
}
  
  
  
function jiac_datos_recibidos( $response, $data ) {
  
  // Vemos cual es la petición desd el navegador
  if ( 'dime_las_coordenadas' == $data['client'] ) {
  
    $coordenadas = array(get_option('latitud-empresa'),get_option('longitud-empresa'));
    $response['server'] = $coordenadas;
  
  }
  return $response;
}

Si vemos la consola de la herramienta para desarrolladores de Chrome vemos como cada minuto se han ido mostrando las coordenadas.

HeartBeat API Example 1

Pero cuando las cambiamos desde el Customizer de WordPress y esperamos hasta el siguiente tick es cuando sucede la magia.

coordenadas2

Pensad en las utilidades de este tipo acciones, podemos mostrar en tiempo real la disponibilidad en un sistema de reservas o podemos intercambiar entre la visualización de un video o una imagen en tiempo real, también se me ocurre en que podemos mostrar la cantidad de visitantes que están en un momento determinado en una URL de nuestra web de forma que podamos generar estrés para la venta.

Si bien es una cosa de la que no debemos abusar y ahora explicaré por qué.

Controlando o desactivando HeartBeat API de WordPress

Como bien decía es una herramienta de la que no debemos abusar porque hace uso de admin-ajax.php y una petición constante a este archivo hace que la CPU de nuestro servidor se dispare, imaginaos un sitio web con hasta 50 visitas concurrentes cada una haciendo peticiones ajax cada 15 segundos, podemos sobrecargar el servidor facilmente.

Sin ir más lejos fue algo que tuve que solucionar en un WordPress que iba extremadamente lento, al final di con la solución con este plugin:

HeartBeat Control

WordPress HeartBeat API Control Plugin

Nos permite desactivar la API en determinados lugares o en cualquiera y también regular el tiempo entre peticiones desde 15 hasta 60 segundos. Con esto seguro que si hay problemas de saturación del servidor por este motivo conseguís, si no solucionarlo, si reducir bastante el problema.

¿Y a vosotros, donde se os ocurre que se puede utilizar?

(Visited 384 times, 1 visits today)

You might also like

No Comments

    Leave a Reply

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.