Monday, 6 July 2015

How to redirect to a JSP page when the session is timed out- using jQuery

Session time out, when the web page is idle for number of minutes. If the user has not performed any operation on a web page, then the server should kick out the user in order to maintain the security. It can be achieved by mentioning the session-config attribute in web.xml and writing Filters or Interceptors. If the web page is timed out, then the current web page will not indicate that it is timed out. If you perform any operation on the idle page, it will take you to the Login page according to the implementation in Filter or Interceptor.

Some users may want to explicitly be alerted if the session is timed out. It can be achieved in jQuery.

Steps:
1) Write the mouse or keyboard listener and if there is any operation then change the lastActivity to the current time
2) Write a function to check for the idle time for every second
3) If the idle time more than certain minute, then redirect to session time out page

Main.JSP

<head>
<script type="text/javascript">
$(document).ready(function(){
 var lastActivity = new Date().getTime();
    var checkTimeout;
    var timeOut = 1000 * 16;
    checkTimeOut = function(){
        if(new Date().getTime() > lastActivity + timeOut){
            console.log('TIMED OUTTUUUUU');
            // redirect to timeout page
            //$(window.location).attr('href','/WebContent/pages/mat.html');
            window.location='/pages/sessionTimeOut.jsp';
        }else{
            console.log('Calling timeout again');
            window.setTimeout(checkTimeOut, 1000); // check once per second
        }
    }
 
    $('html').mousemove(function(event){
     lastActivity = new Date().getTime();
        //console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
    });
    $('html').click(function(event){
     lastActivity = new Date().getTime();
       console.log("mouse click X:"+event.pageX+" Y:"+event.pageY);
    });
    $('html').keyup(function(event){
     lastActivity = new Date().getTime();
       console.log("keyboard event: key pressed "+event.keyCode);
    });
    checkTimeOut();
});
</script>
</head>

sessionTimeOut.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../css/main.css" rel="stylesheet" type="text/css" />
<title>Session timed out</title>
</head>
<body>
 <div class="row">
  <div class="navbar navbar-default navbar-fixed-top"></div>
 </div>
 <div class="page-header col-md-12">
  <h1>Session timed out</h1>
 </div>
 <div class="container">
  <div class="col-md-12">
   <h4>
    Please <u><a href="http://storesonline.devbox/">Click
      Here... </a> </u>to login again
   </h4>
  </div>
 </div>

</body>
</html>

No comments:

Post a Comment