HTTP vs WebSocket

[HTTP] : 하이퍼텍스트 전송 프로토콜

• 클라이언트 <---- request / response ----> 서버
• HTTP 기반의 통신은 요청(request)이 있을 경우에만 응답(response) 가능
• 무상태(통신 상태 유지 안함: 통신할 때마다 연결/매핑 수행)

[WebSocket] : 웹소켓

1. 정의

   • WS 프로토콜 기반으로 클라이언트와 서버 사이에 지속적인 양방향 연결

2. 특징

   1. 지속적인 양방향 연결(상태 유지): 클라이언트와 서버 사이 연결 상태 유지
   2. 소켓: 통신의 종착점(엔드포인트, 메시지 도착 지점)
   3. 클라이언트 소켓이 서버 소켓으로부터 연결 요청

3. 사용처

   • 실시간 통신: 채팅, 게임
   • 알림
   • 보안 등

4. 스프링 웹 서버 소켓 구현

   1. 라이브러리 설치 (build.gradle)

      • Spring Initializr에서 "websocket" 의존성 추가
      • implementation 'org.springframework.boot:spring-boot-starter-websocket'

   2. 서버소켓(핸들러) 클래스

      • ChatHandler 클래스 생성

      • extends TextWebSocketHandler 상속

      • @Component로 스프링 컨테이너 빈 등록

      • 주요 오버라이딩 메소드

        @Override
        public void afterConnectionEstablished(WebSocketSession session) throws Exception { }
        
        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { }
        
        @Override
        protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { }

   3. 서버소켓(핸들러) 스프링 등록

      @Configuration
      @EnableWebSocket
      public class WebSocketConfig implements WebSocketConfigurer {
      
          @Autowired
          private ChatHandler chatHandler;
      
          @Override
          public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
              registry.addHandler(chatHandler, "/ws-path");
          }
      }

   4. 클라이언트 JS 웹소켓 구현

      • 주의: 브라우저/JS마다 클라이언트 웹소켓은 별도의 객체
      1. 서버 웹소켓 경로로 클라이언트 웹소켓 생성

         const socket = new WebSocket("ws://서버주소/ws-path");

      2. 주요 이벤트 메소드

         socket.onopen = function(event) { /* 연결 성공 */ }
         socket.onclose = function(event) { /* 연결 종료 */ }
         socket.onerror = function(event) { /* 에러 발생 */ }
         socket.onmessage = function(event) { /* 메시지 수신 */ }

      3. 서버 소켓에 메시지 전송

         socket.send("메시지");