HTML - 서버 전송 이벤트

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 서버 전송 이벤트(Server-Sent Events, SSE)의 흥미로운 세상으로 뛰어들어 보겠습니다. 프로그래밍에 처음이신 분들도 걱정 마세요; 저는 이 주제를 단계별로 안내해 드릴 것입니다. 수년간 수많은 학생들을 가르친 경험을 바탕으로 말입니다. 그럼 커피 한 잔을 마시면서 시작해 보세요!

HTML - Server Sent Events

서버 전송 이벤트는 무엇인가요?

코드로 들어가기 전에, 서버 전송 이벤트가 무엇인지 이해해 보겠습니다. 가상으로 실시간으로 진행되는 스포츠 경기를 온라인에서 시청하는 걸 상상해 보세요. 페이지를 새로 고침 없이 실시간으로 점수 업데이트를 보고 싶습니다. 이때 서버 전송 이벤트가 유용하게 쓰입니다!

서버 전송 이벤트는 웹 페이지가 서버로부터 자동으로 업데이트를 받을 수 있게 합니다. 서버와 직통 전화线路을 가지고 있는 것처럼, 서버가 언제든지 메시지를 보낼 수 있고, 반복적으로 요청할 필요 없이 메시지를 받을 수 있습니다.

웹 애플리케이션에서 SSE를 어떻게 사용하나요?

이제 개념을 이해했으므로, 우리 웹 애플리케이션에 SSE를 어떻게 구현할 수 있는지 살펴보겠습니다. 먼저 클라이언트 측 코드를 작성해 보겠습니다. 이 코드는 HTML과 JavaScript로 작성됩니다.

단계 1: EventSource 객체 생성

먼저 JavaScript 코드에서 EventSource 객체를 생성해야 합니다. 이 객체는 서버와의 연결을 설정합니다.

<h1>실시간 스포츠 점수</h1>
<div id="score"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("score_updates.php");
source.onmessage = function(event) {
document.getElementById("score").innerHTML = event.data;
};
} else {
document.getElementById("score").innerHTML = "죄송합니다, 브라우저가 서버 전송 이벤트를 지원하지 않습니다...";
}
</script>

이를 해석해 보면:

우리는 제목과 div 요소를 생성하여 점수를 표시할 공간을 마련합니다.
스크립트에서 먼저 브라우저가 EventSource를 지원하는지 확인합니다.
지원하면 새로운 EventSource 객체를 생성하고, 서버 측 스크립트의 URL을 지정합니다.
그런 다음 onmessage 이벤트 핸들러를 설정합니다. 서버로부터 메시지를 받을 때마다 이 함수가 호출됩니다.
함수 내부에서 "score" div 요소의 내용을 서버로부터 받은 데이터로 업데이트합니다.
브라우저가 SSE를 지원하지 않으면 사용자에게 알림 메시지를 표시합니다.

서버 측 스크립트 для SSE

이제 서버 측 스크립트를 설정하여 이벤트를 전송하는 방법을 살펴보겠습니다. 이 예제에서는 PHP를 사용하지만, 다른 서버 측 언어에서도 비슷한 개념이 적용됩니다.

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendUpdate($score) {
echo "data: $score\n\n";
ob_flush();
flush();
}

$score = 0;
while (true) {
$score++;
sendUpdate("현재 점수: $score");
sleep(5);  // 다음 업데이트 전에 5초 대기
}
?>

이 스크립트를 분석해 보면:

적절한 SSE 헤더를 설정합니다.
sendUpdate 함수를 정의하여 SSE 형식으로 데이터를 전송합니다.
무한 루프를 시작합니다(실제 애플리케이션에서는 중지 조건을 설정해야 합니다).
각 반복에서 점수를 증가시키고 업데이트를 전송합니다.
다음 업데이트 전에 5초를 대기합니다.

서버 전송 이벤트 처리

이제 클라이언트와 서버 측 코드가 모두 준비되었으므로, 다양한 이벤트를 처리하는 방법을 살펴보겠습니다.

<h1>실시간 스포츠 업데이트</h1>
<div id="score"></div>
<div id="commentary"></div>

<script>
var source = new EventSource("sports_updates.php");

source.addEventListener('score', function(e) {
document.getElementById('score').innerHTML = e.data;
}, false);

source.addEventListener('commentary', function(e) {
document.getElementById('commentary').innerHTML = e.data;
}, false);

source.onerror = function(e) {
console.log("오류: " + e);
};
</script>

이 예제에서:

우리는 점수와 해설을 표시할 두 개의 div 요소를 생성합니다.
두 가지 유형의 이벤트('score'와 'commentary')에 대한 이벤트 리스너를 설정합니다.
각 이벤트는 다른 요소를 업데이트합니다.
오류 처리를 위해 오류 핸들러를 추가합니다.

서버 측 스크립트는 다음과 같을 수 있습니다:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendEvent($event, $data) {
echo "event: $event\n";
echo "data: $data\n\n";
ob_flush();
flush();
}

$score = 0;
$commentary = ["위대한 세이브!", "까다로운 슛!", "黄 카드!"];

while (true) {
$score++;
sendEvent('score', "현재 점수: $score");

if ($score % 3 == 0) {
$randomComment = $commentary[array_rand($commentary)];
sendEvent('commentary', $randomComment);
}

sleep(5);
}
?>

이 스크립트는 'score' 이벤트를 매 5초마다 전송하고, 'commentary' 이벤트는 점수가 3의 배수가 될 때마다 전송합니다.

메서드 표

사용한 주요 메서드를 요약한 표입니다:

메서드	설명
`new EventSource(url)`	서버와의 새로운 연결 생성
`EventSource.onmessage`	특정 이벤트 이름 없이 메시지 처리
`EventSource.addEventListener(event, callback)`	특정 이벤트 이름을 가진 메시지 처리
`EventSource.onerror`	연결에서 발생한 오류 처리

결론

이렇게 서버 전송 이벤트의 기본 개념과 클라이언트 및 서버 측 코드 설정 방법을 다루었습니다. SSE는 실시간 웹 애플리케이션을 만드는 강력한 도구이지만, 단방향 통신만을 지원합니다. 양방향 통신이 필요하다면 미래에 WebSocket을 탐구해 보세요.

어떤 프로그래밍 개념이든, 실제로 만들어 보는 것이 가장 중요합니다. 자신만의 SSE 애플리케이션을 만들어 보세요 - 실시간 채팅 시스템이나 주식 정보 티커 등이 될 수 있습니다. 가능성은 무한합니다!

미래의 웹 개발자 여러분, 기억하세요, 모든 전문가는 초보자였습니다. 일단 이해가 되지 않더라도 낙담하지 마세요. 계속 연습하면 곧 프로가 될 것입니다! 행복하게 코딩하세요!

Credits: Image by storyset