[PHP] 실시간 새로고침 SSE( Server-Sent Events) 이용하기

이번에 처음으로 사용하게 되었는데 나중에 푸시기능으로도 유용하게 쓰일것 같아서 기록 해둔다

통신 쪽으로는 젬병이라 아무것도 모르지만 대충 찾아보니 채팅 같이 서로 주거니 받거니 해야되는건 웹소켓이 짱이고

일방적으로 한쪽에서 받기만 하는거는 SSE 가 낫다는거같다

 

개념 적인 설명글은 나보다도 훨씬 잘 정리해두신 대단하신분의 글이 있어서 첨부를 해둔다

사실 밑에꺼 보면 이 글을 끝까지 읽을 필요도 없다 아래 글에 워낙 정리가 잘되어있기 때문

다만 이 글은 PHP 로 어떻게 같이 쓰였는지에 대해 정리를 해놓으려한다

 

hamait.tistory.com/792

[웹개발] SSE ( Server-Sent Events) 란 무엇인가

 

왜 SSE 를 사용하게 되었는가 ?

 

실시간으로 데이터를 모니터링 할 사이트가 필요하였는데, F5 눌러서 보시면 됩니다 하기엔 자존심이 상해서 찾았다

뭐 사실 setTimeOut 으로 새로고침을 시킬수도 있었겠지만 , 이건 개인 스타일 차이겠지만 난 페이지 전체가 새로고침 되면서 깜빡이는거 정말~ 정말 싫어한다

 

그러다가 처음엔 ajax 로 실시간으로 받아올수 있지 않을까 싶어서 일반적인 ajax를 사용하는건 너무 서버에 무리가 갈거같아서 다른 쪽으로 없을까 싶어서 찾다가 SSE 를 적용하게 되었다. 사실 뭐 SSE 도 ajax 기반이다

 

data_list.php 의 script 부분

if(typeof(EventSource) !== "undefined") {
  //날짜 검색시 사용
  searchDate 		= $("#searchDate").val();
  //sse 로 가져올 페이지, 파라미터로 날짜 같이 보냄
  var source = new EventSource("/ajax/data_list.php?searchDate="+searchDate);
  
  //결과값 받아와서 data_list 라는 id element 에 html 바꿔줌
  source.onmessage = function(event) {    
  	document.getElementById("data_list").innerHTML = event.data;         
  };
}

 

/ajax/data_list.php 부분

//헤더 필수 선언
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
	

//받아온 파라미터로 DB 쿼리문 돌림

//while 문 돌리면서 결과값 $myData 에 차곡차곡 쌓음
$myData .= "";

// retry와 data 뿌려줌
echo "retry:60000\ndata:".$myData."\n\n";

flush();

DB 연동 및 while 문 돌리는거에서 막힐일은 없을테니 생략한다.

저렇게 쭈욱 돌리면 결국은 아래처럼 값이 들어간걸 고대로 전달해주는 식이다

$myDate = "<tr><td>1</td></tr><tr><td>2</td></tr>";

받는 페이지에서 값을 return 할때 json 형태로 줘도 되고 아니면 위처럼 해도 잘 가져온다

retry 는 보다시피 저만큼 이후에 다시 재시도 하겠다는 뜻이고 나는 60초로 잡았다

data 는 말그대로 저 해당 데이터다 정해진 변수명이여서 저대로 사용해야한다

 

참, 익스에선 안먹습니다. 익스 빨리 죽어라