EventSource

EventSource는 Server-Sent Events(SSE)를 브라우저에서 사용하기 위한 인터페이스입니다. HTTP 서버와의 **지속적인 연결(persistent connection)**을 열고, 서버로부터 text/event-stream 포맷으로 전송되는 이벤트를 수신합니다.

EventSource는 단방향 통신(서버 → 클라이언트)을 위해 설계되었으며, 실시간 데이터 업데이트가 필요한 소셜 미디어 피드, 뉴스 업데이트, 모니터링 대시보드 등에 적합합니다.

해당 개념이 필요한 이유

• 간단한 실시간 통신 구현: WebSocket처럼 복잡한 프로토콜 핸드쉐이크 없이, 일반 HTTP 연결만으로 실시간 데이터를 받을 수 있습니다
• 브라우저 네이티브 지원: 별도의 라이브러리 없이 브라우저가 제공하는 API만으로 SSE를 쉽게 구현할 수 있습니다
• 자동 재연결 및 상태 관리: 연결 끊김, 재연결, 연결 상태 추적 등을 브라우저가 자동으로 처리하므로 개발자가 복잡한 로직을 작성할 필요가 없습니다

AS-IS: XMLHttpRequest로 폴링 구현

// 수동으로 폴링 및 재연결 로직 구현 필요
function pollServer() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/updates');
 
  xhr.onload = function() {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      handleUpdate(data);
    }
    // 5초 후 다시 요청
    setTimeout(pollServer, 5000);
  };
 
  xhr.onerror = function() {
    console.error('Request failed');
    // 에러 시 재시도 로직 필요
    setTimeout(pollServer, 10000);
  };
 
  xhr.send();
}
 
pollServer();

TO-BE: EventSource 사용

// 자동 재연결 및 지속적 연결 제공
const eventSource = new EventSource('/api/updates');
 
eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  handleUpdate(data);
};
 
eventSource.onerror = function(error) {
  console.error('Connection error:', error);
  // 브라우저가 자동으로 재연결 시도
};
 
// 필요 시 연결 종료
// eventSource.close();

EventSource 생성자

const eventSource = new EventSource(url, options);

매개변수

• url (string, 필수): SSE 이벤트를 전송하는 서버 엔드포인트 URL
• options (object, 선택):
  • withCredentials (boolean): CORS 요청 시 인증 정보(쿠키, Authorization 헤더 등) 포함 여부. 기본값은 false

예시

// 기본 사용
const eventSource = new EventSource('/api/events');
 
// CORS 인증 정보 포함
const eventSourceWithCreds = new EventSource('https://api.example.com/events', {
  withCredentials: true
});

EventSource 속성 (Properties)

속성	타입	설명
readyState	number (읽기 전용)	현재 연결 상태: CONNECTING (0), OPEN (1), CLOSED (2)
url	string (읽기 전용)	연결된 이벤트 소스의 URL
withCredentials	boolean (읽기 전용)	CORS 인증 정보 포함 여부

연결 상태 확인

const eventSource = new EventSource('/api/events');
 
console.log(eventSource.readyState); // 0 (CONNECTING)
 
eventSource.onopen = function() {
  console.log(eventSource.readyState); // 1 (OPEN)
};
 
eventSource.close();
console.log(eventSource.readyState); // 2 (CLOSED)

연결 상태 상수

EventSource.CONNECTING = 0  // 연결 수립 중
EventSource.OPEN = 1        // 연결 열림, 이벤트 수신 중
EventSource.CLOSED = 2      // 연결 닫힘

EventSource 메서드

close()

연결을 닫고 readyState를 CLOSED로 설정합니다. 이미 닫혀 있으면 아무 동작도 하지 않습니다.

const eventSource = new EventSource('/api/events');
 
// 특정 조건에서 연결 종료
if (userLoggedOut) {
  eventSource.close();
  console.log('Connection closed');
}

EventSource 이벤트

이벤트	설명
open	서버와의 연결이 열렸을 때 발생
message	서버로부터 데이터를 수신했을 때 발생 (이름 없는 이벤트)
error	연결 실패 또는 에러 발생 시 발생

이벤트 리스너 등록 방법

방법 1: on* 속성 사용

const eventSource = new EventSource('/api/events');
 
eventSource.onopen = function(event) {
  console.log('Connection opened', event);
};
 
eventSource.onmessage = function(event) {
  console.log('Message received:', event.data);
};
 
eventSource.onerror = function(event) {
  console.error('Error occurred:', event);
 
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Connection closed');
  }
};

방법 2: addEventListener 사용

const eventSource = new EventSource('/api/events');
 
eventSource.addEventListener('open', (event) => {
  console.log('Connection opened');
});
 
eventSource.addEventListener('message', (event) => {
  console.log('Message:', event.data);
});
 
eventSource.addEventListener('error', (event) => {
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log('Connection lost');
  }
});

