자바스크립트 "Server Sent Events API"

SSE(Server-Sent Events) API는 서버가 실시간으로 단일 HTTP 연결을 통해 클라이언트 브라우저에 데이터를 푸시할 수 있도록 하는 웹 기술입니다. 클라이언트 브라우저는 브라우저에서 제공하는 EventSource 인터페이스를 사용하여 이러한 이벤트를 수신합니다.

​

다음은 JavaScript와 함께 SSE API를 사용하는 방법의 예입니다.

​

// create a new EventSource object with the URL of the server-side script

const eventSource = new EventSource("/events.php");

​

// handle the 'message' event

eventSource.addEventListener("message", function(event) {

console.log("New message: ", event.data);

});

​

// handle the 'open' event

eventSource.addEventListener("open", function(event) {

console.log("Connection opened.");

});

​

// handle the 'error' event

eventSource.addEventListener("error", function(event) {

console.log("Error occurred: ", event);

});

​

위의 예에서는 새 `EventSource` 개체를 만들고 이벤트를 보낼 서버측 스크립트의 URL을 전달합니다. 그런 다음 `message`, `open` 및 `error`의 세 가지 이벤트를 수신합니다.

​

서버가 이벤트를 보내면 `message` 이벤트 리스너가 트리거되고 `event.data` 속성을 사용하여 서버에서 보낸 데이터를 검색할 수 있습니다. `open` 이벤트 리스너는 서버와 연결되면 발생하고, `error` 이벤트 리스너는 연결에 오류가 있을 때 발생합니다.

​

서버 측에서는 PHP와 같은 프로그래밍 언어를 사용하여 이벤트를 보낼 수 있습니다. 다음은 매 초마다 클라이언트에 난수를 보내는 PHP 스크립트의 예입니다.

​

<?php

​

header("Content-Type: text/event-stream");

header("Cache-Control: no-cache");

header("Connection: keep-alive");

​

while (true) {

$data = rand(1, 100);

echo "data: {$data}\n\n";

flush();

sleep(1);

}

​

?>

​

이 스크립트에서는 먼저 콘텐츠 유형을 `text/event-stream`으로 설정하여 서버에서 보낸 이벤트를 예상하도록 브라우저에 알립니다. 또한 캐싱을 방지하고 연결을 유지하기 위해 일부 헤더를 설정합니다.

​

다음으로 임의의 숫자를 생성하고 `data` 필드를 사용하여 클라이언트에 보내는 무한 루프에 들어갑니다. 그런 다음 출력 버퍼를 플러시하여 데이터를 즉시 보내고 다음 이벤트를 보내기 전에 1초 동안 휴면합니다.

​

이 설정을 사용하면 클라이언트 브라우저는 서버에서 이벤트를 수신하고 새 데이터에 대해 서버를 지속적으로 폴링하지 않고도 실시간으로 UI를 업데이트합니다.