Java JSP Sayfasında Session Timeout Olduğunda Ekranda Popup Çıkartıp Ek Süre İstemek
22-05-2015Javascript ile session süresi bitmeden ekranda bir popup çıkması için aşağıdaki kodları kullanabiliriz:
$(document).ready(function () {
var secondsBeforeExpire =${pageContext.session.maxInactiveInterval};
var timeToDecide = 60; // Kullaniciya 60 saniye sure verilir.
var counter = timeToDecide;
var intervalTimeout;
var timeOut = setTimeout(showPopup, (secondsBeforeExpire - timeToDecide) * 1000);
$("#btnContinueSession").click(function () {
$.ajax("/continue-session", "");
$(".close").click();
counter = timeToDecide;
clearTimeout(timeOut);
clearInterval(intervalTimeout);
timeOut = setTimeout(showPopup, (secondsBeforeExpire - timeToDecide) * 1000);
});
$("#btnSessionLogout").click(function () {
document.getElementById("logout").submit();
});
function showPopup() {
counter = timeToDecide;
$('.session-checker').lightbox_me({
centered: true, onLoad: function () {
intervalTimeout = setInterval(runCounter, 1000);
}
});
}
function runCounter(){
counter--;
document.getElementById("session-checker-content").innerHTML ="Bu sayfa <span style='color:red'>" + counter +
" </span> saniye sonra kapatılacak. Devam etmek istiyor musunuz?";
if (counter == 1) {
document.getElementById("logout").submit();
}
}
});
setTimeout() metodunun ikinci parametresi milisaniye cinsinden zaman değerini ifade eder. İlk parametresi ise bu zaman değerine ulaşıldığında çalıştırılacak metodun ismini ifade eder. Eğer setTimeout(calistirilacakMethod, 1000) şeklinde kullanılacak olursa, 1000 milisaniye sonra yani 1 saniye sonra calistirilacakMethod() isimli metod çalıştırılır. Bu örneğimizde calistirilacakMethod() yerine showPopup() metodu çağrılacaktır.
setInterval() metodu ise ikinci parametresinin aldığı milisaniye değeri geçtikçe ilk parametresindeki metodu çalıştırır. Yani setInterval(herSaniyeCalistir,1000) şeklinde kullanmış olsaydık, her 1000 milisaniyede, 1 saniyede, herSaniyeCalistir() metodunu çalıştırmış olacaktı. Yine setTimeout() metodu gibi bu metodun da dönderdiği değer bir timer numarasıdır. clearInterval() metoduna parametre olarak verildiği zaman timer sıfırlanmış olur.
2. Satırda ${pageContext.session.maxInactiveInterval} JSTL ifadesi bize web sayfasında kaç dakika inaktif kalınabileceğini dönderir. Bu değer web.xml sayfasındaki session-config elementi ile belirlenir:
<session-config>
<session-timeout>2</session-timeout>
</session-config>
O halde ${pageContext.session.maxInactiveInterval} ifadesi bize 2*60 yani 120 saniye değerini dönderir.
7. Satırda setTimeout() metodunun dönüş değerini bir değişkene atıyoruz. setTimeout() metodu bir timer numarası dönderir. Bu değeri clearTimeout() metoduna parametre olarak verdiğimizde timer baştan başlatılır.
10. satırda bir ajax request'i göndererek, session'a devam edilmesi sağlanır. Eğer ajax request'i göndermemiş olsaydık, uygulamamızı çalıştıran server, Tomcat, Jetty vs.. bizi direkt olarak login sayfasına yönlendirecekti. Burada dikkat edilmesi gereken nokta şudur: Yazmış olduğumuz Javascript kodları sadece ekrana popup çıkartıp kullanıcıyı uyarmak içindir. btnContinueSession butonuna tıklanıldığında ajax requesti göndererek, Server'a aktif olduğumuz bilgisini iletmiş oluruz.
Html Sayfası
<html>
<head>
<script src="/resources/js/jquery.lightbox_me.js"></script>
</head>
<body>
<div class="session-checker">
<span id="session-checker-content" style="text-align: center"></span>
<div style="margin:20px auto auto; width: 500px">
<button type="button" id="btnContinueSession" class="buttonSubmit">Devam Et</button>
<button type="button" id="btnSessionLogout" class="buttonCancel">Çıkış Yap</button>
</div>
<a class="close" style="border:none;visibility: hidden;" href="#"></a>
</div>
</body>
</html>
Not: jquery.lightbox_me.js dosyası ekranda popup çıkması için kullanılmaktadır. Bu dosyayı indirmek için tıklayınız
Css
div.session-checker{
background: none repeat scroll 0 0 #eef2f7;
border: 1px solid #536376;
display: none;
padding: 14px 22px;
position: relative;
width: 500px;
border-radius: 5px;
height: 100px;
}
.buttonSubmit {
border-radius: 2px;
margin-top: 3px;
border: 0 none rgba(0, 0, 0, 0);
background: #3683d6 repeat scroll 0 0;
color: #ffffff;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
cursor: pointer;
}
.buttonSubmit:hover {
background: #1e62d0 repeat scroll 0 0;
}
.buttonSubmit:active {
position: relative;
top: 1px;
}
.buttonCancel {
background: repeat scroll 0 0 #d9d8df;
border-width: 0;
color: #777777;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-shadow: 1px 1px 0 #ffffff;
}
