HTML SSE API

SSE(Server-Sent Events)는 웹 페이지가 서버로부터 실시간으로 업데이트를 받을 수 있도록 하는 기술이다. 채팅, 알림 및 대시보드와 같은 양방향 실시간 애플리케이션을 구축하는 간단하고 효율적인 방법이다.

<script>
  var eventSource = new EventSource("server.php");
  
  eventSource.onmessage = function(event) {
    console.log(event.data);
  }
</script>

이 예에서는 이벤트를 인수로 처리할 서버 측 스크립트의 URL을 전달하여 새 EventSource 개체를 만든다. 그런 다음 스크립트는 서버로부터 수신된 메시지를 처리하도록 메시지 수신기를 설정한다.

서버 측에서는 이벤트를 전송하는 스크립트, 즉 PHP 스크립트 또는 HTTP 요청을 처리할 수 있는 다른 서버 측 언어를 사용해야 한다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

이 스크립트는 스크립트가 요청될 때마다 현재 서버 시간이 포함된 메시지를 클라이언트에 보낸다.

SSE는 HTTP를 통해 작동하며 클라이언트에서 서버로 단일 단방향 연결을 열고 최신 브라우저에서만 지원된다는 점을 언급할 필요가 있다.

또한 SSE는 WebSockets에 대한 간단하고 가벼운 대안으로, 단순한 실시간 애플리케이션에 유용하지만 양방향 통신, 낮은 대기 시간 및 높은 처리량이 필요하거나 복잡한 사용 사례에는 적합하지 않다.