[SSE] 서버에서 클라이언트에 연결을 한다고?! (반대 아니야?!)

🚀 Spring Boot(Kotlin)로 구현하는 실시간 알림: SSE 기초

실시간 알림 기능, 매번 웹소켓(WebSocket)으로 무겁게 구현하셨나요? 서버에서 클라이언트로 일방적인 알림만 보내면 된다면 **SSE(Server-Sent Events)**가 정답입니다.

1. SSE란?

SSE는 서버에서 웹 브라우저로 실시간 데이터를 푸시하는 HTTP 표준 기술입니다.

특징	설명
통신 방향	단방향 (서버 → 클라이언트)
프로토콜	일반 HTTP 사용 (text/event-stream)
연결 유지	한 번 연결하면 서버가 계속 데이터 전송 가능
재연결	네트워크 중단 시 브라우저가 자동으로 재연결 시도

---

2. Backend: Kotlin 핵심 코드

Spring에서 제공하는 SseEmitter를 사용하면 아주 짧은 코드로 구현이 가능합니다.

Kotlin

 

@RestController
class SseController {

    // 1. SSE 연결 엔드포인트
    @GetMapping("/connect", produces = [MediaType.TEXT_EVENT_STREAM_VALUE])
    fun connect(): SseEmitter {
        val emitter = SseEmitter(60 * 1000L) // 60초 타임아웃 설정
        
        // 연결 즉시 데이터 전송 (503 에러 방지용)
        emitter.send(SseEmitter.event().name("connect").data("connected!"))
        
        return emitter
    }
}

---

3. Frontend: JavaScript 핵심 코드

브라우저 내장 API인 EventSource를 사용하므로 라이브러리가 필요 없습니다.

JavaScript

 

// 1. 서버 연결
const eventSource = new EventSource('http://localhost:8080/connect');

// 2. 메시지 수신 이벤트
eventSource.onmessage = (event) => {
    console.log("새로운 메시지:", event.data);
};

// 3. 연결 에러 처리
eventSource.onerror = (error) => {
    console.error("SSE 연결 실패:", error);
    eventSource.close(); // 필요시 연결 종료
};

---

4. 구현 시 핵심 체크리스트 (Tips)

• 타임아웃 관리: SseEmitter 생성 시 시간을 넉넉히 주거나, 클라이언트에서 재연결 로직을 확인하세요.
• 더미 데이터 전송: 연결 직후 서버에서 아무 데이터도 보내지 않으면 연결이 끊길 수 있습니다. "connect" 이벤트를 한 번 쏴주는 게 국룰입니다.
• Nginx 설정: 만약 서버 앞에 Nginx가 있다면 아래 설정을 추가해야 실시간으로 전달됩니다.
  • proxy_buffering off;
  • proxy_set_header Connection '';

---

정리하며

단순 알림, 실시간 주가 차트, 진행률 표시 등은 웹소켓보다 SSE가 훨씬 가볍고 유지보수하기 편합니다. 다음 포스팅에서는 여러 대의 서버 환경에서 Redis를 활용해 SSE를 공유하는 방법을 다뤄보겠습니다!