JavaScript (5) - 서버 시간을 가져오자 (XMLHttpRequest)

수강 신청을 할 때 타임시커등 다양한 프로그램을 이용하여 서버 시간을 가져옵니다. 수강 신청 때 시간 편차에 예민하기 때문에 서버 시간을 알아 오는 것이 중요합니다. 자바스크립트를 이용하여 간단하게 서버 시간을 가져올 수 있습니다. 

시계 - 픽사베이

XMLHttpRequest

XMLHttpRequest 객체는 서버로부터 XML 데이터를 가져오는 데 사용합니다. 해당 객체를 이용하여 웹 페이지 로딩이 완료된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.

여기서 XML은 extensible markup language의 약자로 HTML과 같은 마크업 언어입니다. HTML과 다른 점은 XML은 데이터를 저장하고 전송하는 목적으로 만들어져 있고, 사용자가 직접 정의할 수 있는 특징을 가지고 있습니다.

 

시간을 가져오는 방법

1. XMLHttpRequest 객체를 선언합니다.

var xmlHttp;

xmlHttp = new XMLHttpRequest();

사용에 앞서 XML 포맷으로 데이터를 가져올 예정으로 객체를 선언합니다.

 

2. 설정 후 서버 시간을 가져옵니다.

//XML 전송 INIT
xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("ContentType", "text/html");
xmlHttp.send('');

//XML형식으로 서버의 시간을 가져옵니다
var serverDate = xmlHttp.getResponseHeader("Date");
var date = new Date(serverDate);

첫 줄부터 말하자면 open함수를 통하여 헤드 정보를 가져옵니다. 그 후 Request에 사용할 헤더 타입을 구성합니다. send 함수를 통하여 HTTP 형식으로 데이터를 요청합니다. 여기서 서버의 Date 정보를 가져와 이를 시간으로 사용합니다.

 

window.location.href.toString() 함수는 현 웹사이트의 링크를 가져옵니다. 다른 웹사이트 링크를 넣으면 다른 웹사이트의 정보를 가져올 수 있습니다. 아래에 통합 소스 코드는 다른 웹사이트의 정보를 가져옵니다.

 

3. 한국시간으로 변경합니다.

// UTC 시간 계산
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); 

// UTC to KST (UTC + 9시간)
var KR_TIME = 9 * 60 * 60 * 1000;
var now = new Date(utc + (KR_TIME));

기존의 시간은 UTC 시간입니다. 대한민국의 시간을 변경하기 위해서는 (UTC+9)로 변경하여야 합니다.

 

예시 소스코드

var xmlHttp;

xmlHttp = new XMLHttpRequest();

//XML 전송 INIT
xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("ContentType", "text/html");
xmlHttp.send('');

//XML형식으로 서버의 시간을 가져옵니다
var serverDate = xmlHttp.getResponseHeader("Date");
var date = new Date(serverDate);

// UTC 시간 계산
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); 

// UTC to KST (UTC + 9시간)
var KR_TIME = 9 * 60 * 60 * 1000;
var now = new Date(utc + (KR_TIME));

 

다른 웹사이트의 시간을 가져오는 소스코드

function getTime() {
  var xmlHttp;
  var ServerTime = document.getElementById("link").innerText; //자유롭게 변경 가능
  // 대부분의 웹브라우저 모두 지원합니다. (IE는 이전버전은 지원하지 않는다.)
  xmlHttp = new XMLHttpRequest();

  //XML 전송 INIT
  xmlHttp.open('HEAD', ServerTime, false);
  xmlHttp.setRequestHeader("ContentType", "text/html");
  xmlHttp.send('');

  //XML형식으로 서버의 시간을 가져옵니다
  var serverDate = xmlHttp.getResponseHeader("Date");
  var date = new Date(serverDate);
  // UTC 시간 계산
  var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000); 
  // UTC to KST (UTC + 9시간)
  var KR_TIME = 9 * 60 * 60 * 1000;
  var now = new Date(utc + (KR_TIME));
  alert(now);  //자유롭게 변경 가능
}

해당 자바스크립트 함수는 다른 웹사이트의 시간을 가져오는 함수입니다. 위에 함수를 이용하여 서버의 시간을 가져오는 웹사이트를 만들었습니다.

 

See the Pen Untitled by kmsbio (@kmsbio) on CodePen.