자바스크립트 세션타임아웃 타이머 만들기

자바의 세션 타임을 가지고, 해당 시간이 지나면 만료가 되는 타이머를 만들어 보자.

 

우선 jsp 에서 해당 소스로 세션타임아웃을 가져온다.

 

 

<input type="hidden" id="sessionTimeOut" name="sessionTimeOut" value=<%=session.getMaxInactiveInterval() %>>
 

 

해당 시간은 java -> web.xml 에서 다음과 같이 설정할 수 있다.

 

<session-config>
    <session-timeout>180</session-timeout>
</session-config>

이렇게 하면, 180분 후에 세션이 끊기게 되고 jsp 소스의 sessionTimeOut 에는 180 이 저장된다.

 

아래는 03:00:00 부터 1초씩 감소하여 00:00:00가 되면 로그아웃 팝업이 뜨는 소스.

 

 

var timer;
$(document).ready(function(){
    
    doTimer($("#sessionTimeOut").val());
    $(document).on('click', "i[id='sessionRefresh']", function(){
        clearTimeout(timer);
        doTimer($("#sessionTimeOut").val());
    });
});
 
function sessionTimeOut() {
      return new Promise(function(resolve, reject) {
        $.get('/sessionTimeOutLogOut.do', function(response) {
          if (response) {
              console.log("time2");
            resolve(response);
          }
          reject(new Error("Request is failed"));
        });
      });
    }
 
function doTimer(time){
    var date = new Date(null);
    if(time){
        date.setSeconds(time);
        document.getElementById("sessionTimer").innerHTML = date.toISOString().substr(11,8);
        if(time == 0){
            sessionTimeOut().then(function(data){
                clearTimeout(timer);
                alertMessage(messageType.type.E, "세션이 만료되었습니다.",
                        "다시 로그인해주세요", function(){location.href = "/logoutProcess.do";}  )
                return;
            }).catch(function(err){
                console.error(err);
            });
 
            return;
            
        }
 
        --time;
        timer = setTimeout(doTimer, 1000, time);
    }
    return;
}
 

 

document 가 로드 되고 doTimer 를 호출 (파라미터로 세션시간을 전달)

3시간부터 시작해 1초씩 감소

 

180분이라는 파라미터를 전달받아 해당 시간을 03:00:00 (3시간) 으로 변환해서 화면에 뿌려준다.

 

27번째 줄 : 화면에 남은 시간을 표시

42번째 줄 : time 을 1초씩 감소

43번째 줄 : 1초마다 doTimer 를 호출, (재귀함수처럼 사용)

 

 

재귀함수처럼 사용 한 이유는, setInterval 로 사용 시 03:00:00 로 시작은 하되 타이머가 한발 늦게 시작한다.

1초후 02:59:59 로 바로 표시해주기 위해 setInterval 이 아닌 setTimeout 을 재귀함수처럼 사용했다.

 

 

5번째 줄 : 세션 연장 아이콘 클릭 시, 3시간 부터 다시 세션 타임 아웃 시작!

6번째 줄 : clearTimeout(타이머) 를 하지 않으면, 먼저 실행됐던 3시간의 타이머와 현시각부로 다시 호출할 타이머가 화면에 동시에 나타나므로 (이전 세션 시간이 1시간이 남았을 경우 화면에는 01:00:00 , 00:59:59.. 와 03:00:00, 02:59:59 가 번갈아서 표시된다.) 꼭 초기화를 해준 후 다음 타이머를 호출 해 준다.

 

 

28번째 줄 : 남은 시간이 0초가 되었을 경우, 세션을 제거하는 컨트롤러를 먼저 호출 후, 세션이 제거 되었으면 세션이 만료되었다는 메세지를 화면에 표시한다.

만료되었다는 메세지를 사용자가 클릭하면 로그인 페이지로 이동한다.

 

 

 

위의 소스는 해당 브라우저의 탭에서만 머물 경우는 문제가 없으나, 다른 탭을 띄워놓을 경우 크롬, 엣지 등 브라우저 정책으로 인해 타이머가 제대로 동작하지 않을 수 있다. 이는 worker 기능을 사용하여 개선할 수 있다. (다음에 작성...)