[api] HTML5 - Server-Sent Event - 서버전송이벤트 (= 서버센트이벤트)

1. Server-Sent Event 예제 (예: open, message)
2. Server-Sent Event 정의
3. Server-Sent Event 종류 (= EventSource Object 종류)

Server-Sent Event 예제 (예: open, message)

 

<h1 id="hz"></h1>

<div id="s_time"></div>

<script>

if(typeof(EventSource) !== "undefined") { // Server-Sent Event 지원여부 체크

  var source = new EventSource("/server_time.php");

  source.onopen = function() {

    document.getElementById("hz").innerHTML = "홈짱닷컴 (Homzzang.com) 서버갱신시간";

  };

  

  source.onmessage= function(event) {

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

  };

} else {

  document.getElementById("s_time").innerHTML = "서버전송이벤트 지원않는 브라우저는 개나 줘버려.";

}

</script>

 

---

/server_time.php 소스

 

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: 서버 시간 : {$time}\n\n";

flush();

?>

Server-Sent Event 정의

 

서버가 보낸 이벤트는 웹페이지가 자동으로 업데이트되도록 해줌.

 

---

 

1.
(예) Facebook/Twitter 업데이트, 주가 업데이트, 뉴스 피드, 스포츠 결과 등

 

2.

IE 제외한 주요 최신 브라우저 모두 지원.

 

Server-Sent Event 종류 (= EventSource Object 종류)

 

onopen

서버와의 연결이 열린 경우.

 

onmessage

메시지가 수신 될 때.

 

onerror

오류가 발생했을 때.