PHP와 JavaScript를 이용한 실시간 서버 시간 표시 구현

• 목록
• 스크랩

PHP와 JavaScript를 이용한 실시간 서버 시간 표시 구현

웹페이지에서 클라이언트 PC 시간이 아닌 서버 기준 시간을 1초마다 실시간으로 갱신하여 보여주는 구현 방법을 살펴봅니다.

PHP와 JavaScript를 이용한 실시간 서버 시간 표시 구현

웹페이지에서 클라이언트 PC의 시간이 아닌 서버의 시간을 기준으로 실시간 갱신되는 시계를 표시하려면, PHP의 초기 시간 출력 기능과 JavaScript의 Date 객체 및 setInterval 메서드를 함께 사용해야 합니다. PHP는 페이지가 로딩될 때 서버의 현재 시간을 한 번 출력하고, 이후에는 자바스크립트가 1초마다 초를 증가시키며 화면을 갱신합니다.

구현 방법

1. HTML 및 PHP 영역초기 서버 시간을 출력할 요소를 만들고 PHP의 date() 함수를 이용해 현재 서버 시간을 삽입합니다.

   <div id="server_realtime"><?php echo date("Y-m-d H:i:s", time());?></div>

2. JavaScript 영역PHP에서 전달받은 서버 시간을 자바스크립트 Date 객체로 파싱한 뒤, setInterval을 이용해 1초마다 시간을 1초씩 증가시키고 화면을 갱신합니다.

   <script>
   var srv_time = "<?php print date("F d, Y H:i:s", time());?>";
   var now = new Date(srv_time);
   setInterval(function() {
   now.setSeconds(now.getSeconds() + 1);
   document.getElementById("server_realtime").innerHTML = 
   now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate() + " " + 
   now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
   }, 1000);
   </script>

결과 확인

웹페이지를 새로고침한 뒤 화면의 초 단위 값이 1초마다 정상적으로 증가하며 실시간으로 갱신되는지 확인합니다.

실시간 서버 시간 표시 및 갱신 멈춤 해결 방법

웹페이지에서 PHP와 JavaScript를 조합하여 실시간 서버 시간을 표시할 때, 화면이 멈추거나 시간이 갱신되지 않는 문제는 주로 setInterval에 전달되는 함수 이름의 불일치나 DOM 요소를 한 번만 텍스트로 넣고 이후 업데이트 로직이 빠졌을 때 발생합니다. PHP는 페이지 로딩 시점에 서버 시간을 단 한 번만 출력하므로, JavaScript를 통한 주기적인 누적 갱신 처리가 필수적입니다.

주요 확인 및 해결 순서

1. 함수 이름 일치 확인: setInterval 내부에서 호출하는 함수명과 실제 정의된 함수의 이름이 정확히 일치하는지 확인합니다. 예컨대 setInterval("server_realtime()", 1000);과 같이 호출한다면 정의된 함수명도 동일해야 합니다.
2. Date 객체와 setSeconds 활용: 초기 서버 시간을 Date 객체로 파싱한 뒤, setInterval을 이용해 1초마다 setSeconds(now.getSeconds() + 1)을 실행하여 초 단위를 누적 갱신해야 합니다.

구현 예시 코드

<div style="float:left; padding-right:5px;">현재 서버시간:</div>
<div style="float:left;" id="server_realtime"><?php echo date("Y-m-d H:i:s", time());?></div>
<div style="clear:both;"></div>

<script>
var srv_time = "<?php print date("F d, Y H:i:s", time());?>";
var now = new Date(srv_time);
setInterval("server_realtime()", 1000);

function server_realtime() {
 now.setSeconds(now.getSeconds() + 1);
 var year = now.getFullYear();
 var month = now.getMonth() + 1;
 var date = now.getDate();
 var hours = now.getHours();
 var minutes = now.getMinutes();
 var seconds = now.getSeconds();
 
 if (month < 10) { month = "0" + month; }
 if (date < 10) { date = "0" + date; }
 if (hours < 10) { hours = "0" + hours; }
 if (minutes < 10) { minutes = "0" + minutes; }
 if (seconds < 10) { seconds = "0" + seconds; }
 
 document.getElementById("server_realtime").innerHTML = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
}
</script>

PHP와 JavaScript 연동 실시간 서버 시간 표시

웹페이지에 실시간으로 갱신되는 서버 시간을 표시하려면, 페이지 로딩 시점에 PHP date() 함수로 서버 시간을 한 번 출력한 뒤, JavaScript의 Date 객체와 setInterval을 이용해 1초마다 초를 증가시키며 화면을 갱신해야 합니다.

상황 및 선택 기준

• 상황: 웹페이지에서 클라이언트 PC 시간이 아닌 서버 기준 시간을 실시간으로 보여주고 싶을 때 사용합니다.
• 선택 기준: PHP는 페이지 로딩 시점에만 서버 시간을 출력하므로, JavaScript의 Date 객체로 초기 시간을 파싱한 뒤 setInterval을 이용해 1초마다 setSeconds()로 시간을 누적 갱신하는 방식을 선택합니다.

다음 행동

1. HTML 문서 내에 서버 시간을 표시할 고유 ID(id="server_realtime")를 가진 요소를 배치합니다.
2. PHP 출력 값을 JavaScript의 Date 객체로 파싱하고 setInterval을 연결하여 초 단위 갱신이 정상 동작하는지 웹브라우저 화면에서 확인합니다.

실전 FAQ

Q. 페이지를 새로고침하면 시간이 나오지만 1초 뒤에 멈추거나 업데이트가 되지 않습니다.

• 원인 및 대안: PHP는 페이지가 열릴 때 서버 시간을 단 한 번만 텍스트로 출력하므로, 이후 자바스크립트가 주기적으로 값을 누적 갱신하지 않으면 시간이 멈춘 것처럼 보입니다. setInterval 내부에서 호출하는 함수명과 실제 정의된 함수명이 정확히 일치하는지 확인하고, now.setSeconds(now.getSeconds() + 1) 코드가 정상적으로 실행되고 있는지 점검하세요.

함께 보면 좋은 글

• 그누보드5 최신글 스킨 'new' 아이콘 표시 기간 및 시간 체크 로직 문제 해결
• PHP와 MySQL 연동 시 한글 깨짐 현상 원인 및 UTF-8 해결 방법
• Windows 환경에서 PHP와 MS SQL 연동 시 한글 깨짐 및 검색 오류 해결 방법

참고자료

기타 참고자료

• kasumil.tistory.com — php코드 자바스크립트를 통한 실시간 시간 바꾸기
• phpschool.com — PHPSCHOOL-Class > Tip&Tech
• chicpro.dev — JS 서버시간을 화면에 실시간으로 표시하기 – CHICPRO