HTML5 서버에서 보낸 이벤트

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 오류가 났을 때

지속적인 학습