HTML Server-Sent 이벤트

Server-Sent 이벤트는 웹 페이지가 서버에서 업데이트를 받을 수 있도록 허용합니다.

Server-Sent 이벤트 - 방향성 메시지 전송

Server-Sent 이벤트는 웹 페이지가 자동으로 서버에서 업데이트를 받는 것을 의미합니다.

이전에는 이를 위해 웹 페이지가 사용 가능한 업데이트가 있는지 확인해야 했습니다. Server-Sent 이벤트를 통해 업데이트가 자동으로 도착할 수 있습니다.

예를 들어: Facebook/Twitter 업데이트, 주식 가격 업데이트, 새로운 블로그 게시물, 경기 결과 등.

브라우저 지원

표에서의 숫자는 서버가 전송하는 이벤트를 완전히 지원하는 첫 번째 브라우저를 나타냅니다.

API
SSE 6.0 지원하지 않음 6.0 5.0 11.5

Server-Sent 이벤트를 수신

EventSource 객체는 서버가 전송하는 이벤트를 수신하기 위해 사용됩니다:

예제

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

직접 시도해 보세요

예제 설명:

  • 새로운 EventSource 객체를 생성한 후, 업데이트를 전송하는 페이지의 URL(이 예제에서는 "demo_sse.php")을 지정합니다
  • 다음과 같이 각각의 업데이트를 수신할 때마다 onmessage 이벤트가 발생합니다
  • onmessage 이벤트가 발생할 때마다 수신된 데이터를 "result" ID를 가진 요소에 넣습니다

Server-Sent 이벤트 지원 검사

TIY 예제에서는 서버가 이벤트를 전송하는 브라우저 지원을 검사하기 위해 추가 코드를 작성했습니다:

if(typeof(EventSource) !== "undefined") {
    // 예! 서버가 이벤트를 전송합니다!
    // 일부 코드.....
} else {
    // 죄송합니다! 서버가 이벤트를 전송하지 않습니다!
}

서버 단 콘테이너 예제

위의 예제를 실행하려면 데이터 업데이트를 전송할 수 있는 서버(예: PHP나 ASP)가 필요합니다.

서버 단쪽 이벤트 스트림의 문법은 매우 간단합니다. "Content-Type" 헤더를 "text/event-stream"로 설정하세요. 이제, 이벤트 스트림을 전송하시기 시작하실 수 있습니다.

PHP에서의 코드 (demo_sse.php)：

<?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();
?>

ASP에서의 코드 (VB) (demo_sse.asp)：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

코드 설명:

  • 헤더 "Content-Type"을 "text/event-stream"로 설정
  • 페이지를 캐시하지 않도록 설정
  • 보내려는 날짜를 출력해야 합니다（항상 "data: "로 시작합니다）
  • 웹 페이지 새로 고침에 데이터 출력

EventSource 객체

상기 예제에서는 onmessage 이벤트를 사용하여 메시지를 얻습니다. 다른 이벤트도 사용할 수 있습니다:

이벤트 설명
onopen 서버와의 연결이 열릴 때
onmessage 메시지를 수신할 때
onerror 오류가 발생할 때