[HTML] Server Sent Events API

Language/HTML

[HTML] Server Sent Events API

arajo 2022. 9. 21. 18:15

728x90

Server Sent Events API

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

server sent events 지원 여부 확인

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

if (typeof(EventSource) !== "undefined") {
    // server sent events를 위한 코드 부분
} else {
    // server sent events를 지원하지 않는 브라우저를 위한 안내 부분
}

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

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>HTML5 API Server Sent Events</title>
</head>

<body>

    <h1>server sent events를 이용한 자동 갱신</h1>

    <div id="result"></div>
    <script>
        if(typeof(EventSource) !== "undefined") {
        	var source = new EventSource("/examples/media/sse.php");
        	source.onmessage = function(event) {
        		document.getElementById("result").innerHTML += event.data + "<br>";
        	};
        } else {
        	document.getElementById("result").innerHTML = "이 문장은 사용자의 웹 브라우저가 Server Sent Events를 지원하지 않을 때 나타난다.";
        }
    </script>
</body>

</html>

위의 예제에서 사용한 서버 측 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();
?>