서버 전송 이벤트(Server-Sent Events)란?
서버 전송 이벤트(Server-Sent Events, SSE)는 서버에서 클라이언트로 데이터를 스트리밍하는 방식을 표준화한 기술입니다. 폴링(polling) 방식 없이도 서버가 새로운 데이터를 지속적으로 밀어줄 수 있어, 실시간 알림·주식 시세·채팅 등 단방향 실시간 통신에 적합합니다.
<eventsource> 요소를 활용한 기본 사용법
웹 애플리케이션에서 서버 전송 이벤트를 사용하려면 문서에 <eventsource> 요소를 추가해야 합니다.
<eventsource> 요소의 src 속성은 지속적인 HTTP 연결을 유지하면서 이벤트가 담긴 데이터 스트림을 전송하는 URL을 가리켜야 합니다.
이 URL은 PHP, PERL, Python 등으로 작성된 서버 스크립트를 가리키며, 해당 스크립트가 이벤트 데이터를 일관되게 전송하는 역할을 담당합니다. 아래는 서버 시간을 수신하는 간단한 웹 애플리케이션 예제입니다.
클라이언트 측 예제 코드
다음 코드를 실행하면 HTML5에서 서버 전송 이벤트를 사용하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time", eventHandler, false);
function eventHandler(event){
// 서버가 전송한 시간을 화면에 표시
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id="sse">
<eventsource src="/cgi-bin/ticker.cgi" />
</div>
<div id="ticker" name="ticker">
[TIME]
</div>
</body>
</html>서버 측 스크립트(ticker.cgi)
마지막으로 PERL로 작성된 ticker.cgi 서버 스크립트는 다음과 같습니다. 이 스크립트는 5초마다 현재 서버 시간을 이벤트 스트림으로 전송합니다.
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true){
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}핵심 정리
서버 전송 이벤트는 HTTP 응답 헤더를 text/event-stream으로 설정하고, Event:와 Data: 형식으로 메시지를 반복 전송하는 것이 핵심입니다. 클라이언트에서는 addEventListener로 특정 이벤트 이름을 구독하여 수신된 데이터를 처리하면 됩니다. WebSocket과 달리 별도의 프로토콜 업그레이드가 필요 없고 자동 재연결을 지원하기 때문에, 단순한 실시간 데이터 푸시에는 SSE가 더 간편한 선택이 될 수 있습니다.