1회성 시간 비교가 아닌 타이머 같은 시스템을 구현할 경우 서버 시간과 클라이언트 시간이 차이가 나거나 이용자의 악의적인 클라이언트 시간 변경에 따른 시간차가 발생할 경우가 예상될 경우 해결방법은 여러가지가 있겠다.
가령 매 초마다 ajax로 호출하여 서버쪽 시간을 받아오고 클라이언트 시간은 사용 자체를 안한다던지
좀 더 투박한 방법이지만 hidden iframe 등을 사용하여 지속 갱신해가며 마찬가지로 클라이언트 시간은 사용 안하는 방법 등등
하지만 두 방법 모두 지속적인 서버 호출이란 단점이 존재하므로 사용하기엔 바람직해보이지 않는다.
아래 소개하는 방법을 요약하자면
- 페이지가 처음 로딩될 때 서버시간을 받아온다.
- 클라이언트 시간을 추출한 후 서버시간과 클라이언트와의 시간차를(초) 구하여 클라이언트 시간을 보정해주면 그만이다.
- 이제 타이머를 동작시키면 정확히 서버와 클라이언트 시간은 일치하게 된다.
그런데 여기서 한가지 문제가 있다.
만약 시간이 지속 경과하는 와중에 페이지가 로딩된 이후 클라이언트 컴퓨터의 시간을 바꿔버린다면 위 로직은 망가져버린다.
때문에 interval함수 내부에는 매번 클라이언트 시간을 구하지 말고 페이지가 로딩될 당시의 클라이언트 시간에 interval의 간격시간만큼 더해주면 깔끔하게 해결된다.
아무리 시간을 앞으로 더하든 뒤로 돌리든 서버시간과 일치하는 타이머가 구현된다.
<%
Function CONVERTDATETIME(objDate, dateFormat)
Dim rtnValue
if false = IsDate(obj_date) then
obj_date = now
end if
if dateFormat = "" then
dateFormat = "yyyy-mm-dd h:n:s"
end if
rtnValue = Replace(dateFormat, "yyyy", Year(objDate))
rtnValue = Replace(rtnValue, "mm", right("0" & Month(objDate) , 2))
rtnValue = Replace(rtnValue, "dd", right("0" & Day(objDate) , 2))
rtnValue = Replace(rtnValue, "h", right("0" & Hour(objDate) , 2))
rtnValue = Replace(rtnValue, "n", right("0" & Minute(objDate) , 2))
rtnValue = Replace(rtnValue, "s", right("0" & Second(objDate) , 2))
CONVERTDATETIME = reValue
End Function
%>
<script type="text/javascript">
var tStart = new Date("<%=regESADATE %>");
var tClient = new Date();
<%
Dim SERVERTIME
SERVERTIME = CONVERTDATETIME(Now(), "")
%>
var tServer = new Date("<%=SERVERTIME %>");
var rSecond = (tClient.getTime() - tServer.getTime()) / 1000;
if (rSecond < 0) {
tClient = new Date(tClient.getTime() + (Math.abs(rSecond) * 1000));
} else {
tClient = new Date(tClient.getTime() + ((rSecond * (-1)) * 1000));
}
var progressTimerId;
progressTimerId = setInterval(function() {
var tStart = new Date("<%=regESADATE %>");
tClient = new Date(tClient.getTime() + 1000);
}, 1000);
</script>
'모바일 & 앱' 카테고리의 다른 글
ckeditor 문자열 치환 (0) | 2020.08.28 |
---|---|
HTML5 jQuery voice recorder and upload (0) | 2020.08.18 |
jQuery selectbox의 attribute 값 갖고오기 (0) | 2020.07.20 |
jQuery sortable 예제 (0) | 2020.07.14 |
jquery selectbox option마다 부여된 attribute value 읽어내기 (0) | 2020.07.13 |