EventSource: 실시간 통신을 위한 간단한 솔루션

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *웹 개발자**

- 실시간 데이터 전송이 필요한 애플리케이션 개발자

- WebSocket보다 단순한 실시간 기능 구현을 원하는 개발자

- 클라이언트-서버 간 단일 방향 통신이 필요한 시나리오를 다루는 개발자

핵심 요약

• EventSource는 WebSocket보다 간단한 HTTP 기반 실시간 통신 기술로, 서버에서 클라이언트로만 데이터 전송 가능
• 사용 사례: 실시간 알림, 대시보드, 주식 가격, 로그 스트림 등 클라이언트에서 요청이 필요하지 않은 시나리오
• 핵심 구현:

- 클라이언트: EventSource 객체 생성 및 onmessage 이벤트 처리

- 서버: text/event-stream 헤더 설정 및 res.write()로 데이터 전송

섹션별 세부 요약

1. EventSource 개요

• EventSource는 WebSocket 대안으로, HTTP 요청을 유지하며 서버가 클라이언트에 데이터를 지속적으로 전송
• 단일 방향 통신만 지원하므로, WebSocket과는 차별화
• 장점: 복잡한 WebSocket 설정 없이 간단한 구현 가능

2. 클라이언트 구현 방법

• JavaScript 코드 예시:

```javascript

const source = new EventSource("http://example.com/notifications");

source.onmessage = (event) => {

console.log(JSON.parse(event.data));

};

```

• 이벤트 처리: onopen, onmessage, onerror 등 이벤트 핸들러 사용
• 데이터 형식: 문자열 또는 JSON 형태로 전송 가능

3. 서버 구현 방법 (Node.js + Express 예시)

• 필수 헤더:

```http

Content-Type: text/event-stream

Cache-Control: no-cache

```

• Express 코드 예시:

```javascript

app.get('/notifications', (req, res) => {

res.setHeader('Content-Type', 'text/event-stream');

res.setHeader('Cache-Control', 'no-cache');

setInterval(() => {

res.write(data: ${JSON.stringify({ message: "Hello" })}\n\n);

}, 2000);

});

```

• 동작 방식: 2초 간격으로 클라이언트에 데이터 전송

4. 고려사항 및 한계

• 단일 방향 통신: 클라이언트에서 서버로 데이터 전송 불가 (WebSocket과의 차별점)
• 재연결: 연결이 끊겼을 경우 자동 재연결 시도 (단, 의도적으로 종료된 경우는 제외)
• 사용 시나리오: 서버가 클라이언트에게 데이터를 주기적으로 전송해야 하는 경우 최적

결론

• EventSource는 단일 방향 실시간 통신이 필요한 경우 WebSocket보다 간단하게 구현 가능
• 사용 시 고려사항: 클라이언트에서 서버로 데이터 전송이 필요하지 않은 시나리오에 적합
• 핵심 팁: text/event-stream 헤더 및 no-cache 설정을 반드시 포함하여 동작 보장