HTML5 서버 전송 이벤트
HTML5 서버 전송 이벤트를 사용하면 웹페이지가 서버에서 업데이트를 받을 수 있습니다.
브라우저 지원
Internet Explorer를 제외한 모든 주요 브라우저는 서버에서 보내는 이벤트를 지원합니다.
서버 전송 이벤트 - 단방향 메시징
서버 전송 이벤트는 서버에서 자동으로 업데이트를 받는 웹페이지를 의미합니다.
이전에도 웹페이지에서 업데이트가 있는지 물어봐야 했던 경우에도 가능했습니다. 서버를 통해 이벤트를 보내면 업데이트가 자동으로 도착할 수 있습니다.
예: Facebook/Twitter 업데이트, 평가 업데이트, 새 블로그 게시물, 이벤트 결과 등
클라이언트측 서버에서 보낸 데이터를 가져와서
<!DOCTYPE html>
<html>
<body>
<h1>获得服务器更新</h1>
<div id="result">
</div>
<script>if(typeof(EventSource)!=="undefined"){
var source=new EventSource("http://www.w3school.com.cn/example/html5/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>업데이트합니다. 지원하는 서버 코드(PHP 또는 ASP)는 다음과 같습니다.
<?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();
?>코드 설명:
헤더 "Content-Type"을 "text/event-stream"으로 설정
페이지가 캐시되지 않도록 지정
전송 날짜 출력(항상 "data로 시작) : ")
웹 페이지의 출력 데이터 새로 고침
서버 전송 이벤트 지원 감지
다음 예에서는 다음과 같이 썼습니다. 서버에서 보낸 이벤트를 감지하기 위한 추가 코드 조각 브라우저 지원:
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 time is: {$time}\n\n";flush();
?>
ASP 代码 (VB) (demo_sse.asp):
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>코드 설명:
헤더 "Content-Type"을 "text/event-stream"으로 설정
페이지가 캐시되지 않음
출력 전송 날짜(항상 "data: "로 시작)
웹 페이지로 출력 데이터 새로 고침
EventSource 개체
In 위의 예에서는 onmessage 이벤트를 사용하여 메시지를 가져옵니다. 그러나 다른 이벤트를 사용할 수도 있습니다.
이벤트 설명
onopen 서버에 대한 연결이 열릴 때
onmessage 메시지를 받았을 때
onerror 오류가 났을 때
