Download - WordPress heartbeat API w praktyce

Transcript
Page 1: WordPress heartbeat API w praktyce

WP HEARTBEAT API W PRAKTYCE

Maciej Kuchnik indelso.pl

Page 2: WordPress heartbeat API w praktyce

HEARTBEAT API?

Dwukierunkowa komunikacja przeglądarka - serwer w „czasie rzeczywistym”

!

W WordPress od wersji 3.6

Page 3: WordPress heartbeat API w praktyce

JAK TO DZIAŁA?XHR (XMLHttpRequest)

JS Event - heartbeat-send - heartbeat-tick - heartbeat-error - heartbeat-connection-lost - heartbeat-connection-restored - heartbeat-nonces-expired

WP Filter - heartbeat_received - heartbeat_send - heartbeat_nopriv_received - heartbeat_nopriv_send

WP Action - heartbeat_tick - heartbeat_nopriv_tick

co X

sekund

Page 4: WordPress heartbeat API w praktyce

HEARTBEAT JS

• wp.heartbeat.enqueue()

• wp.heartbeat.dequeue()

• wp.heartbeat.isQueued()

• wp.heartbeat.hasFocus()

• wp.heartbeat.disableSuspend()

• wp.heartbeat.interval()

Page 5: WordPress heartbeat API w praktyce

HEARTBEAT JS EVENTS

• heartbeat-send

• heartbeat-tick

• heartbeat-error

• heartbeat-connection-lost

• heartbeat-connection-restored

• heartbeat-nonces-expired

Page 6: WordPress heartbeat API w praktyce

HEARTBEAT PHPdla zalogowanych

filtry

• heartbeat_received

• heartbeat_send

akcja

• heartbeat_tick

dla niezalogowanych

filtry

• heartbeat_nopriv_received

• heartbeat_nopriv_send

akcja

• heartbeat_nopriv_tick

Page 7: WordPress heartbeat API w praktyce

wp.heartbeat.enqueue(id1, data, overwrite);

wp.heartbeat.enqueue(id2 data, overwrite);

wp.heartbeat.enqueue(id3 data, overwrite);

KOLEJKA

id1 !

id2 !

id3

heartbeat-sendXHR

Page 8: WordPress heartbeat API w praktyce

XHRif ( !empty($_POST['data']) )

apply_filters( 'heartbeat_received', $response, $data, $screen_id );

apply_filters( 'heartbeat_send', $response, $screen_id );

do_action( 'heartbeat_tick', $response, $screen_id );

$response['server_time'] = time(); wp_send_json($response);

Page 9: WordPress heartbeat API w praktyce

jQuery(document).on( 'heartbeat-tick.id2', function( e, data ) { //do something });

jQuery(document).on('heartbeat-error', function(e, jqXHR, textStatus, error) { console.log('ERROR'); console.log(textStatus); console.log(error); });

Page 10: WordPress heartbeat API w praktyce

INTERWAŁwp.heartbeat.interval(speed, ticks);

speed = ‚fast’ / 5 ; 15 ; 30 ; 60 ; 'long-polling' ticks (domyślnie 30) - tylko przy speed=5 - liczba requestów po których speed wraca do normalnej wartości

apply_filters( 'heartbeat_settings', array() )

JS

PHP

Page 11: WordPress heartbeat API w praktyce

PRZYKŁAD

Page 12: WordPress heartbeat API w praktyce

HEARTBEAT W WP-ADMIN

Page 13: WordPress heartbeat API w praktyce

HEARTBEAT W WP-ADMIN

Page 14: WordPress heartbeat API w praktyce

HEARTBEAT W WP-ADMIN

Page 15: WordPress heartbeat API w praktyce

PRZYKŁAD NA FRONCIE

Page 16: WordPress heartbeat API w praktyce

IMPLEMENTACJA

Page 17: WordPress heartbeat API w praktyce

IMPLEMENTACJA

Page 18: WordPress heartbeat API w praktyce

IMPLEMENTACJA

Page 19: WordPress heartbeat API w praktyce

IMPLEMENTACJA

Page 20: WordPress heartbeat API w praktyce

IMPLEMENTACJA

Page 21: WordPress heartbeat API w praktyce

PYTANIA?

Page 22: WordPress heartbeat API w praktyce

DZIĘKUJĘ!

Maciej Kuchnik [email protected]

facebook.com/maciekkuchnik