HTML5-서버 전송 이벤트
기존 웹 응용 프로그램은 웹 서버로 전달되는 이벤트를 생성합니다. 예를 들어 링크를 간단히 클릭하면 서버에서 새 페이지를 요청합니다.
웹 브라우저에서 웹 서버로 흐르는 이벤트 유형을 클라이언트 전송 이벤트라고 할 수 있습니다.
HTML5와 함께 WHATWG Web Applications 1.0은 웹 서버에서 웹 브라우저로 이동하는 이벤트를 소개하며이를 SSE (Server-Sent Events)라고합니다. SSE를 사용하면 웹 서버에서 방문자의 브라우저로 DOM 이벤트를 지속적으로 푸시 할 수 있습니다.
이벤트 스트리밍 접근 방식은 서버에 대한 지속적인 연결을 열어 새로운 정보가 사용 가능할 때 데이터를 클라이언트로 전송하므로 지속적인 폴링이 필요하지 않습니다.
서버 전송 이벤트는 서버에서 클라이언트로 데이터를 스트리밍하는 방법을 표준화합니다.
SSE 용 웹 애플리케이션
웹 응용 프로그램에서 서버 전송 이벤트를 사용하려면 문서에 <eventsource> 요소를 추가해야합니다.
그만큼 src <eventsource> 요소의 속성은 이벤트를 포함하는 데이터 스트림을 보내는 지속적인 HTTP 연결을 제공해야하는 URL을 가리켜 야합니다.
URL은 이벤트 데이터를 지속적으로 전송하는 PHP, PERL 또는 Python 스크립트를 가리 킵니다. 다음은 서버 시간을 예상하는 웹 애플리케이션의 간단한 예입니다.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
/* Define event handling logic here */
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker">
<TIME>
</div>
</body>
</html>SSE 용 서버 측 스크립트
서버 측 스크립트는 Content-type다음과 같이 text / event-stream 유형을 지정하는 헤더 .
print "Content-Type: text/event-stream\n\n";Content-Type을 설정 한 후 서버 측 스크립트는 Event: 태그 뒤에 이벤트 이름이 표시됩니다. 다음 예제는 새 줄 문자로 끝나는 이벤트 이름으로 Server-Time을 보냅니다.
print "Event: server-time\n";마지막 단계는 다음을 사용하여 이벤트 데이터를 보내는 것입니다. Data: 다음과 같이 개행 문자로 끝나는 문자열 값의 정수가 뒤에 오는 태그-
$time = localtime();
print "Data: $time\n";마지막으로 다음은 Perl로 작성된 완전한 ticker.cgi입니다.
#!/usr/bin/perl
print "Content-Type: text/event-stream\n\n";
while(true) {
print "Event: server-time\n";
$time = localtime();
print "Data: $time\n";
sleep(5);
}서버에서 보낸 이벤트 처리
서버에서 보낸 이벤트를 처리하도록 웹 애플리케이션을 수정하겠습니다. 다음은 마지막 예입니다.
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
document.getElementsByTagName("eventsource")[0].addEventListener("server-time",
eventHandler, false);
function eventHandler(event) {
// Alert time sent by the server
document.querySelector('#ticker').innerHTML = event.data;
}
</script>
</head>
<body>
<div id = "sse">
<eventsource src = "/cgi-bin/ticker.cgi" />
</div>
<div id = "ticker" name = "ticker">
[TIME]
</div>
</body>
</html>Server-Sent 이벤트를 테스트하기 전에 웹 브라우저가이 개념을 지원하는지 확인하는 것이 좋습니다.