HTML5 Server-Sent Events 서버 푸쉬

HTML5 Server-Sent Events 서버 푸쉬

익스플로러는 미지원이므로 AJAX를 이용하는게 좋을 것 같음

▶ SSE 와 AJAX 차이점

SSE : 브라우저에서 한 번만 호출하면 서버단에서 루프를 돌면서 데이터를 체크하고 전달할 데이터가 있으면

클라이언트(브라우저)로 값을 전달해준다.

서버 사이드에서 WHILE 문으로 무한 체크할 수도 있으며,

서버에서 처리가 끝나면 자동으로 다시 호출되니깐 이런 방법을 사용하여도 된다.

AJAX : 브라우저에서 일정 간격으로 매번 서버에 데이터를 요청하는 폴링(Polling)방식이므로 매번 패킷이 발생하게 된다.

자바스크립트의 setTimeout 함수를 이용할 수도 있지만 브라우저가 SSE를 지원한다면 사용해 보자.

1. HTML

<script>

var SSESource = null;

function server_check() {

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

var notiLayer = document.getElementById('notiLayer');

if(SSESource != null) SSESource.close(); // 함수가 다시 호출될 때 Close 해주고

SSESource = new EventSource('server_check.php');

SSESource.onmessage = function(event) {

if(event.data) {

var arr = JSON.parse(event.data);

var msg = event.msg;

if(msg) {

notiLayer.innerHTML = msg;

}

}

};

}

}

$(document).ready(function(){

server_check();

});

$(window).unload(function(){

if(SSESource != null) {

SSESource.close();

}

});

</script>

<div id="notiLayer"></div>

완전한 html 코드가 아니라 자바스크립트 소스 중 일부이다.

2. PHP

<?php

function sendMessage($data) {

echo "data: $data\n\n";

ob_flush();

flush();

}

function serverCheck() {

$ret = array();

$ret['ret'] = "success";

$ret['msg'] = "메시지";

return json_encode($ret);

}

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

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

$_i = 60; // sleep 5초 * 60 = 300초 (5분)

while($_i--) {

$ret = serverCheck();

if($ret) {

sendMessage($ret);

}

sleep(5);

}

?>

위의 소스를 보면 serverCheck 함수에서 항상 같은 값을 리턴을 한다.

입맛에 적당히 알맞게 수정해서 테스트 하여야 한다.