Kevin Pajak - Interactive Web Developer/Designer - BLOG » apps

How to log out a user who closes the browser window

admin — Thu, 11 Feb 2010 04:43:03 +0000

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("");
}

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:

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?”

Live chat client showing list of current users online

admin — Thu, 04 Feb 2010 02:48:20 +0000

OK, so I’ve nearly got this puppy complete. It’s a live-chat client that will allow logged-on users (and only logged-on users, although I also have a version that guests can use) to make “posts” (just like to a “wall” on Facebook or Twitter), with the chat/comments page automatically refreshing every 500 milliseconds to show latest posts that other users have just made, in real-time. (one tentative name I have for it is a “living wall”). Last night, I added the ability to show a list of all users who are currently logged on, and hope to have this out of beta soon

These are just some of the advantages of this application:

- All posts can be saved into a database (into any table you so choose. You could, for example, insert the posts on tables related to individual topics or categories, current news items, a photo, or basically anything else you can put on an individual web page. [so to use this interactive chat client on a different page, just insert the posts into a different database table]).

- This can provide your web site users with a cross-functional, enhanced web user experience, allowing them to see who else in your online community or company is currently logged on, chat with them, comment on various pages across the site, view/update profile information, other content etc [sounds a little like Facebook, MySpace, or similar online communities doesn’t it, only think of the advantages of having this on your own site ‘).

- Flexibility. If you like, you can either destroy or save records of “chat sessions” (or series of wallposts too, if you’d like to use the app in that way).

More soon! .

jQuery / Ajax live refresh

admin — Sun, 31 Jan 2010 04:20:56 +0000

Running live, simultaneous beta tests using three different browsers for my wallpost app, with added jQuery/Ajax page refresh functionality. It is kicking some SERIOUS ass already (think: live chat possibilities, with saved record of all dialogues, that can be added to any page, threaded to any topic, etc) Yeah! .

[Already, I’d like to thank programmer Srinivas Tamada for this rockin’ code!

And additionally, very special thanks to Maruf for helping resolve an annoying IE issue:

After I modified the code, the stupid forced-caching issue of IE (which was delaying or not showing the updated list of all the latest posts) managed to get resolved. Here’s my modified code of the function:

“Twitter emulator” progress

admin — Sun, 31 Jan 2010 02:12:54 +0000

OK, so now I’ve got my “Twitter emulator” working (complete post-to-wall, saving all posts into a database), now with post authors listed according to logged-on username [i.e. wall posting for logged on users only]. Almost out of beta, few final tests to go .

My Twitter Emulator

admin — Thu, 28 Jan 2010 08:53:07 +0000

Is basically done (as far as the backend stuff). Will install on my blog soon . It functions pretty much just like Twitter (allowing a user to “add his/her post to your wall,” then see the entire stream of posts, with the latest one he/she just added at the top of the list) except that it can be run on your own site internally! :0 Stay tuned .

Future Twitter app ideas

admin — Mon, 14 Sep 2009 20:48:18 +0000

1) Those offering expanded search/grouping/collaborative (or other interactive) functionality.

2) “Pre-tweeting” capabilities .

3) Apps allowing for greater capabilities as far as posting from sources other than via a user’s own Twitter page (see: @woork’s AWESOME post “Twitter: send message from a PHP page using Twitter API” for one example ….)

4) Alternative/even user-customizable display methods for Tweets (check out ExecTweets for one example of a really cool, animated tweet display method [looks like uses jQuery/Ajax]….). I plan on adding an app like this one, but one that will allow for the scrolling of tweets to stop upon the user’s placing the mouse over a given tweet that interests him/her, a la the Twitter custom Search Widget, which reminds me of a whole other area I plan on playing on with at some point in the future .

OK, enough Twittering around, back to business (and remember my fellow tweeples to focus on end goals/results first, and then on developing the best methods toward reaching those goals!) Stay cool everybody, and please feel free to contact me for ideas, collaborations, feedback, etc.

Customized Tweet Feed Display Twitter app

admin — Sun, 13 Sep 2009 22:59:51 +0000

Completed the first phase of my “Customized Tweet Feed Display” Twitter app. What it does is: first, allow you to define 1-3 customized “tweet feed groups” (such as, for example “Social Media News,” “Travel Alerts,” etc) Then, you specify the Twitter username(s) for each custom tweet feed group, along with the number of tweets to see from each respective Twitter user. Following that, a combined group of tweets is displayed for you, clustered within each individual “tweet group”.

See it in action here!:
http://www.kevinpajak.com/apps/twitter-custom-feeds/

Custom Tweet Feed Display for multiple groups

admin — Wed, 02 Sep 2009 03:53:30 +0000

Cool! Got the custom tweet feed display working for multiple groups!! (even if it has some weird propietary issues that seem to depend on the publishing client the the person used to make the tweets, must be somehow tied to the Twitter API). Will keep working on.

Here is the current (beta) URL:
http://www.kevinpajak.com/apps/twitter-custom-feeds/index-working-w-multiple2.php

My customized Twitter feed display app

admin — Thu, 04 Jun 2009 10:21:26 +0000

Customized Twitter feed display app progress coming along nicely. (Cleaned up character display formatting issues, added interface for user to be able to enter in Twitter username(s) and desired number of most recent tweets from selected user(s) to see [tweets within past 2.5 weeks]). Uses PHP.

Try out the beta here!

Special thanks to InstantShift.com, and Nicholi from Falith Design!