HTML Server-Sent 이벤트

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

Server-Sent 이벤트 - One Way Messaging

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 오류가 발생할 때