jquery Send Heartbeat when Viewing Page

Question

I've written the following Jquery to send a Heartbeat back to PHP every 3 seconds and it works fine. The reason I'm doing this is to understand what users are currently logged in and using the site.

setInterval(function () {
    $.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'});
},3000);

The catch I'm finding is it continues to heartbeat when users aren't looking at the site - eg: they still have the browser open but are looking at other pages or doing something else.

Is there a way to update this so it only sends the AJAX heartbeat if the user is using the site?

Control Freak · Accepted Answer · 2014-09-13T05:54:44.030

1

You can check if window is focused and only heartbeat if it's focused. Try this:

 $(window).focus(function() {
   heartbeat = setInterval(function () { 
    $.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'}); 
   },3000);
 })
 .blur(function() {
   clearInterval(heartbeat);
 });

 $(window).focus();

edited Sep 13 '14 at 05:54

answered Sep 13 '14 at 05:35

Control Freak

12,965
30
94
145

Try adding `$(window).focus();` at the end to initialize it. – Control Freak Sep 13 '14 at 05:41
That's ok. Am just tinkering with this: http://stackoverflow.com/questions/923299/how-can-i-detect-when-the-mouse-leaves-the-window. Seems not working in JSFIDDLE. :/ – loveNoHate Sep 13 '14 at 05:42
No, yes. Yours works! My trials to catch the mouseout/mouseleave of the `window` does not work on JSFIDDLE at least. – loveNoHate Sep 13 '14 at 05:46
Your question doesn't say you want to catch mouseout/mouseleave, so I assumed the window focus was good enough. You're saying it's not? – Control Freak Sep 13 '14 at 05:49
OP does not say anything about solution kind. So I will post mine. OP can decide. – loveNoHate Sep 13 '14 at 05:51

score 1 · Answer 2 · answered Sep 13 '14 at 05:43

    $(document).ready(function(){

       heartBeatInterval = null;

        $(window).focus(function() {
          if(heartBeatInterval == null){
           heartBeatInterval =  setInterval(function () {
                                        $.post('includes/heartbeat.php', 
                                        {'heartBeatConfirmation': '1'}
                                    );  
                                     console.log('We have the fouces of the active tab');
                                 },1000);
          }
        });

        $(window).blur(function() {
            heartBeatInterval = null;
            console.log('We have the lost the focus of the active tab');
        });

    });

loveNoHate · Answer 3 · 2014-09-13T06:14:30.597

1

It is just a matter of taste I guess:

$(window)
.on('mouseleave', function(){ 
  clearInterval(inside);
})  
.on('mouseenter', function(){
  inside = setInterval(function () { 
    $.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'})
  }, 3000)
})

JSFIDDLE ( Reminder: window is "Result" Frame ).

edited Sep 13 '14 at 06:14

answered Sep 13 '14 at 05:52

loveNoHate

1,549
13
21

jquery Send Heartbeat when Viewing Page

3 Answers3