AJAX 和用户离开页面

Question

I'm working on a chat and I'm trying to figure out how I can detect that the user has left the page or not. Almost everything is being handled by the database to avoid the front end from messing up.

So what I'm trying to do is once the page is left for any reason (window closed, going to another page, clicking a link, etc.) an ajax call will be fired before a person leaves so I can update the database.

This is what I've tried:

$(window).unload(function(){
      $.post("script.php",{key_leave:"289583002"});
});

For some odd reason, it wouldn't work, and I've checked the php code, and it works fine. Any suggestions?

Answer 1

Try this:

$(window).unload(function(){
    $.ajax({
        type: 'POST',
        url: 'script.php',
        async:false,
        data: {key_leave:"289583002"}
    });
});

Note the async:false , that way the browser waits for the request to finish.

Using $.post is asynchronous, so the request may not be quick enough before the browser stops executing the script.

Answer 2

This isn't the correct way of doing this... Suppose the OS just hangs or something happens in the browsers process then this event wont be fired. And you will never ever know when the user has left, showing him/her online ever after he/she has disconnected. Instead of this, what you can do is.

1. Try connecting a socket so that you can know the user is disconnected when the socket is disconnected
2. You can send a request to the server (say after every 1 sec) so that you can know that the user is still connected. If you didn't receive the request - even after 2 secconds - disconnect the user.

Answer 3

Try to add popup (prompt("leaving so early?")) after $.post. It may work. Tho it may be bad user experience. :)

Answer 4

The unload event is not recommended to detect users leaving the page. From MDN :

Developers should avoid using the unload event... Especially on mobile, the unload event is not reliably fired.

Instead, use the visibilitychange event on document and/or the pagehide event on window (see links for details). For example:

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
        $.ajax({
            type: 'POST',
            url: 'script.php',
            async:false,
            data: {key_leave: "289583002"}
        });
    }
});

Better yet, use Navigator.sendBeacon , which is specifically designed for the purpose of sending a small amount of analytics data to a server:

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'hidden') {
         navigator.sendBeacon('script.php', {key_leave: "289583002"});
    }
});

Answer 5

This is related to the answer above. https://stackoverflow.com/a/10272651/1306144

This will execute the ajax call every 1 sec. (1000)

function callEveryOneSec() {
    $jx.ajax({}); // your ajax call
}

setInterval(callEveryOneSec, 1000);