SSE(Server-Sent Events)를 통해 웹 페이지가 서버에서 업데이트를 가져올 수 있다.
Server-Sent Events - 단방향 메시징
서버에서 발송된 이벤트는 웹 페이지가 자동으로 서버에서 업데이트를 받는 경우이다.
이는 이전에도 가능했지만 웹 페이지에서 사용 가능한 업데이트가 있는지 문의해야 한다. 서버에서 보낸 이벤트의 경우 업데이트가 자동으로 수행된다.
예: Facebook/Twitter 업데이트, 주가 업데이트, 뉴스 피드, 스포츠 결과 등.
Server-Sent 이벤트 알림 수신
EventSource 개체는 서버에서 보낸 이벤트 알림을 수신하는 데 사용된다:
| <!DOCTYPE html> <html> <body> <h1>서버 업데이트 가져오기</h1> <div id="result"></div> <script> if(typeof(EventSource) !== "undefined") { var source = new EventSource("demo_sse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script> </body> </html> |
- 새 EventSource 개체를 만들고 업데이트를 보내는 페이지의 URL을 지정한다(이 예에서는 "demo_sse.php")
- 업데이트가 수신될 때마다 on message 이벤트가 발생한다
- 온 메시지 이벤트가 발생하면 수신된 데이터를 id="result" 요소에 넣는다
아래 그림은 상기 코드를 실행한 화면이다.
Server-Sent 이벤트 지원 확인
위의 tryit 예제에서는 서버에서 보낸 이벤트에 대한 브라우저 지원을 확인하기 위한 코드 행이 추가되었다:
| if(typeof(EventSource) !== "undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } |
Server-Side 코드 예제
위의 예제가 작동하려면 데이터 업데이트(예: PHP 또는 ASP)를 전송할 수 있는 서버가 필요하다.
서버 측 이벤트 스트림 구문은 간단하다. 내용 유형 헤더를 "텍스트/이벤트 스트림"으로 설정한다. 이제 이벤트 스트림 전송을 시작할 수 있다.
PHP의 코드(demo_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(); ?> |
Code in ASP (VB) (demo_sse.asp):
| <% Response.ContentType = "text/event-stream" Response.Expires = -1 Response.Write("data: The server time is: " & now()) Response.Flush() %> |
코드 설명:
- 내용 유형 헤더를 "텍스트/이벤트 스트림"으로 설정
- 페이지가 캐시되지 않도록 지정
- 전송할 데이터 출력(항상 "data:"로 시작)
- 출력 데이터를 웹 페이지로 다시 플러시합니다
EventObject Source
위의 예에서는 onmessage 이벤트를 사용하여 메시지를 받았다. 그러나 다른 이벤트도 사용할 수 있다:
| 이벤트 | 설명 |
| onopen | 서버에 대한 연결이 열렸을 때 |
| onmessage | 메시지를 수신할 때 |
| onerror | 오류 발생 시 |
HTML SSE(Server-Sent Event) API에 관련하여 살펴보았다.
간략한 예제도 꼭 실습해보세요
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML Web Workers API (0) | 2023.06.26 |
|---|---|
| HTML 웹 스토리지 API(HTML Web Storage API) (0) | 2023.06.25 |
| HTML Drage and Drop API (0) | 2023.06.24 |
| HTML 위치 API(Geolocation API) (0) | 2023.06.23 |
| HTML 유튜브(Youtube) (0) | 2023.06.22 |
댓글