WebSocket & 실시간 알림

WebSocket 기본 개념

구분	설명
HTTP	요청-응답 기반, 클라이언트가 먼저 요청
WebSocket	클라이언트-서버 간 양방향 지속 연결 유지
STOMP	WebSocket 위에서 사용하는 메시지 전송 프로토콜
SockJS	WebSocket 미지원 브라우저 호환성 처리용 JS 라이브러리

---

1. 의존성 추가 (Spring Boot)

설명

---

2. WebSocket 설정 클래스

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")          // 웹소켓 연결 주소
                .setAllowedOriginPatterns("*")
                .withSockJS();               // SockJS 사용 (브라우저 호환)
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic"); // 구독 주소 prefix
        registry.setApplicationDestinationPrefixes("/app"); // 메시지 발송 prefix
    }
}

---

3. 메시지 송수신 구조

클라이언트 → 서버

/app/hello

서버 → 클라이언트

/topic/greetings

---

4. Controller – 실시간 메시지 처리

@Controller
public class ChatController {

    @MessageMapping("/hello") // 클라이언트에서 보낸 메시지
    @SendTo("/topic/greetings") // 모든 구독자에게 브로드캐스트
    public ChatMessage greeting(ChatMessage message) {
        message.setContent("안녕하세요, " + message.getSender() + "님!");
        return message;
    }
}

ChatMessage는 DTO 클래스이며, JSON으로 자동 직렬화됩니다.

---

5. 클라이언트 예시 (JavaScript + SockJS + STOMP)

<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>

<script>
  const socket = new SockJS('/ws');
  const stompClient = Stomp.over(socket);

  stompClient.connect({}, () => {
    console.log('Connected');

    stompClient.subscribe('/topic/greetings', (message) => {
      const msg = JSON.parse(message.body);
      console.log("알림: " + msg.content);
    });

    stompClient.send("/app/hello", {}, JSON.stringify({ sender: "홍길동" }));
  });
</script>

---

실시간 알림 응용 시나리오

기능	설명
채팅	1:1 또는 그룹 채팅 메시지
알림	친구 요청, 게시글 좋아요 등 실시간 알림
모니터링	서버/기기 상태 실시간 조회
주식/환율	실시간 가격 변화 정보 전달
댓글 실시간 반영	게시판 댓글 알림 전파

---

마무리 요약

항목	설명
설정 클래스	@EnableWebSocketMessageBroker + STOMP, SockJS
메시지 흐름	/app/hello → 서버 처리 → /topic/greetings 전송
실시간 기능	채팅, 알림, 실시간 데이터 반영 등
확장성	Redis, Kafka, JWT 인증과 결합 가능

---

확장

기능구현	방법
사용자 인증	WebSocketHandshakeInterceptor + JWT
메시지 저장	DB + Kafka 연동
모바일 알림	WebSocket + FCM 연계
다중 서버 확장	Redis Pub/Sub + Spring WebSocket Cluster