Heartbeat API
Jaroslav Polakovič
WordPress Engineer, XWP.co
WordCamp 2015, Praha
Web s Heartbeat API
Web bez Heartbeat API
CO TO TEDA DĚLÁ?
Heartbeat
Heartbeat
Heartbeat
Heartbeat
Čekání: 60 sekund
AJAX požadavek na server
Odezva serveru (tick)
… á znovu!
Heartbeat
Čekání: 60 sekund
AJAX požadavek na server
Odezva serveru (tick)
… á znovu!
Pff, to už dávno umím!
Heartbeat
Čekání: 60 sekund
AJAX požadavek na server
Odezva serveru (tick)
… á znovu!
A na tomhle nic není!
Heartbeat ver 0.001alpha
setInterval( function() {� jQuery.get( ajaxURL, function( data ) {� console.log( data );� }�}, 60000 );��// Hotovo, ne?
Ale co když… ?
Co když chci na server posílat data z různých míst v mém JavaScriptovém kódu?
Ale co když… ?
Co když chci na server posílat data z různých míst v mém JavaScriptovém kódu?
Prostě to zapouzdřím!
A použiju metodu POST.
Ale co když… ?
Co když chci na serveru mít možnost měnit data, která se odesílají v odpovědi?
Ale co když… ?
Co když chci na serveru mít možnost měnit data, která se odesílají v odpovědi?
Prostě použiju filtry!
add_filter()
apply_filters()
Ale co když… ?
Co když je server pomalý a ještě nedoručil odpověď na předchozí požadavek?
Ale co když… ?
Co když je server pomalý a ještě nedoručil odpověď na předchozí požadavek?
Prostě počkám!
Ale co když… ?
Co když server spadne nebo vrátí nějakou jinou divnou chybu?
Ale co když… ?
Co když server spadne nebo vrátí nějakou jinou divnou chybu?
Prostě to ošetřím!
Ale co když… ?
Co když chci posílat míň požadavků na server, když uživatel stránku zrovna nepoužívá?
Ale co když… ?
Co když chci posílat míň požadavků na server, když uživatel stránku zrovna nepoužívá?
Prostě použiju Page Visibility API!
Ale co když… ?
Co když chci posílat míň požadavků na server, když uživatel stránku zrovna nepoužívá?
Prostě použiju Page Visibility API!
(a v hloupých prohlížečích budu hlídat události keyUp a mouseOver)
Ale co když… ?
Co když chci posílat míň požadavků na server, když uživatel stránku zrovna nepoužívá?
Prostě použiju Page Visibility API!
(a v hloupých prohlížečích budu hlídat události keyUp a mouseOver)
(a vlastně teda ještě touchEnd)
Ale co když… ?
Co když chci posílat míň požadavků na server, když uživatel stránku zrovna nepoužívá?
Prostě použiju Page Visibility API!
(a v hloupých prohlížečích budu hlídat události keyUp a mouseOver)
(a vlastně teda ještě touchEnd)
(jo, a ještě si musím dát pozor na framy)
Ugh...
Heartbeat API
pořád Jaroslav Polakovič
pořád WordPress Engineer, XWP.co
pořád WordCamp 2015, Praha
Heartbeat API
Klient -> Server
data[wp-refresh-post-lock][post_id]: 23
data[wp-refresh-post-lock][lock]: 1425030300:2
interval: 15
_nonce: 5df8699121
action: heartbeat
screen_id: post
has_focus: false
Server -> Klient
{
"wp-refresh-post-lock": {
"new_lock": "1425030315:2"
},
"wp-auth-check": true,
"server_time": 1425030315
}
NÁKUPNÍ SEZNAMY
Psst, tajný tip…
/wp-includes/js/heartbeat.js
/wp-admin/includes/ajax-actions.php
+
https://developer.wordpress.org/reference/
NÁKUPNÍ SEZNAMY
Psst, tajný tip…
/wp-includes/js/heartbeat.js
/wp-admin/includes/ajax-actions.php
+
https://developer.wordpress.org/reference/
Heartbeat API - PHP
Jak vlastně Heartbeat do stránky dostanu?
// Buď...�wp_enqueue_script('heartbeat');��// Anebo�wp_enqueue_script(� 'muj-skript',� get_template_directory_uri() . '/js/muj_skript.js',� array('heartbeat')�);
Heartbeat API - PHP
V reálu je to jenom o málo složitější:
// Kdekoli ve functions.php�function load_heartbeat() {� if ( is_single() ) {� wp_enqueue_script( 'heartbeat' );� } �}�add_action( 'wp_enqueue_scripts', 'load_heartbeat' );
Heartbeat API - PHP
Heartbeat API exponuje 3 (sic!) filtry a 1 (sic!) akci:
// filtry�heartbeat_settings
heartbeat_received, heartbeat_nopriv_received�heartbeat_send, heartbeat_nopriv_send��// akce�heartbeat_tick, heartbeat_nopriv_tick
Heartbeat API - PHP
Změna výchozího nastavení pomocí filtru:
// Kdekoli ve functions.php�function my_heartbeat_settings( $settings ) {� $settings['interval'] = 15;� if ( is_front_page() ) {� $settings['screenId'] = 'homepage';� }� return $settings;�}�add_filter('heartbeat_settings', 'my_heartbeat_settings');
Heartbeat API - PHP
Odpověď na podnět z klienta:
// Kdekoli ve functions.php�function my_response( $response, $data, $screen_id ) {� if ( $screen_id === 'homepage' && isset( $data['pozdrav'] ) ) {� $response['ahoj'] = 'svete';� }� return $response;�}�add_filter( 'heartbeat_received', 'my_response', 10, 3 );
add_filter( 'heartbeat_nopriv_received', 'my_response', 10, 3 );
Heartbeat API - JavaScript
Veřejné metody objektu wp.heartbeat:
function connectNow() {};�function dequeue( handle ) {};�function disableSuspend() {};�function enqueue( handle, data, noOverwrite ) {};�function getQueuedItem( handle ) {};�function hasConnectionError() {};�function hasFocus() {};�function interval( speed, ticks ) {};�function isQueued( handle ) {};
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
wp.heartbeat.enqueue(� 'wordcamp-2015',� {� 'zprava': 'Už se těším na oběd.',� },� false�);
Heartbeat API - JavaScript
Události, které wp.heartbeat emituje:
heartbeat-send [heartbeatData]
heartbeat-tick [response, textStatus, jqXHR]
heartbeat-error [jqXHR, textStatus, error]
heartbeat-connection-lost [error, status]
heartbeat-connection-restored
heartbeat-nonces-expired
Heartbeat API - JavaScript
wp.heartbeat.enqueue('pro_server', 'ABC'); ��jQuery(document).on('heartbeat-send', function(e, data) {� data['pro_server'] = 'XYZ';�});
PŘÍKLAD
PŘÍKLAD
s (velmi podstatnou) chybou…
Počet nových příspěvků
Mám web s vtipnými obrázky a na hlavní stránce chci uživatelům ukázat, kolik nových obrázků přibylo od chvíle, kdy naposledy obnovili stránku.
functions.php 1/2
function load_newposts_script() {� if ( is_front_page() ) {� wp_enqueue_script(� 'newposts',� get_template_directory_uri() . '/js/newposts.js',� array( 'heartbeat' )� );� }�}�add_action( 'wp_enqueue_scripts', 'load_newposts_script' );
newposts.js 1/2
var timestamp = Math.floor( Date.now() / 1000 );��jQuery(document).on('heartbeat-send', function(e, data) {� data['newposts'] = { newposts_from : timestamp };�});
functions.php 2/2
function np_handler( $response, $data, $screen_id ) {� if ( isset( $data['newposts']['newposts_from'] ) ) {� // WP_Query -> $new_posts_count, $last_post_timestamp� if ( $new_posts_count > 0 ) {� $response['newposts'] = array(� 'count' => $new_posts_count,� 'timestamp' => $last_post_timestamp,� );� }� }� return $response;�}�add_filter( 'heartbeat_received', 'np_handler', 10, 3 );�add_filter( 'heartbeat_nopriv_received', 'np_handler', 10, 3 );
newposts.js 2/2
var timestamp = Math.floor( Date.now() / 1000 );��jQuery(document).on('heartbeat-send', function(e, data) {� data['newposts'] = { newposts_from : timestamp };�});
�jQuery(document).on('heartbeat-tick', function(e, response) {� if ( response.newposts ) {� newPostsCount = response.newposts.count;� timestamp = response.newposts.timestamp;�� // Nějak zobrazíme newPostsCount� }�});
KDE BYLA CHYBA?
Výkon je všechno
HEARTBEAT
NA
FRONTENDU?
Opatrně
Opatrně
Opatrně
Opatrně
RYCHLÉ OPÁČKO
Rychlé opáčko
TOŤ VŠE
(pun intended)
Chcete se na něco zeptat?