웹 애플리케이션에서 서버 전송 이벤트(Server-Sent Events, SSE)를 사용하려면 문서에 <eventsource> 요소를 추가해야 합니다.
eventsource 요소 설정 방법
<eventsource> 요소의 src 속성에는 이벤트가 담긴 데이터 스트림을 지속적으로 전송하는 영구(persistent) HTTP 연결을 제공하는 URL을 지정해야 합니다.
이 URL은 일반적으로 PHP, Perl, Python 등으로 작성된 서버 측 스크립트를 가리키며, 해당 스크립트가 클라이언트로 이벤트 데이터를 끊김 없이 전달하는 역할을 담당합니다.
예제: 서버 시간 표시하기
다음은 서버에서 전송되는 시간 정보를 받아 화면에 표시하는 간단한 애플리케이션 예제입니다.
<!DOCTYPE HTML> <html> <head> <script> /* 여기에 이벤트 처리 로직을 정의합니다 */ </script> </head> <body> <div id="sse"> <eventsource src="/cgi-bin/ticker.cgi" /> </div> <div id="ticker"> <TIME> </div> </body> </html>
참고: 최신 브라우저에서는 EventSource API 권장
<eventsource> 요소는 초기 HTML5 초안에서 제안되었지만 현재 표준 사양에서는 제외되었습니다. 따라서 실무 환경에서는 자바스크립트의 EventSource 객체를 사용해 동일한 기능을 구현하는 것이 좋습니다.
const source = new EventSource('/cgi-bin/ticker.cgi');
source.onmessage = function(event) {
document.getElementById('ticker').innerHTML = event.data;
};
SSE는 서버에서 클라이언트 방향으로만 데이터를 밀어주는 단방향 통신 기술로, 실시간 알림, 주식 시세, 뉴스 피드처럼 지속적으로 갱신되는 데이터를 다룰 때 특히 유용합니다. WebSocket과 달리 일반 HTTP 위에서 동작하기 때문에 구현이 간단하고, 연결이 끊겼을 때 자동으로 재연결을 시도하는 기능도 기본적으로 제공됩니다.