1
2
3
4
5
6
7
8
9
10
11
12
13
14
public static String getNumberToString(int number, String[] strArr) { 
        
        String returnValue = "";
        
        int length = strArr.length;
        while (number >= length) {
            int val = number / length - 1;
            int index = number % length;
          returnValue = strArr[index] + returnValue;
            number = val;
        }
      returnValue = strArr[number] + returnValue;
        return returnValue;
    }
 
 cs

 

strArr 이 가,나,다 일때

 

입력값  출력값

1          가

2          나

3          다

4          가가

5          가나

6          가다

7          나가

.

.

.

           가가가

저작자표시 (새창열림)

'공부 > Java' 카테고리의 다른 글

maven 중복 의존성 해결 (The package javax.xml.namespace is accessible from more than one module: <unnamed>, java.xml)  (1) 2024.02.28
maven 설치, 환경변수 추가('maven'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 해결)  (1) 2024.02.28
이클립스 UTF-8 해도 한글 깨질때  (0) 2022.07.03
톰캣 설치 및 이클립스에 적용  (0) 2022.07.03
JDK 설치, 환경 변수 설정, maven, gradle 다운로드  (0) 2022.06.30

자바스크립트 만으로도 세션타임아웃을 만들 수는 있지만,

다른 탭에 갈 경우는 타이머가 잘 작동하지 않을 수 있다. (브라우저 정책)

 

이건 worker 라는 것을 통해서 해결할 수 있다.

 

 

타임아웃 해주는 자바스크립트 파일과 워커 파일 두 가지가 필요하다.

 

<타이머를 표시해주는 자바스크립트 파일>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
let worker = new Worker("워커 파일 경로");   
function doTimer(){
     if (window.Worker) {      
         // Worker 쓰레드를 생성(js파일를 로드)
         worker = new Worker("워커 파일 경로");   
         var sessionTimeout = $("#sessionTimeOut").val();
         worker.postMessage(sessionTimeout);
         
         worker.onerror = (e)=>{        
             console.log("error " + e.message);      
         }   
         // anyone_worker.js에서 postMessage의 값을 받는다.
         worker.onmessage = (e)=>{  
             var date = new Date(null);
             date.setSeconds(e.data);
             $(".sessionTimer").html(date.toISOString().substr(11,8));
             if(e.data.toString() == "0"){
                 sessionTimeOut().then(function(data){
                        alertMessage(messageType.type.E, "일정 시간 사용하지 않아 자동 로그아웃합니다.",
                                "다시 로그인해주세요", function(){location.href = "/logoutProcess.do";}  )
                        return;
                    }).catch(function(err){
                        console.error(err);
                    });
 
                    return;
                 worker.terminate();
             }
         }    
     }
     else{
         $(".sessionTimer").html("해당 브라우저에서 지원하지 않습니다. 크롬을 권장합니다");
     }
}
 
 
 cs

5번째 줄 : 워커를 생성한다. 경로에는 .path/worker.js 이런식으로 적어주면 된다.

6번째 줄 : 세션타임아웃 시간이다. (ex.180 => 3시간)

7번째 줄 : 워커 파일에 메세지를 보낸다.

13번째 줄 : 워커 파일에서 받은 메세지가 있을 때 처리한다.

27번째 줄 : 워커를 종료한다. (세션타임아웃 시간을 종료 시키기 위함)

 

<워커 자바스크립트 파일>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// main에서 postMessage의 값을 받는다. 
onmessage = function(e){  
    
    doTimer(e.data);
        
}
function doTimer(time){
    postMessage(time);
    if(time){
        --time;
        timer = setTimeout(doTimer, 1000, time);
    }
    else{
        return;
    }
    return;
}
 
 cs

 

2번째 줄 : 워커를 호출한 곳으로부터 메세지를 받아서 처리한다.

8번째 줄 : 워커를 호출한 곳으로 메세지를 보낸다.

저작자표시 (새창열림)

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

 

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

 

 

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

 

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

 

1
2
3
<session-config>
    <session-timeout>180</session-timeout>
</session-config>
  

 

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

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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 기능을 사용하여 개선할 수 있다. (다음에 작성...)

저작자표시 (새창열림)

'공부 > Javascript' 카테고리의 다른 글

IE에서 web worker 사용하기  (1) 2024.08.19
jQuery 노드찾기 like 검색  (0) 2022.08.08
체크박스 모두 선택, 모두 해제 구현  (0) 2022.07.15
table > tr 클릭 이벤트 특정 td만 적용 안되게 하기  (0) 2022.02.21
특정 문자열을 원하는 문자열로 변경하기  (0) 2021.10.08

ajax 로 데이터를 불러오다보면 for 문으로 데이터를 뿌려줄 때가 많은데,

<td id="tdid1"> <td id="tdid2"> ... 이런식으로 데이터를 뿌려줄 때가 있다.

 

그렇다면 td 에 대한 id 가 tdid 로 시작하는 노드 모드를 가져 오고 싶을 때는 아래와 같이 쓰면 된다.

1
var nodes= $("td[id*='tdid']");
  

 

이렇게 하면 nodes 에는 html 태그가 td 이고 id 가 tdid 로 시작하는 td들을 모두 담을 수 있다.

 

노드들의 갯수 : nodes.length;

text 가져오기 : node[i].innerHTML;

text 변경하기 : node[i].outerHTML = "변경할값";

 

예시)

 

1
2
3
4
5
6
7
8
var node = $("span[id*='phone']");
if (node.length != 0) {
        for (var i = 0; i < node.length; i++) {
            var phone = node[i].innerHTML;
            phone = telNoBeautify(phone);
            node[i].outerHTML = phone;
        }
    }
 
  

 

저작자표시 (새창열림)

'공부 > Javascript' 카테고리의 다른 글

IE에서 web worker 사용하기  (1) 2024.08.19
자바스크립트 세션타임아웃 타이머 만들기  (0) 2022.09.07
체크박스 모두 선택, 모두 해제 구현  (0) 2022.07.15
table > tr 클릭 이벤트 특정 td만 적용 안되게 하기  (0) 2022.02.21
특정 문자열을 원하는 문자열로 변경하기  (0) 2021.10.08

+ Recent posts

티스토리툴바