HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML SSE API


SSE(Server-Sent Events)를 사용하면 웹 페이지가 서버에서 업데이트를 가져올 수 있습니다.


서버에서 보낸 이벤트 - 단방향 메시징

서버에서 보낸 이벤트는 웹 페이지가 서버에서 자동으로 업데이트를 받는 경우입니다.

이것은 이전에도 가능했지만 웹 페이지에서 사용 가능한 업데이트가 있는지 물어야 합니다. 서버에서 보낸 이벤트를 사용하면 업데이트가 자동으로 제공됩니다.

예: Facebook/Twitter 업데이트, 주가 업데이트, 뉴스 피드, 스포츠 결과 등


브라우저 지원

표의 숫자는 서버에서 보낸 이벤트를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

API
SSE 6.0 79.0 6.0 5.0 11.5

서버에서 보낸 이벤트 알림 수신

EventSource 개체는 서버에서 보낸 이벤트 알림을 수신하는 데 사용됩니다.

예시

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
  document.getElementById("result").innerHTML += event.data + "<br>";
};

설명된 예:

  • 새 EventSource 개체를 만들고 업데이트를 보내는 페이지의 URL을 지정합니다(이 예에서는 "demo_sse.php").
  • 업데이트가 수신될 때마다 onmessage 이벤트가 발생합니다.
  • onmessage 이벤트가 발생하면 수신된 데이터를 id="result"인 요소에 넣습니다.

서버 전송 이벤트 지원 확인

위의 tryit 예제에는 서버에서 보낸 이벤트에 대한 브라우저 지원을 확인하기 위한 몇 가지 추가 코드 줄이 있었습니다.

if(typeof(EventSource) !== "undefined") {
  // Yes! Server-sent events support!
  // Some code.....
} else {
  // Sorry! No server-sent events support..
}


서버 측 코드 예

위의 예가 작동하려면 데이터 업데이트를 보낼 수 있는 서버(예: PHP 또는 ASP)가 필요합니다.

서버측 이벤트 스트림 구문은 간단합니다. "Content-Type" 헤더를 "text/event-stream"으로 설정합니다. 이제 이벤트 스트림 전송을 시작할 수 있습니다.

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();
?>

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

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

코드 설명:

  • "Content-Type" 헤더를 "text/event-stream"으로 설정합니다.
  • 페이지가 캐시되지 않도록 지정
  • 보낼 데이터 출력( 항상 "data: "로 시작)
  • 출력 데이터를 다시 웹 페이지로 플러시

이벤트 소스 개체

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

Events Description
onopen When a connection to the server is opened
onmessage When a message is received
onerror When an error occurs