0
|
1 |
/** |
|
2 |
* Heartbeat API |
|
3 |
* |
|
4 |
* Note: this API is "experimental" meaning it will likely change a lot |
|
5 |
* in the next few releases based on feedback from 3.6.0. If you intend |
|
6 |
* to use it, please follow the development closely. |
|
7 |
* |
|
8 |
* Heartbeat is a simple server polling API that sends XHR requests to |
|
9 |
* the server every 15 seconds and triggers events (or callbacks) upon |
|
10 |
* receiving data. Currently these 'ticks' handle transports for post locking, |
|
11 |
* login-expiration warnings, and related tasks while a user is logged in. |
|
12 |
* |
|
13 |
* Available filters in ajax-actions.php: |
|
14 |
* - heartbeat_received |
|
15 |
* - heartbeat_send |
|
16 |
* - heartbeat_tick |
|
17 |
* - heartbeat_nopriv_received |
|
18 |
* - heartbeat_nopriv_send |
|
19 |
* - heartbeat_nopriv_tick |
|
20 |
* @see wp_ajax_nopriv_heartbeat(), wp_ajax_heartbeat() |
|
21 |
* |
|
22 |
* @since 3.6.0 |
|
23 |
*/ |
|
24 |
|
|
25 |
// Ensure the global `wp` object exists. |
|
26 |
window.wp = window.wp || {}; |
|
27 |
|
|
28 |
(function($){ |
|
29 |
var Heartbeat = function() { |
|
30 |
var self = this, |
|
31 |
running, |
|
32 |
beat, |
|
33 |
screenId = typeof pagenow != 'undefined' ? pagenow : '', |
|
34 |
url = typeof ajaxurl != 'undefined' ? ajaxurl : '', |
|
35 |
settings, |
|
36 |
tick = 0, |
|
37 |
queue = {}, |
|
38 |
interval, |
|
39 |
connecting, |
|
40 |
countdown = 0, |
|
41 |
errorcount = 0, |
|
42 |
tempInterval, |
|
43 |
hasFocus = true, |
|
44 |
isUserActive, |
|
45 |
userActiveEvents, |
|
46 |
winBlurTimeout, |
|
47 |
frameBlurTimeout = -1, |
|
48 |
hasConnectionError = null; |
|
49 |
|
|
50 |
/** |
|
51 |
* Returns a boolean that's indicative of whether or not there is a connection error |
|
52 |
* |
|
53 |
* @returns boolean |
|
54 |
*/ |
|
55 |
this.hasConnectionError = function() { |
|
56 |
return !! hasConnectionError; |
|
57 |
}; |
|
58 |
|
|
59 |
if ( typeof( window.heartbeatSettings ) == 'object' ) { |
|
60 |
settings = $.extend( {}, window.heartbeatSettings ); |
|
61 |
|
|
62 |
// Add private vars |
|
63 |
url = settings.ajaxurl || url; |
|
64 |
delete settings.ajaxurl; |
|
65 |
delete settings.nonce; |
|
66 |
|
|
67 |
interval = settings.interval || 15; // default interval |
|
68 |
delete settings.interval; |
|
69 |
// The interval can be from 15 to 60 sec. and can be set temporarily to 5 sec. |
|
70 |
if ( interval < 15 ) |
|
71 |
interval = 15; |
|
72 |
else if ( interval > 60 ) |
|
73 |
interval = 60; |
|
74 |
|
|
75 |
interval = interval * 1000; |
|
76 |
|
|
77 |
// 'screenId' can be added from settings on the front-end where the JS global 'pagenow' is not set |
|
78 |
screenId = screenId || settings.screenId || 'front'; |
|
79 |
delete settings.screenId; |
|
80 |
|
|
81 |
// Add or overwrite public vars |
|
82 |
$.extend( this, settings ); |
|
83 |
} |
|
84 |
|
|
85 |
function time(s) { |
|
86 |
if ( s ) |
|
87 |
return parseInt( (new Date()).getTime() / 1000 ); |
|
88 |
|
|
89 |
return (new Date()).getTime(); |
|
90 |
} |
|
91 |
|
|
92 |
function isLocalFrame( frame ) { |
|
93 |
var origin, src = frame.src; |
|
94 |
|
|
95 |
if ( src && /^https?:\/\//.test( src ) ) { |
|
96 |
origin = window.location.origin ? window.location.origin : window.location.protocol + '//' + window.location.host; |
|
97 |
|
|
98 |
if ( src.indexOf( origin ) !== 0 ) |
|
99 |
return false; |
|
100 |
} |
|
101 |
|
|
102 |
try { |
|
103 |
if ( frame.contentWindow.document ) |
|
104 |
return true; |
|
105 |
} catch(e) {} |
|
106 |
|
|
107 |
return false; |
|
108 |
} |
|
109 |
|
|
110 |
// Set error state and fire an event on XHR errors or timeout |
|
111 |
function errorstate( error, status ) { |
|
112 |
var trigger; |
|
113 |
|
|
114 |
if ( error ) { |
|
115 |
switch ( error ) { |
|
116 |
case 'abort': |
|
117 |
// do nothing |
|
118 |
break; |
|
119 |
case 'timeout': |
|
120 |
// no response for 30 sec. |
|
121 |
trigger = true; |
|
122 |
break; |
|
123 |
case 'parsererror': |
|
124 |
case 'error': |
|
125 |
case 'empty': |
|
126 |
case 'unknown': |
|
127 |
errorcount++; |
|
128 |
|
|
129 |
if ( errorcount > 2 ) |
|
130 |
trigger = true; |
|
131 |
|
|
132 |
break; |
|
133 |
} |
|
134 |
|
|
135 |
if ( 503 == status && false === hasConnectionError ) { |
|
136 |
trigger = true; |
|
137 |
} |
|
138 |
|
|
139 |
if ( trigger && ! self.hasConnectionError() ) { |
|
140 |
hasConnectionError = true; |
|
141 |
$(document).trigger( 'heartbeat-connection-lost', [error, status] ); |
|
142 |
} |
|
143 |
} else if ( self.hasConnectionError() ) { |
|
144 |
errorcount = 0; |
|
145 |
hasConnectionError = false; |
|
146 |
$(document).trigger( 'heartbeat-connection-restored' ); |
|
147 |
} else if ( null === hasConnectionError ) { |
|
148 |
hasConnectionError = false; |
|
149 |
} |
|
150 |
} |
|
151 |
|
|
152 |
function connect() { |
|
153 |
var send = {}, data, i, empty = true, |
|
154 |
nonce = typeof window.heartbeatSettings == 'object' ? window.heartbeatSettings.nonce : ''; |
|
155 |
tick = time(); |
|
156 |
|
|
157 |
data = $.extend( {}, queue ); |
|
158 |
// Clear the data queue, anything added after this point will be send on the next tick |
|
159 |
queue = {}; |
|
160 |
|
|
161 |
$(document).trigger( 'heartbeat-send', [data] ); |
|
162 |
|
|
163 |
for ( i in data ) { |
|
164 |
if ( data.hasOwnProperty( i ) ) { |
|
165 |
empty = false; |
|
166 |
break; |
|
167 |
} |
|
168 |
} |
|
169 |
|
|
170 |
// If nothing to send (nothing is expecting a response), |
|
171 |
// schedule the next tick and bail |
|
172 |
if ( empty && ! self.hasConnectionError() ) { |
|
173 |
connecting = false; |
|
174 |
next(); |
|
175 |
return; |
|
176 |
} |
|
177 |
|
|
178 |
send.data = data; |
|
179 |
send.interval = interval / 1000; |
|
180 |
send._nonce = nonce; |
|
181 |
send.action = 'heartbeat'; |
|
182 |
send.screen_id = screenId; |
|
183 |
send.has_focus = hasFocus; |
|
184 |
|
|
185 |
connecting = true; |
|
186 |
self.xhr = $.ajax({ |
|
187 |
url: url, |
|
188 |
type: 'post', |
|
189 |
timeout: 30000, // throw an error if not completed after 30 sec. |
|
190 |
data: send, |
|
191 |
dataType: 'json' |
|
192 |
}).done( function( response, textStatus, jqXHR ) { |
|
193 |
var new_interval; |
|
194 |
|
|
195 |
if ( ! response ) |
|
196 |
return errorstate( 'empty' ); |
|
197 |
|
|
198 |
// Clear error state |
|
199 |
if ( self.hasConnectionError() ) |
|
200 |
errorstate(); |
|
201 |
|
|
202 |
if ( response.nonces_expired ) { |
|
203 |
$(document).trigger( 'heartbeat-nonces-expired' ); |
|
204 |
return; |
|
205 |
} |
|
206 |
|
|
207 |
// Change the interval from PHP |
|
208 |
if ( response.heartbeat_interval ) { |
|
209 |
new_interval = response.heartbeat_interval; |
|
210 |
delete response.heartbeat_interval; |
|
211 |
} |
|
212 |
|
|
213 |
self.tick( response, textStatus, jqXHR ); |
|
214 |
|
|
215 |
// do this last, can trigger the next XHR if connection time > 5 sec. and new_interval == 'fast' |
|
216 |
if ( new_interval ) |
|
217 |
self.interval.call( self, new_interval ); |
|
218 |
}).always( function() { |
|
219 |
connecting = false; |
|
220 |
next(); |
|
221 |
}).fail( function( jqXHR, textStatus, error ) { |
|
222 |
errorstate( textStatus || 'unknown', jqXHR.status ); |
|
223 |
self.error( jqXHR, textStatus, error ); |
|
224 |
}); |
|
225 |
} |
|
226 |
|
|
227 |
function next() { |
|
228 |
var delta = time() - tick, t = interval; |
|
229 |
|
|
230 |
if ( ! running ) |
|
231 |
return; |
|
232 |
|
|
233 |
if ( ! hasFocus ) { |
|
234 |
t = 100000; // 100 sec. Post locks expire after 120 sec. |
|
235 |
} else if ( countdown > 0 && tempInterval ) { |
|
236 |
t = tempInterval; |
|
237 |
countdown--; |
|
238 |
} |
|
239 |
|
|
240 |
window.clearTimeout(beat); |
|
241 |
|
|
242 |
if ( delta < t ) { |
|
243 |
beat = window.setTimeout( |
|
244 |
function(){ |
|
245 |
if ( running ) |
|
246 |
connect(); |
|
247 |
}, |
|
248 |
t - delta |
|
249 |
); |
|
250 |
} else { |
|
251 |
connect(); |
|
252 |
} |
|
253 |
} |
|
254 |
|
|
255 |
function blurred() { |
|
256 |
window.clearTimeout(winBlurTimeout); |
|
257 |
window.clearTimeout(frameBlurTimeout); |
|
258 |
winBlurTimeout = frameBlurTimeout = 0; |
|
259 |
|
|
260 |
hasFocus = false; |
|
261 |
} |
|
262 |
|
|
263 |
function focused() { |
|
264 |
window.clearTimeout(winBlurTimeout); |
|
265 |
window.clearTimeout(frameBlurTimeout); |
|
266 |
winBlurTimeout = frameBlurTimeout = 0; |
|
267 |
|
|
268 |
isUserActive = time(); |
|
269 |
|
|
270 |
if ( hasFocus ) |
|
271 |
return; |
|
272 |
|
|
273 |
hasFocus = true; |
|
274 |
window.clearTimeout(beat); |
|
275 |
|
|
276 |
if ( ! connecting ) |
|
277 |
next(); |
|
278 |
} |
|
279 |
|
|
280 |
function setFrameEvents() { |
|
281 |
$('iframe').each( function( i, frame ){ |
|
282 |
if ( ! isLocalFrame( frame ) ) |
|
283 |
return; |
|
284 |
|
|
285 |
if ( $.data( frame, 'wp-heartbeat-focus' ) ) |
|
286 |
return; |
|
287 |
|
|
288 |
$.data( frame, 'wp-heartbeat-focus', 1 ); |
|
289 |
|
|
290 |
$( frame.contentWindow ).on( 'focus.wp-heartbeat-focus', function(e) { |
|
291 |
focused(); |
|
292 |
}).on('blur.wp-heartbeat-focus', function(e) { |
|
293 |
setFrameEvents(); |
|
294 |
frameBlurTimeout = window.setTimeout( function(){ blurred(); }, 500 ); |
|
295 |
}); |
|
296 |
}); |
|
297 |
} |
|
298 |
|
|
299 |
$(window).on( 'blur.wp-heartbeat-focus', function(e) { |
|
300 |
setFrameEvents(); |
|
301 |
winBlurTimeout = window.setTimeout( function(){ blurred(); }, 500 ); |
|
302 |
}).on( 'focus.wp-heartbeat-focus', function() { |
|
303 |
$('iframe').each( function( i, frame ) { |
|
304 |
if ( !isLocalFrame( frame ) ) |
|
305 |
return; |
|
306 |
|
|
307 |
$.removeData( frame, 'wp-heartbeat-focus' ); |
|
308 |
$( frame.contentWindow ).off( '.wp-heartbeat-focus' ); |
|
309 |
}); |
|
310 |
|
|
311 |
focused(); |
|
312 |
}); |
|
313 |
|
|
314 |
function userIsActive() { |
|
315 |
userActiveEvents = false; |
|
316 |
$(document).off( '.wp-heartbeat-active' ); |
|
317 |
$('iframe').each( function( i, frame ) { |
|
318 |
if ( ! isLocalFrame( frame ) ) |
|
319 |
return; |
|
320 |
|
|
321 |
$( frame.contentWindow ).off( '.wp-heartbeat-active' ); |
|
322 |
}); |
|
323 |
|
|
324 |
focused(); |
|
325 |
} |
|
326 |
|
|
327 |
// Set 'hasFocus = true' if user is active and the window is in the background. |
|
328 |
// Set 'hasFocus = false' if the user has been inactive (no mouse or keyboard activity) for 5 min. even when the window has focus. |
|
329 |
function checkUserActive() { |
|
330 |
var lastActive = isUserActive ? time() - isUserActive : 0; |
|
331 |
|
|
332 |
// Throttle down when no mouse or keyboard activity for 5 min |
|
333 |
if ( lastActive > 300000 && hasFocus ) |
|
334 |
blurred(); |
|
335 |
|
|
336 |
if ( ! userActiveEvents ) { |
|
337 |
$(document).on( 'mouseover.wp-heartbeat-active keyup.wp-heartbeat-active', function(){ userIsActive(); } ); |
|
338 |
|
|
339 |
$('iframe').each( function( i, frame ) { |
|
340 |
if ( ! isLocalFrame( frame ) ) |
|
341 |
return; |
|
342 |
|
|
343 |
$( frame.contentWindow ).on( 'mouseover.wp-heartbeat-active keyup.wp-heartbeat-active', function(){ userIsActive(); } ); |
|
344 |
}); |
|
345 |
|
|
346 |
userActiveEvents = true; |
|
347 |
} |
|
348 |
} |
|
349 |
|
|
350 |
// Check for user activity every 30 seconds. |
|
351 |
window.setInterval( function(){ checkUserActive(); }, 30000 ); |
|
352 |
$(document).ready( function() { |
|
353 |
// Start one tick (15 sec) after DOM ready |
|
354 |
running = true; |
|
355 |
tick = time(); |
|
356 |
next(); |
|
357 |
}); |
|
358 |
|
|
359 |
this.hasFocus = function() { |
|
360 |
return hasFocus; |
|
361 |
}; |
|
362 |
|
|
363 |
/** |
|
364 |
* Get/Set the interval |
|
365 |
* |
|
366 |
* When setting to 'fast', the interval is 5 sec. for the next 30 ticks (for 2 min and 30 sec). |
|
367 |
* If the window doesn't have focus, the interval slows down to 2 min. |
|
368 |
* |
|
369 |
* @param string speed Interval speed: 'fast' (5sec), 'standard' (15sec) default, 'slow' (60sec) |
|
370 |
* @param string ticks Used with speed = 'fast', how many ticks before the speed reverts back |
|
371 |
* @return int Current interval in seconds |
|
372 |
*/ |
|
373 |
this.interval = function( speed, ticks ) { |
|
374 |
var reset, seconds; |
|
375 |
ticks = parseInt( ticks, 10 ) || 30; |
|
376 |
ticks = ticks < 1 || ticks > 30 ? 30 : ticks; |
|
377 |
|
|
378 |
if ( speed ) { |
|
379 |
switch ( speed ) { |
|
380 |
case 'fast': |
|
381 |
seconds = 5; |
|
382 |
countdown = ticks; |
|
383 |
break; |
|
384 |
case 'slow': |
|
385 |
seconds = 60; |
|
386 |
countdown = 0; |
|
387 |
break; |
|
388 |
case 'long-polling': |
|
389 |
// Allow long polling, (experimental) |
|
390 |
interval = 0; |
|
391 |
return 0; |
|
392 |
break; |
|
393 |
default: |
|
394 |
seconds = 15; |
|
395 |
countdown = 0; |
|
396 |
} |
|
397 |
|
|
398 |
// Reset when the new interval value is lower than the current one |
|
399 |
reset = seconds * 1000 < interval; |
|
400 |
|
|
401 |
if ( countdown > 0 ) { |
|
402 |
tempInterval = seconds * 1000; |
|
403 |
} else { |
|
404 |
interval = seconds * 1000; |
|
405 |
tempInterval = 0; |
|
406 |
} |
|
407 |
|
|
408 |
if ( reset ) |
|
409 |
next(); |
|
410 |
} |
|
411 |
|
|
412 |
if ( ! hasFocus ) |
|
413 |
return 120; |
|
414 |
|
|
415 |
return tempInterval ? tempInterval / 1000 : interval / 1000; |
|
416 |
}; |
|
417 |
|
|
418 |
/** |
|
419 |
* Enqueue data to send with the next XHR |
|
420 |
* |
|
421 |
* As the data is sent later, this function doesn't return the XHR response. |
|
422 |
* To see the response, use the custom jQuery event 'heartbeat-tick' on the document, example: |
|
423 |
* $(document).on( 'heartbeat-tick.myname', function( event, data, textStatus, jqXHR ) { |
|
424 |
* // code |
|
425 |
* }); |
|
426 |
* If the same 'handle' is used more than once, the data is not overwritten when the third argument is 'true'. |
|
427 |
* Use wp.heartbeat.isQueued('handle') to see if any data is already queued for that handle. |
|
428 |
* |
|
429 |
* $param string handle Unique handle for the data. The handle is used in PHP to receive the data. |
|
430 |
* $param mixed data The data to send. |
|
431 |
* $param bool dont_overwrite Whether to overwrite existing data in the queue. |
|
432 |
* $return bool Whether the data was queued or not. |
|
433 |
*/ |
|
434 |
this.enqueue = function( handle, data, dont_overwrite ) { |
|
435 |
if ( handle ) { |
|
436 |
if ( dont_overwrite && this.isQueued( handle ) ) |
|
437 |
return false; |
|
438 |
|
|
439 |
queue[handle] = data; |
|
440 |
return true; |
|
441 |
} |
|
442 |
return false; |
|
443 |
}; |
|
444 |
|
|
445 |
/** |
|
446 |
* Check if data with a particular handle is queued |
|
447 |
* |
|
448 |
* $param string handle The handle for the data |
|
449 |
* $return bool Whether some data is queued with this handle |
|
450 |
*/ |
|
451 |
this.isQueued = function( handle ) { |
|
452 |
if ( handle ) |
|
453 |
return queue.hasOwnProperty( handle ); |
|
454 |
}; |
|
455 |
|
|
456 |
/** |
|
457 |
* Remove data with a particular handle from the queue |
|
458 |
* |
|
459 |
* $param string handle The handle for the data |
|
460 |
* $return void |
|
461 |
*/ |
|
462 |
this.dequeue = function( handle ) { |
|
463 |
if ( handle ) |
|
464 |
delete queue[handle]; |
|
465 |
}; |
|
466 |
|
|
467 |
/** |
|
468 |
* Get data that was enqueued with a particular handle |
|
469 |
* |
|
470 |
* $param string handle The handle for the data |
|
471 |
* $return mixed The data or undefined |
|
472 |
*/ |
|
473 |
this.getQueuedItem = function( handle ) { |
|
474 |
if ( handle ) |
|
475 |
return this.isQueued( handle ) ? queue[handle] : undefined; |
|
476 |
}; |
|
477 |
}; |
|
478 |
|
|
479 |
$.extend( Heartbeat.prototype, { |
|
480 |
tick: function( data, textStatus, jqXHR ) { |
|
481 |
$(document).trigger( 'heartbeat-tick', [data, textStatus, jqXHR] ); |
|
482 |
}, |
|
483 |
error: function( jqXHR, textStatus, error ) { |
|
484 |
$(document).trigger( 'heartbeat-error', [jqXHR, textStatus, error] ); |
|
485 |
} |
|
486 |
}); |
|
487 |
|
|
488 |
wp.heartbeat = new Heartbeat(); |
|
489 |
|
|
490 |
}(jQuery)); |