-
728x90반응형
Server Sent Events
Server Sent Events API
server sent events API는 웹 페이지가 서버로부터 갱신된 정보를 자동으로 받을 수 있도록 설정한다.
server sent events를 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
API server sent events 지원안함 6.0 6.0 5.0 11.5 Server Snet Events 지원 여부 확인
server sent events를 사용하기 전에, 우선 사용자의 웹 브라우저가 이를 지원하는지 안 하는지 확인해야 한다.
문법
if (typeof(EventSource) !== "undefined") {
// server sent events를 위한 코드 부분
}
else {
// server sent events를 지원하지 않는 브라우저를 위한 안내 부분
}다음 예제는 server sent events를 이용해 5초마다 웹 페이지를 갱신하는 예제이다.
🔔 예제)
<!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 파일은 다음과 같다.
🔔 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( ); ?>728x90반응형'Mark Up > Html' 카테고리의 다른 글
Web Worker (0) 2018.10.15 Application Cache (0) 2018.10.12 Web Storage (0) 2018.10.11 Drag and Drop (0) 2018.10.11 Geolocation (0) 2018.10.11
