[php,jquery] 장시간 움직임 없을때 로그아웃 되는 기능 만들기

오늘은 홈페이지에 로그인되고 나서 장시간 움직임이 없을 때 자동으로 로그아웃 되는 기능을

한번 넣어 봤다.

​

이런식의 팝업메시지가 나타난다.

​

그럼 어떻게 하는지 하나하나 살펴보도록 해요 ^^

​

아래는 우선 전체적인 코드

​

​

<jquery>

let LogOutTimer = function () {
    let assoc = {
        timer: '',
        limittime: 1000 * 300,
        func: function () { },
        start: function () {
            assoc.timer = window.setTimeout(assoc.func, assoc.limitime);
        },
        reset: function () {
            window.clearTimeout(assoc.timer);
            assoc.start();
        }
    };

    document.onmousemove = function (){ 
        assoc.reset(); 
    };

    document.onkeypress = function (){ 
        assoc.reset(); 
    };

    return assoc;
}();

LogOutTimer.limittime = 1000 * 300;

LogOutTimer.func = function () {
    $.get('./ex.php?mode=autologout',function(data){
        if(data.result === 'logging_in'){
            $('#logout_btn').click();
            alert("장시간 움직임이 없어 로그아웃 되었습니다.");
        }
    })
}

LogOutTimer.start();

​

<php>

if($_GET['mode']==='autologout'){
    $json = [];
    if(get_session_value($_COOKIE["SESSID"], "nickname")){
        $json['result'] = 'logging_in';
    }
    echo json_encode($json);

​

위와같이 코드를 작성했다.

​

먼저 jquery 코드를 살펴보자.

​

let assoc = {
        timer: '',
        limittime: 1000 * 300,
        func: function () { },
        start: function () {
            assoc.timer = window.setTimeout(assoc.func, assoc.limitime);
        },
        reset: function () {
            window.clearTimeout(assoc.timer);
            assoc.start();
        }
    };

먼저 함수안에 객체를 하나 만들고 그 안에

timer, limittime, func, start 라는 key들을 넣어주고,

그에 해당하는 값들로 '', 1000 * 300, 함수들을 넣어준 모습

​

timer는 setTimeout 함수를 이용해 limittime 후에 func 함수가 실행되도록 한 것이고,

reset 의 함수는 위에 설정한 timer를 clearTimeout을 이용해 초기화 시킨 뒤 다시 시작하는 함수이다.

​

document.onmousemove = function (){ 
        assoc.reset(); 
    };

document.onkeypress = function (){ 
        assoc.reset(); 
    };

이 부분은 그 화면 안에서 마우스가 움직이거나 키보드가 눌리면 reset() 함수를 실행시킨다는 코드

그리고 함수를 바로 실행시킨다. 리턴값은 assoc 객체이다.

​

LogOutTimer.limittime = 1000 * 300;

LogOutTimer.func = function () {
    $.get('./ex.php?mode=autologout',function(data){
        if(data.result === 'logging_in'){
            $('#logout_btn').click();
            alert("장시간 움직임이 없어 로그아웃 되었습니다.");
        }
    })
}

LogOutTimer.start();

그 다음은 limittime 을 1000 * 300 으로 설정하고

func 함수의 코드를 작성해준다.

코드의 내용을 살펴보면 함수가 실행 된 뒤 AJAX를 이용해 php로 요청을 한다.

​

if($_GET['mode']==='autologout'){
    $json = [];
    if(get_session_value($_COOKIE["SESSID"], "nickname")){
        $json['result'] = 'logging_in';
    }
    echo json_encode($json);

php에 요청이 들어오면 현재 세션에 'nickname' 이라는 key 에 값이 있는지를 체크해서

있으면 결과값으로 'logging_in' 이라는 단어를 출력해준다.

​

로그인을 하면 세션에 'nickname' 이라는 key에 해당 유저의 닉네임을 저장하도록 코드를

미리 작성해 놨다. get_session_value() 함수는 직접 만든 메소드인데

get-cookie() 거의 같은 함수라고 생각하면 된다.

​

이렇게 해서 결과값을 다시 클라이언트쪽으로 보내주면,

​

if(data.result === 'logging_in'){
            $('#logout_btn').click();
            alert("장시간 움직임이 없어 로그아웃 되었습니다.");
}

data.result 의 값이 'logging_in'이면 로그아웃 버튼이 눌리면서 alert 창을 띄워준다.

로그아웃 버튼이 눌리면 세션은 파괴되고 다시 세션 아이디를 생성하는 구조로 코드를 작성했다.

​