JDK1.8 이상
자바 서버의 시간을 자바스크립트에서 실시간으로 표시하려면, 서버에서 시간을 가져와 클라이언트(브라우저)로 전달한 후, 자바스크립트를 사용하여 이를 실시간으로 업데이트하는 방식을 사용할 수 있습니다. 여기서는 Java와 JavaScript를 이용한 예제를 통해 이 과정을 설명하겠습니다.
1. 서버 측 (Java Spring Boot) - 서버 시간 반환
먼저, Java 서버에서 현재 시간을 반환하는 간단한 API를 만듭니다.
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
@RestController
public class TimeController {
@GetMapping("/api/time")
public String getCurrentTime() {
// 현재 시간을 가져와서 문자열로 포맷팅합니다.
LocalDateTime now = LocalDateTime.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
return now.format(formatter);
}
}
위 코드는 /api/time 엔드포인트를 통해 서버의 현재 시간을 yyyy-MM-dd HH:mm:ss 형식으로 반환합니다.
2. 클라이언트 측 (JavaScript) - 서버 시간 가져오기 및 실시간 업데이트
이제 클라이언트 측에서 이 시간을 가져와서 화면에 표시하고, 1초마다 갱신되도록 설정하겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Server Time</title>
</head>
<body>
<h1>Current Server Time: <span id="time"></span></h1>
<script>
async function fetchServerTime() {
try {
const response = await fetch('/api/time');
const serverTime = await response.text();
// 서버 시간을 파싱하여 Date 객체로 변환합니다.
const serverDate = new Date(serverTime);
// 서버 시간을 출력하는 함수
function updateTime() {
// 현재 클라이언트 시간을 기준으로 서버 시간에 맞게 시분초를 업데이트합니다.
const now = new Date(serverDate.getTime() + (new Date() - startTime));
document.getElementById('time').innerText = now.toLocaleTimeString();
}
const startTime = new Date();
setInterval(updateTime, 1000); // 1초마다 업데이트
updateTime(); // 즉시 호출하여 초기 시간을 표시합니다.
} catch (error) {
console.error('Failed to fetch server time:', error);
}
}
fetchServerTime(); // 페이지 로드 시 서버 시간 가져오기
</script>
</body>
</html>
동작 방식
- Java 서버는 /api/time 엔드포인트를 통해 현재 서버 시간을 클라이언트에 제공합니다.
- JavaScript는 이 시간을 가져와 Date 객체로 변환합니다.
- 이후, 자바스크립트는 1초마다 setInterval을 사용해 클라이언트의 시간을 갱신하며, 서버 시간 기준으로 초를 추가해 실시간으로 화면에 시간을 표시합니다.
이 방식은 클라이언트에서 서버 시간을 정확하게 보여줄 수 있습니다.
| 