이름 있는 이벤트 (Named Events)

서버에서 특정 이벤트 타입을 지정하여 전송하면, 클라이언트는 해당 이벤트만 선별적으로 처리할 수 있습니다.

클라이언트 코드

const sse = new EventSource('/api/v1/sse');
 
// "notice" 이벤트 처리
sse.addEventListener('notice', (event) => {
  console.log('Notice:', event.data);
  showNotification(event.data);
});
 
// "update" 이벤트 처리
sse.addEventListener('update', (event) => {
  console.log('Update:', event.data);
  refreshData(JSON.parse(event.data));
});
 
// 이름 없는 메시지 처리
sse.addEventListener('message', (event) => {
  console.log('Generic message:', event.data);
});
 
// 에러 처리
sse.addEventListener('error', (event) => {
  if (event.readyState === EventSource.CLOSED) {
    console.log('Connection closed');
  }
});

서버 코드 (Node.js/Express)

app.get('/api/v1/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
 
  // 이름 있는 이벤트 전송
  res.write('event: notice\n');
  res.write('data: {"message": "System maintenance in 10 minutes"}\n\n');
 
  res.write('event: update\n');
  res.write('data: {"stock": "AAPL", "price": 150.23}\n\n');
 
  // 이름 없는 메시지 전송 (기본 "message" 이벤트)
  res.write('data: {"type": "generic", "content": "Hello"}\n\n');
});

EventSource의 주요 특징 3가지

1. 자동 재연결

EventSource는 연결이 끊기면 자동으로 재연결을 시도합니다. 개발자가 별도의 재연결 로직을 작성할 필요가 없습니다.

const eventSource = new EventSource('/api/events');
 
eventSource.onerror = function() {
  // 브라우저가 자동으로 재연결 시도
  console.log('Connection lost, reconnecting...');
};
 
// 서버에서 재연결 간격을 제어할 수도 있음
// res.write('retry: 3000\n'); // 3초 후 재연결

2. HTTP/1.1과 HTTP/2에서의 연결 제한

중요한 제한 사항: HTTP/1.1에서는 브라우저가 도메인당 약 6개의 SSE 연결만 허용합니다. 여러 탭을 열면 문제가 발생할 수 있습니다.

해결 방법:

• HTTP/2 사용: HTTP/2에서는 100개 이상의 동시 스트림을 지원하므로 연결 제한이 크게 완화됩니다
• 연결 통합: 여러 데이터 소스를 하나의 SSE 연결로 통합
• WebSocket 사용: 양방향 통신이 필요한 경우 WebSocket으로 전환

graph TD
    A[HTTP/1.1] -->|연결 제한| B[도메인당 6개]
    A --> C[다중 탭 사용 시 문제 발생]

    D[HTTP/2] -->|연결 제한| E[100+ 동시 스트림]
    D --> F[다중 탭 사용 가능]

    style B fill:#ff6b6b
    style E fill:#51cf66

3. Web Workers 지원

EventSource는 Web Workers에서도 사용할 수 있어, 메인 스레드를 차단하지 않고 백그라운드에서 실시간 데이터를 처리할 수 있습니다.

worker.js

const eventSource = new EventSource('/api/events');
 
eventSource.onmessage = function(event) {
  // 메인 스레드로 데이터 전달
  self.postMessage({
    type: 'sse-data',
    data: event.data
  });
};
 
eventSource.onerror = function() {
  self.postMessage({
    type: 'sse-error',
    message: 'Connection failed'
  });
};

main.js

const worker = new Worker('worker.js');
 
worker.onmessage = function(event) {
  if (event.data.type === 'sse-data') {
    console.log('Received from worker:', event.data.data);
    updateUI(event.data.data);
  }
};

실제 사용 예시

실시간 알림 시스템

const notifications = new EventSource('/api/notifications');
 
notifications.addEventListener('notification', (event) => {
  const data = JSON.parse(event.data);
 
  // 브라우저 알림 표시
  if (Notification.permission === 'granted') {
    new Notification(data.title, {
      body: data.message,
      icon: data.icon
    });
  }
});

라이브 모니터링 대시보드

const metrics = new EventSource('/api/metrics');
 
metrics.onmessage = (event) => {
  const data = JSON.parse(event.data);
 
  // 차트 업데이트
  updateChart({
    cpu: data.cpu,
    memory: data.memory,
    requests: data.requests
  });
};

채팅 메시지 수신 (단방향)

const chat = new EventSource('/api/chat/messages');
 
chat.addEventListener('new-message', (event) => {
  const message = JSON.parse(event.data);
 
  appendMessageToChat({
    user: message.user,
    text: message.text,
    timestamp: message.timestamp
  });
});

참고 문서

• MDN - EventSource
• MDN - Using Server-Sent Events
• MDN - Server-Sent Events