PDA

View Full Version : Allowing user to refresh session



blex2010
16 Feb 2011, 12:05 PM
Our webserver has very short sessions for security purposes. This was fine when we had web pages loading but now that we do most of the work in extjs through ajax there is a lot less traffic (good!) but it means that timeout sessions are more likely and surprise the user. Also it causes some unanticipated error handling for us.

What we would like to do is pop up a prompt after some amount of time and ask them to continue or logout. If they continue we want their session to refresh/restart the timer

If they don't respond we will automatically log them out.

I was wondering if this is a reasonable approach and if there were examples of how to do this. Specifically what is the best way to refresh the session?

arthurakay
16 Feb 2011, 2:49 PM
I have an instance of Ext.util.Observable() that monitors the UI for mouse movement and keystrokes. In our case, if the UI isn't "active" in 30 minutes, we log the user out. If the user is "active", we periodically send an AJAX request to the server to refresh the session.

I don't like asking the user if they want to continue... in almost every case, the answer is "yes".

blex2010
16 Feb 2011, 3:03 PM
Make sense - how do you get those events?

arthurakay
17 Feb 2011, 6:34 AM
I can't post my exact solution, but here's the basic point:



function onMouseMove() { ... }
function onKeyPress() { ... }

var page = Ext.getDoc(); //returns an Ext.Element
page.on('mousemove', onMouseMove);
page.on('keypress', onKeyPress);


You could then use an instance of Ext.util.TaskRunner() to test for activity every X minutes/seconds.

blex2010
17 Feb 2011, 6:43 AM
Thank you. I understood the concept but I just didn't know the events to watch for. Is there a complete list somewhere? I looked thorugh the docs but this is one issue I'm still not clear on - which events are available.

Thanks again - this will do the job.

arthurakay
17 Feb 2011, 6:51 AM
It depends on the component you're using.

Using Ext.Element (for example), let's look at the API docs:
- http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element

Scroll to the bottom and you have a list of events supported by the object's instance of Ext.util.Observable(). Almost every component in the framework extends Observable(), so keep an eye out for this list in the API docs.

If you were created your own naked implementation of Observable(), you can create your own events - but you're responsible for adding the logic that fires them.

blex2010
17 Feb 2011, 6:58 AM
So to capture these events mouse and key what should I attach the listener to? It doesn't look like the viewport will work.

arthurakay
17 Feb 2011, 7:00 AM
function onMouseMove() { ... }
function onKeyPress() { ... }

var page = Ext.getDoc(); //returns an Ext.Element
page.on('mousemove', onMouseMove);
page.on('keypress', onKeyPress);



Attach them to the document body, as returned by Ext.getDoc();

blex2010
17 Feb 2011, 7:03 AM
perfect. worked. Thank you so much.

blex2010
25 Feb 2011, 9:27 PM
This worked great however now I have a related issue. My application opens another window which loads a web page that is not running ext. Is there anyway I can monitor the keyboard and mouse events in that window so I can close the window/session if no movement?