HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 서버가 보내는 이벤트

HTML5 서버가 보내는 이벤트(서버-sent event)를 통해 웹 페이지가 서버에서 최신 데이터를 받을 수 있으며, 웹 페이지를 새로고침 없이 동적으로 최신 데이터를 가져올 수 있습니다.

서버-Sent 이벤트 - 단방향 메시지 전달

서버-Sent 이벤트는 웹 페이지가 서버에서 자동으로 데이터 업데이트를 가져오는 것을 의미합니다.

전통적으로 서버의 최신 데이터를 가져오는 방법은 새로고침이나 타이머를 통해 이벤트를 트리거하여 최신 데이터를 가져오는 방법입니다. 하지만 지금은 서버가 보내는-Sent 이벤트를 통해 최신 데이터를 자동으로 가져올 수 있습니다.

예제: Facebook/트위터 업데이트, 주식 시세, 웨이보, 스포츠 경기 결과, 동적 메시지, 댓글 등.

브라우저 지원

모든 주요 브라우저는 서버가 보내는 이벤트를 지원하지만, 인터넷 익스플로어러는 제외됩니다.

서버-Sent 이벤트 알림

EventSource 객체는 서버가 보내는 이벤트 알림을 수신하기 위해 사용됩니다:

예제

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>
</head>
<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="죄송합니다, 브라우저는 Server를 지원하지 않습니다-sent　이벤트...";
}
</script>
</body>
</html>

테스트해 보세요 ‹/›

예제 설명:

새로운 EventSource 객체를 생성한 후, 업데이트를 전송하는 페이지의 URL(이 예제에서는 "demo_sse.php")을 지정합니다
갱신을 수신할 때마다 onmessage 이벤트가 발생합니다
onmessage 이벤트가 발생할 때마다 수신된 데이터를 "result" id를 가진 요소에 넣습니다

Server 검사-Sent 이벤트 지원

다음 예제에서는, 서버가 전송하는 이벤트의 브라우저 지원 여부를 검사하기 위해 추가 코드를 작성했습니다:

if(typeof(EventSource)!=="undefined")
{
　　　　//　브라우저는 Server를 지원합니다-Sent
　　　　//　일부 코드.....
}
else
{
　　　　//　브라우저는 Server를 지원하지 않습니다-Sent..
}

서버 측 코드 예제

위의 예제가 실행되기 위해, 데이터 업데이트를 전송할 수 있는 서버(예: PHP와 ASP)가 필요합니다.

서버 측 이벤트 스트림의 문법은 매우 간단합니다. "Content-Type" 헤더를 "text/event-stream". 지금부터 이벤트 스트림을 전송할 수 있습니다.

온라인 예제

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server current time: {$time}\n\n";
flush();
?>

ASP 코드 (VB) (demo_sse.asp):

<%}
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: The server current time" & now())
Response.Flush()
%>

코드 설명:

헤더 "Content-Type"을 "text"으로 설정/event-stream"
페이지를 캐시하지 않도록 정의
보내진 날짜 출력（"data: "로始まる 것을 항상 포함합니다）
웹페이지에 데이터를 새로 고침하여 출력

EventSource 객체

위의 예제에서는 onmessage 이벤트를 사용하여 메시지를 가져옵니다. 다른 이벤트도 사용할 수 있습니다:

이벤트	설명
onopen	서버로 향한 연결이 열릴 때
onmessage	메시지를 수신할 때
onerror	에러가 발생할 때

HTML5 WebSocket HTML5 Web Workers