서버 전송 이벤트(SSE)는 HTTP 연결을 통해 서버에서 클라이언트로 자동 업데이트를 전송합니다. 연결이 설정되면 서버에서 데이터 전송을 시작할 수 있습니다.
SSE를 사용하여 웹 앱에서 푸시 알림을 전송할 수 있습니다. SSE는 한 방향으로만 정보를 전송하므로 클라이언트로부터 업데이트를 수신하지 못합니다.
SSE의 개념은 익숙할 수 있습니다. 웹 앱은 서버에서 생성된 업데이트 스트림을 '구독'하고 새 이벤트가 발생할 때마다 알림이 클라이언트로 전송됩니다. 하지만 서버에서 전송하는 이벤트를 제대로 이해하려면 이전의 AJAX의 제한사항을 이해해야 합니다. 여기에는 다음이 포함됩니다.
폴링: 애플리케이션이 서버에서 데이터를 반복적으로 폴링합니다. 이 기법은 대부분의 AJAX 애플리케이션에서 사용됩니다. HTTP 프로토콜을 사용하면 데이터 가져오기가 요청 및 응답 형식을 중심으로 이루어집니다. 클라이언트는 요청을 하고 서버가 데이터로 응답할 때까지 기다립니다. 사용할 수 있는 항목이 없으면 빈 응답이 반환됩니다. 추가 폴링을 하면 HTTP 오버헤드가 더 커집니다.
롱 폴링 (대기 중인 GET / COMET): 서버에 사용 가능한 데이터가 없는 경우 서버는 새 데이터를 사용할 수 있을 때까지 요청을 열어 둡니다. 따라서 이 기법을 'Hanging GET'이라고도 합니다. 정보가 사용 가능해지면 서버가 응답하고 연결을 닫으며 프로세스가 반복됩니다. 따라서 서버는 계속해서 새 데이터로 응답합니다. 이를 설정하기 위해 개발자는 일반적으로 '무한' iframe에 스크립트 태그를 추가하는 등의 해킹을 사용합니다.
서버에서 전송하는 이벤트는 처음부터 효율적으로 설계되었습니다. SSE와 통신할 때 서버는 초기 요청을 할 필요 없이 언제든지 앱에 데이터를 푸시할 수 있습니다. 즉, 업데이트가 발생할 때 서버에서 클라이언트로 스트리밍할 수 있습니다. SSE는 서버와 클라이언트 간에 단일 단방향 채널을 엽니다.
서버 전송 이벤트와 긴 폴링의 주요 차이점은 SSE가 브라우저에서 직접 처리되고 사용자는 메시지만 수신 대기하면 된다는 점입니다.
서버 전송 이벤트와 WebSocket 비교
WebSocket보다 서버 전송 이벤트를 선택하는 이유는 무엇인가요? 좋은 질문입니다.
WebSockets에는 양방향 전이중 통신이 포함된 풍부한 프로토콜이 있습니다. 양방향 채널은 게임, 메시지 앱, 양방향에서 거의 실시간 업데이트가 필요한 모든 사용 사례에 적합합니다.
하지만 서버에서 한 방향으로만 통신하면 되는 경우도 있습니다.
예를 들어 친구가 상태, 주식 시세 표시, 뉴스 피드 또는 기타 자동화된 데이터 푸시 메커니즘을 업데이트하는 경우입니다. 즉, 클라이언트 측 Web SQL 데이터베이스 또는 IndexedDB 객체 저장소의 업데이트입니다.
서버에 데이터를 전송해야 하는 경우 XMLHttpRequest가 항상 도움이 됩니다.
SSE는 HTTP를 통해 전송됩니다. 작동하는 특별한 프로토콜이나 서버 구현은 없습니다. WebSockets는 프로토콜을 처리하기 위해 전이중 연결과 새 WebSocket 서버가 필요합니다.
또한 서버 전송 이벤트에는 자동 재연결, 이벤트 ID, 임의 이벤트 전송 기능 등 WebSocket에 설계상 없는 다양한 기능이 있습니다.
JavaScript로 EventSource 만들기
이벤트 스트림을 구독하려면 EventSource 객체를 만들고 스트림의 URL을 전달합니다.
const source = new EventSource('stream.php');
다음으로 message 이벤트의 핸들러를 설정합니다. 원하는 경우 open 및 error를 리슨할 수 있습니다.
source.addEventListener('message', (e) => {
console.log(e.data);
});
source.addEventListener('open', (e) => {
// Connection was opened.
});
source.addEventListener('error', (e) => {
if (e.readyState == EventSource.CLOSED) {
// Connection was closed.
}
});
서버에서 업데이트를 푸시하면 onmessage 핸들러가 실행되고 e.data 속성에서 새 데이터를 사용할 수 있습니다. 연결이 닫힐 때마다 브라우저가 약 3초 후에 소스에 자동으로 다시 연결된다는 것이 마법 같은 부분입니다. 서버 구현에서 이 재연결 시간 제한을 제어할 수도 있습니다.
이상입니다. 이제 클라이언트가 stream.php의 이벤트를 처리할 수 있습니다.
이벤트 스트림 형식
소스에서 이벤트 스트림을 전송하는 것은 SSE 형식을 따르는 text/event-stream Content-Type으로 제공되는 일반 텍스트 응답을 구성하는 문제입니다.
기본적으로 응답은 data: 줄, 메시지, 스트림을 종료하는 두 개의 'n' 문자로 구성됩니다.
data: My message\n\n
여러 줄 데이터
메시지가 더 긴 경우 여러 개의 data: 줄을 사용하여 메시지를 분할할 수 있습니다.
data:로 시작하는 연속된 행 2개 이상은 단일 데이터로 취급되므로 message 이벤트가 하나만 실행됩니다.
각 줄은 단일 '\n'으로 끝나야 합니다(마지막 줄은 두 개로 끝나야 함). message 핸들러에 전달되는 결과는 줄바꿈 문자로 연결된 단일 문자열입니다. 예를 들면 다음과 같습니다.
data: first line\n
data: second line\n\n</pre>
이렇게 하면 e.data에 '첫 번째 줄\n두 번째 줄'이 생성됩니다. 그런 다음 e.data.split('\n').join('')를 사용하여 \n 문자가 없는 메시지를 재구성할 수 있습니다.
JSON 데이터 전송
여러 줄을 사용하면 문법을 중단하지 않고 JSON을 전송할 수 있습니다.
data: {\n
data: "msg": "hello world",\n
data: "id": 12345\n
data: }\n\n
그리고 이 스트림을 처리할 수 있는 클라이언트 측 코드:
source.addEventListener('message', (e) => {
const data = JSON.parse(e.data);
console.log(data.id, data.msg);
});
ID를 이벤트와 연결
id:로 시작하는 줄을 포함하여 스트림 이벤트와 함께 고유 ID를 전송할 수 있습니다.
id: 12345\n
data: GOOG\n
data: 556\n\n
ID를 설정하면 브라우저가 마지막으로 발생한 이벤트를 추적할 수 있으므로 서버 연결이 끊어지면 새 요청으로 특수 HTTP 헤더 (Last-Event-ID)가 설정됩니다. 이를 통해 브라우저는 실행할 적절한 이벤트를 결정할 수 있습니다.
message 이벤트에는 e.lastEventId 속성이 포함되어 있습니다.
재연결 시간 제한 제어
브라우저는 각 연결이 닫힌 후 약 3초 후에 소스에 다시 연결하려고 시도합니다. retry:로 시작하는 줄과 다시 연결을 시도하기 전에 기다릴 밀리초 수를 포함하여 제한 시간을 변경할 수 있습니다.
다음 예에서는 10초 후에 다시 연결을 시도합니다.
retry: 10000\n
data: hello world\n\n
이벤트 이름 지정
단일 이벤트 소스는 이벤트 이름을 포함하여 다양한 유형의 이벤트를 생성할 수 있습니다. event:로 시작하는 줄 뒤에 이벤트의 고유한 이름이 오는 경우 이벤트가 해당 이름과 연결됩니다.
클라이언트에서 이벤트 리스너를 설정하여 특정 이벤트를 리슨할 수 있습니다.
예를 들어 다음 서버 출력은 일반 'message' 이벤트, 'userlogon', 'update' 이벤트 등 세 가지 유형의 이벤트를 전송합니다.
data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
클라이언트에 이벤트 리스너가 설정된 경우:
source.addEventListener('message', (e) => {
const data = JSON.parse(e.data);
console.log(data.msg);
});
source.addEventListener('userlogon', (e) => {
const data = JSON.parse(e.data);
console.log(`User login: ${data.username}`);
});
source.addEventListener('update', (e) => {
const data = JSON.parse(e.data);
console.log(`${data.username} is now ${data.emotion}`);
};
서버 예시
다음은 PHP의 기본 서버 구현입니다.
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.
/**
* Constructs the SSE data format and flushes that data to the client.
*
* @param string $id Timestamp/id of this connection.
* @param string $msg Line of text that should be transmitted.
**/
function sendMsg($id, $msg) {
echo "id: $id" . PHP_EOL;
echo "data: $msg" . PHP_EOL;
echo PHP_EOL;
ob_flush();
flush();
}
$serverTime = time();
sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));
?>
다음은 Express 핸들러를 사용하는 Node JS의 유사한 구현입니다.
app.get('/events', (req, res) => {
// Send the SSE header.
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
// Sends an event to the client where the data is the current date,
// then schedules the event to happen again after 5 seconds.
const sendEvent = () => {
const data = (new Date()).toLocaleTimeString();
res.write("data: " + data + '\n\n');
setTimeout(sendEvent, 5000);
};
// Send the initial event immediately.
sendEvent();
});
sse-node.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script>
const source = new EventSource('/events');
source.onmessage = (e) => {
const content = document.createElement('div');
content.textContent = e.data;
document.body.append(content);
};
</script>
</body>
</html>
이벤트 스트림 취소
일반적으로 연결이 닫히면 브라우저가 이벤트 소스에 자동으로 다시 연결되지만 이 동작은 클라이언트 또는 서버에서 취소할 수 있습니다.
클라이언트에서 스트림을 취소하려면 다음을 호출합니다.
source.close();
서버에서 스트림을 취소하려면 text/event-stream가 아닌 Content-Type로 응답하거나 200 OK가 아닌 HTTP 상태(예: 404 Not Found)를 반환합니다.
두 메서드 모두 브라우저가 연결을 다시 설정하지 못하도록 합니다.
보안 관련 안내
EventSource에서 생성된 요청에는 가져오기와 같은 다른 네트워크 API와 동일한 출처 정책이 적용됩니다. 서버의 SSE 엔드포인트에 다른 출처에서 액세스해야 하는 경우 교차 출처 리소스 공유 (CORS)를 사용하여 사용 설정하는 방법을 참고하세요.