Server-Sent Events

Server-Sent Events

• HTTP 환경에서 서버로부터 데이터 푸시를 실제와 비슷하게 지원하기 위한 API
• 서버로부터 푸시된 데이터를 수신하여 DOM 이벤트처럼 처리 할 수 있다.
• 서버로 부시될 데이터의 형식은 엄격하게 정해져 있고, 여러 줄로 구성된 일반 텍스트 형식

Server-Sent Events 동작

• 지정된 URL에 대한 정기적으로 GET 요청을 실행한다.
• 요청을 받은 서버는 데이터를 응답으로 돌려준다.
• 응답을 받으면 내용을 파싱한 다음 message 이벤트를 발생시킨다. 그리고 접속이 종료되면 일정 시간이 지나고 나서 1. 을 재시도한다.

Server-Sent Events 사용법

• 정기적으로 GET요청을 할 URL을 지정하여 EventSource 객체를 생성한다.
  - var eventSource = new EventSource(“data.php”);
• 서버로부터 데이터 받기
  - eventSource.onmessage = function() { // 수신데이터 처리 }
• 서버 쪽 처리 예(PHP)

<?php
	header("Content-Type: text/event-stream");
	echo “data : 클라이언트로 전송할 데이터”;
?>

서버로부터의 푸시 데이터 형식

• Text/event-stream이라는 ContentType으로 보냄
• 문자 인코딩은 UTF-8로 고정
• 줄 바꿈 코드는 ‘\r\n’, ‘\n’, ‘\r’ 어느 것이라도 유효함
• ‘:’ 으로 시작하는 줄은 주석
• 빈 줄이나 파일 끝은 이벤트 구분자가 됨
• 주석이나 빈 줄 이외는 ‘필드이름’ : ‘필드값’ 형식으로 작성

ServerSentEvents.html

	window.onload = function() {
		if(navigator.appName == "Opera") {
			document.getElementsByTagName("event-source")[0].addEventListener("server-time", function(event) {
				document.getElementById("message").innerHTML += event.data + "<br/>";
			}, false);
		} else {
			var source = new EventSource("messages.php");
			source.onmessage = function(event) {
				document.getElementById("message").innerHTML += event.data + "<br/>";
			}
		}
	}

Server-Sent Events

 

messages.php

<?php
	header("Content-Type: text/event-stream");
	echo "retry: 2000\n";
	echo "data: ".date('Y/m/d h:i:s')."\n";
?>
​

 

 

 

안드로이드 게임들(Android games)