카테고리 없음
자바스크립트 세션타임아웃 만들기(워커 사용)
딸기버블티
2022. 9. 23. 17:48
자바스크립트 만으로도 세션타임아웃을 만들 수는 있지만,
다른 탭에 갈 경우는 타이머가 잘 작동하지 않을 수 있다. (브라우저 정책)
이건 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번째 줄 : 워커를 호출한 곳으로 메세지를 보낸다.