Advertisement
  1. Code
  2. Creative Coding

La API Heartbeat: usar Heartbeat en un plugin

Scroll to top
Read Time: 7 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial vamos a crear un sencillo plugin que utiliza la API Heartbeat. Nuestro plugin alertará a los usuarios que hayan iniciado sesión, a través de una notificación similar a un gruñido, cada vez que otro usuario inicie o cierre sesión en el sitio.

Dado que este tutorial se centra en la API Heartbeat, dejaré fuera los detalles sobre la creación de la cabecera del plugin o la estructura de sus archivos: el plugin es muy simple, y puedes examinar el código fuente en su totalidad en este repositorio de GitHub.

Se considerará que un usuario ha "iniciado sesión" cuando haya iniciado sesión y haya estado activo durante las últimas 24 horas. Si un usuario cierra sesión o no está activo durante 24 horas, se considerará que está sin conexión. Controlaremos el estado "online" del usuario y la marca de tiempo "por última vez activo" para ayudar a determinar quién está online actualmente.


Inicio de sesión y cierre de sesión

Primero crearemos un par de funciones enganchadas a los ganchos wp_login y wp_logout. Estos se desencadenan cuando un usuario inicia o cierra sesión en WordPress. Cuando un usuario inicie sesión, actualizaremos su estado de inicio de sesión (almacenado como meta de usuario) a 'true' y actualizaremos su última marca de tiempo activo.

Del mismo modo, cuando un usuario cierre sesión, actualizaremos su estado online a false:


¿Quién está online?

Ahora vamos a crear una función que devuelve una matriz de nombres de usuario con los usuarios activos, indexados por su id. Usaremos la función get_users() para consultar todos los usuarios que hanyan estado activos en las últimas 24 horas (usando la clave meta whoisonline_last_active).

A continuación, descartaremos a los usuarios que hayan iniciado sesión comprobando los meta datos de usuario whoisonline_is_online.


Preparación para la API Heartbeat

Antes de tratar con la parte del lado cliente de la API de Heaertbeat, tratemos con la respuesta del servidor a una consulta de "quién está online". Como se cubrió en la parte 1 de esta serie, engancharemos al filtro heartbeat_received (no necesitamos desencadenar esto para los usuarios que hayan iniciado sesión, por lo que no usaremos el filtro heartbeat_nopriv_received).

En primer lugar, actualizaremos la marca de tiempo de actividad del usuario actual y nos aseguraremos de que su estado esté establecido en 'online'. A continuación comprobaremos que se haya realizado una solicitud de datos de "quién está online" buscando la clave who-is-online (que usaremos más adelante) en los $data recibidos.

Si lo ha hecho, responderemos con una matriz de usuarios que hayan iniciado sesión en el formulario:

Según lo devuelto por who_is_online().


Heartbeat API

Ahora crea el archivo JavaScript who-is-online.js en la raíz de la carpeta de tu plugin. A continuación se muestra el esquema del archivo.

En primer lugar, iniciamos nuestra variable global whoisonline. whoisonline.online y whoisonline.onlinePrev son tanto 'matrices asociativas' (estrictamente hablando, en términos de JavaScript, son objetos) de los inicios de sesión de los usuarios, indexados por id, que se corresponden con aquellos usuarios que están online durante el actual o el anterior "latido". Esto se utiliza para determinar cuándo ha iniciado o cerrado sesión un usuario.

A continuación, iniciamos nuestra solicitud de datos sobre quién está online con wp.heartbeat.enqueue y escuchamos la respuesta enlazando una devolución de llamada al evento heartbeat-tick.whoisonline. En esa devolución de llamada comprobamos si hay datos devueltos por el servidor, realizamos las acciones necesarias y, a continuación, nos aseguramos de que nuestra solicitud de datos esté en cola para el siguiente paso.

Ahora, vamos a rellenar los detalles de la lógica dentro de nuestra devolución de llamada heartbeat-tick.whoisonline. Cada vez que se reciben datos del servidor, primero comprobamos que contengan una matriz de usuarios que hayan iniciado sesión (que sería dada por la clave 'whoisonline'), al comprobar data.hasOwnProperty( 'whoisonline'). Si es así...

  • Actualiza whoisonline.onlinePrev para reflejar quién estuvo online durante el último latido, y whoisonline.online para reflejar quién está online durante el latido actual.
  • Comprueba si hay ID de usuario que aparezcan en whoisonline.online, pero que no estén en whoisonline.onlinePrev. Estos usuarios acaban de iniciar sesión.
  • Comprueba si hay ID de usuario que aparecen en whoisonline.onlinePrev, pero no están en whoisonline.online. Estos usuarios acaban de cerrar sesión.

Después, el archivo JavaScript terminado tiene el siguiente aspecto:


Cargar nuestros scripts y estilos

Este plugin hará uso del complemento jQuery Notice de Tim Benniks, un ligero plugin de notificación similar a un gruñido para jQuery. Simplemente descárgalo y extráelo en la raíz de tu plugin (debe consistir en únicamente dos archivos: jquery.notice.js y jquery.notice.css)

Ahora que se ha añadido el plugin jQuery, la última pieza del rompecabezas es poner en cola los scripts y estilos necesarios. Queremos que este plugin funcione tanto en el front-end como en el lado administrativo, por lo que usaremos tanto el gancho admin_enqueue_scripts como wp_enqueue_scripts, pero solo queremos cargar el script para los usuarios que hayan iniciado sesión.

Y este es el plugin finalizado.

Puedes ver el código completo en este repositorio de GitHub. Aquí existe mucho margen de mejora (por ejemplo, mostrar una lista de usuarios, y cuándo estuvieron activos por última vez), pero esperamos que este plugin relativamente simple haya demostrado cómo funciona la API heartbeat.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.