What You Can Do With the Heartbeat API

By Tabby Chapman

@tabbymarie

http://www.tabbychapman.com

1

About Tabby Chapman@tabbymarie

https://github.com/tabbymarie

2

Github Public Contributions

3

Github Private ContributionsLike, I totally do stuff.

4

About Me

• Work for the University of California, Irvine

• Computer Scientist

• Developer Evangelist

• Education Junkie

5

About Me

• WordPress Skillz– Reaching my 10th anniversary developing

with WordPress (waiting for the party hat)– Started with 2.0.5, building a custom theme.– Now, I build highly specialized custom themes

and plugins for UCI as well as freelance clients.

6

About Me

• Born in Texas

• Moved 76 times (2 countries, 6 states)

• I have over 130 cousins and second cousins.

• Pink is my favorite color.

• Owls are my favorite animals.

7

About This Presentation

• Geared towards beginner to intermediate folks

• Assumptions:– You know what WordPress is.– You know what PHP, XML, JSON are.– You’re not afraid to look these things up later

or ask questions.

8

WP Heart What?

• WP Heartbeat API

• Bi-Directional Communication between browser and server… without the user ever having to trigger an event.

• Using XHR, WP Heartbeat sends ‘ticks’ every 15 seconds by default

9

API Information

• An API (Application Programmer Interface) is a set of methods designed to share information between systems.

• Usually uses SOAP (Simple Object Access protocol) or REST (Representational State Transfer) services.– Many cases send data via XML or JSON.

10

API Information

• WP Heartbeat API users:– XMLHttpRequest (XHR) to communicate from

Browser to Server– REST to send reponse from Server to

Browser

11

What Happens During a Beat?

• Browser sends a communication to server via XHR request. This request can contain information about the user, browser, or behavior.

• Server receives the information and may or may not do anything with it.

• Server hands a response back to Browser.

12

When does this happen?

• By default, every 15 seconds when logged into the admin panel.

• Can be modified with “fast,” “medium,” or “slow” values.

• Happens at this interval only when the page is targeted.

• Once untargeted or idle, the tick slows down.

• After idle for 1 hour, the tick is expired.13

Is there a downside?

• In the beginning there were some performance issues on some sites

• Some hosts disabled sites for too much usage

• WordPress 4.1 released fixes that expanded max heartbeat tick to 120 seconds and completely expires after an hour.

14

Where is it implemented?

• Initially, WP Heartbeat is implemented in the administrative panel.– Allows notification of users viewing or editing

posts simultaneously– Locks posts that are being edited– Creates Auto-save triggers for post editing.– Notifies user of session expiration (logout)

15

Can it be disabled?

• There are plugins available to control your Heartbeat Ticks.

16

What’s Under the Hood

• Filters– heartbeat_nopriv_send

– heartbeat_nopriv_receive– heartbeat_send– heartbeat_receive– heartbeat_settings

• Actions– heartbeat_nopriv_tick– heartbeat_tick

17

What’s Under the Hood

• heartbeat_settings filter you can modify– Interval (15 – 60 seconds)

• This overrides the default interval

– Autostart (false)• This disables autostart

18

How do I use it?

• Download and install https://github.com/jeffikus/pulse

• Or create your own plugin

• Use the console in your browser to view logged data

• Modify the pulse plugin to meet your needs.

19

Overview of Pulse

20

Overview of Pulse

21

Overview of Pulse

22

Overview of Pulse

23

Overview of Pulse

24

Overview of Pulse

25

Overview of Pulse

26

Demo

27

https://github.com/tabbymarie/hb-path

What are some uses for this?

• Alerting users of new content posted

• Letting a user know when a friend has signed on.

• Creating a means of real-time-ish private messaging

• Dynamically updating widgets/sidebars (i.e. various advertisements)

• Editors can change content mid-read.

28

Resources

• https://github.com/jeffikus/pulse

• https://github.com/tabbymarie/pulse

• https://github.com/tabbymarie/hb-path

• https://pippinsplugins.com/using-the-wordpress-heartbeat-api/

• http://code.tutsplus.com/tutorials/the-heartbeat-api-getting-started--wp-32446

• https://developer.wordpress.org/reference/hooks/heartbeat_settings/

29