Spring_11_WebSocket

🔌 WebSocket 개념 및 Spring + JS 구현

---

✅ WebSocket

📌 정의

• 클라이언트와 서버 사이에서 지속적인 양방향 연결을 지원하는 프로토콜
• HTTP 기반이 아닌 WS(WebSocket) 프로토콜을 사용

📌 특징

1. 지속적인 연결 유지 → 상태 유지
2. Socket: 통신의 종착점(EndPoint)
3. 클라이언트 소켓이 서버 소켓에 연결 요청
4. 요청이 없어도 서버가 클라이언트에게 능동적으로 응답 가능

📌 사용처

• 실시간 채팅
• 알림 시스템
• 실시간 게임
• 보안 통신 등

---

🧩 Spring WebSocket 구현

1️⃣ WebSocket 의존성 추가

• https://start.spring.io 에서 WebSocket 선택
• build.gradle에 다음 의존성 추가:

implementation 'org.springframework.boot:spring-boot-starter-websocket'

---

2️⃣ 서버 소켓 핸들러 클래스 생성

• TextWebSocketHandler를 상속받아 구현
• @Component로 등록하여 Spring Container에 Bean으로 삽입

@Component
public class ChatHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) {
        // 클라이언트와 연결 성공 시 실행
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) {
        // 연결 종료 시 실행
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        // 클라이언트가 메시지를 보냈을 때 실행
    }
}

---

3️⃣ 핸들러 매핑 설정 클래스 생성

• WebSocketConfigurer를 구현하여 경로 매핑
• @EnableWebSocket으로 WebSocket 기능 활성화

@Configuration          // SpringContainer Bean 등록
@EnableWebSocket        // webSocket 활성화
public class WebSocketConfig implements WebSocketConfigurer {

    @Autowired
    private ChatHandler chatHandler;        // DI

    @Override
    // 개발자가 만든 서버 웹 소켓(핸들러) 객체들을 스프링이 인식할 수 있도록 경로·주소를 연결하는 것
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        // registry.addHandler( 서버웹소켓 객체, "경로")
        registry.addHandler(chatHandler, "/chat");
    }
}

---

🖥️ JavaScript WebSocket 구현

📌 특징

• 브라우저의 Session 저장소를 사용
• 브라우저마다 별도의 소켓 객체 생성
• 새로고침 시 JS 초기화 → Session 정보 변경됨

---

1️⃣ 클라이언트에서 서버로 연결 요청

const client = new WebSocket("ws://localhost:8080/chat");

ws://는 WebSocket 프로토콜을 의미하며, /chat은 Spring에서 매핑한 경로

---

2️⃣ WebSocket 이벤트 핸들링

client.onopen = function(event) {
    console.log("서버와 연결 성공");
};

client.onclose = function(event) {
    console.log("서버와 연결 종료");
};

client.onerror = function(event) {
    console.error("서버와 연결 중 오류 발생");
};

client.onmessage = function(event) {
    console.log("서버로부터 메시지 수신:", event.data);
};

---

3️⃣ 클라이언트 → 서버 메시지 전송

client.send("안녕하세요, 서버!");

---

🛠️ 기타 참고 사항

✅ @Component

• MVC 패턴이 아니더라도 Spring Container에 Bean 등록 시 필수 어노테이션

✅ REST API vs WebSocket

• REST API는 @ResponseBody를 통해 JSON ↔ Map 자동 변환
• WebSocket은 자동 변환을 지원하지 않음 → 직접 처리 필요

✅ ObjectMapper 사용 예시

private final ObjectMapper objectMapper = new ObjectMapper();

JSON ↔ Map 변환을 위한 라이브러리

---