I would like to thank Brazilian software developer Daniel Melo for posting this code which helped me to solve a problem which was very pesky indeed, and in need of a solution. The problem occurred during a user’s logged-in session for a chat application I was building. This was the issue: the app is basically a live-chat client, which also shows all current users online, by name. If a logged-in user clicked the “Logout” link, all was good, no problem, his/her name was removed from the list of currently logged-on users. However, if the person just suddenly decided to end the chat session by just closing the browser and hitting ‘X’ (as I myself might do!), the user was still showing as currently online, and NOT logged out (obviously this is an annoying issue). After searching far and wide for this on the Internet, I came across the brilliant code I found at the link below on stackoverflow.com:
“How to kill an application session when a browser window is closed?”
This code uses jQuery/Ajax in an absolutely brilliant and straightforward way. Basically what the code does is automatically load the contents of your “logoff.php” page, using the JavaScript window.onbeforeunload function (which is something that executes upon a user’s exiting the browser, refreshing the page, or submitting a form). Probably the most brilliant thing about this script is that it still uses the onbeforeunload function, BUT (and this was why it was of so much particular use to me for my particular case), let’s say that your web app page is relying on a form processor page that is on an external page, and not on the same page. If the user in this kind of case enters in their chat text, and then hits the submit button (but still is currently ON the page and actively participating in the current chat session), the typical onbeforeunload function if called, would execute (so basically, in this case, this would amount to the user being logged off every time he/she hit the “Post Message” button, and not JUST when the user closed the browser window).
So what this very clever script does is execute the contents of the script on your “logoff.php” page onbeforeunload, BUT excepts the following cases: (so it won’t get called if the user does the following things, and will only log the user out when he/she closes the browser window):
- Hitting the Submit button;
- Clicking a link.
[The "magical" thing I will add too, after thinking about it, is that your 'logout.php' web page does not even have to be currently loaded on the browser - after all, the browser is being closed, right? This script executes your code all at once - like I said, fantastic! One other slightly unfortunate thing I found too in my extensive testing was that: this script works fine in Firefox and IE (and worked in Google Chrome, after not working the first time, insanely enough, but did not work in Opera or Safari :S). My sort of work-around for this was to at least add in code to my log-in page that sets the user's status to offline right away, then online once they are logged on and enter the chatroom].
Anyway, hope what I said here makes sense and is not too muddled an explanation, and… here is the code!:
* autoLogoff.js
*
* Every valid navigation (form submit, click on links) should
* set this variable to true.
*
* If it is left to false the page will try to invalidate the
* session via an AJAX call
*/
var validNavigation = false;
/*
* Invokes the servlet /endSession to invalidate the session.
* No HTML output is returned
*/
function endSession() {
$.get("<whatever url will end your session>");
}
function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
if (!validNavigation) {
endSession();
}
}
// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();
});
From there, you just need to save this text in a file called ‘autoLogoff.js’, and call it toward the top of your page with the following code:
<script type="text/javascript" src="js/autoLogoff.js"></script>
I am making this post because this information was REALLY hard to find when I was searching for it, in the hopes that it can help you out with a similar project!
Again, here is the original posting for more and complete information:
“How to kill an application session when a browser window is closed?”
Tags: Ajax, apps, code, JavaScript, jQuery