..

Search

46) Server Sent Events

Server Sent Events


Server Sent Events API

server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정합니다.

 

server sent events를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

API ie chrome firefox safari opera
server sent events 지원안함 6.0 6.0 5.0 11.5

server sent events 지원 여부 확인

server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 합니다.

문법

if (typeof(EventSource) !== "undefined") {

    // server sent events를 위한 코드 부분

} else {

    // server sent events를 지원하지 않는 브라우저를 위한 안내 부분

}

 

다음 예제는 server sent events를 이용해 5초마다 웹 페이지를 갱신하는 예제입니다.

예제

if(typeof(EventSource) !== "undefined") {

    var source = new EventSource("/examples/media/sse.php");

    source.onmessage = function(event) { 

        document.getElementById("result").innerHTML += event.data + "<br>"

    };

}

코딩연습 ▶

 

위의 예제에서 사용한 서버 측 PHP 파일인 sse.php 파일은 다음과 같습니다.

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

?>


연습문제