본문 바로가기

WebSocket

웹 소켓(Web Socket)이란?? (WebSocket - 1)

웹소켓이란?

  • 웹소켓은 전이중 통신을 제공하기 때문에 실시간성을 보장해줄 수 있다.

 

웹소켓 vs HTTP

  • 웹소켓이 아닌 HTTP를 이용해 실시간인 것 처럼 흉내낼 수는 있다.
    • ex)Polling, Long Polling, Streaming 등
    • 실시간성 측면에서 차이

        • HTTP
          • 클라이언트와 연결을 맺고 끊는다. (비연결성)
          • 3way, 4way handshake로 연결을 맺고 끊고를 반복
        • 웹소켓
          • 한번 연결을 맺고 나면, 그 연결을 계속 유지한다.
          • 연결을 맺는 과정에서 발생하는 비용을 줄일 수 있다.
        • 통신하는 방식의 차이 
        • HTTP
          • 요청과 응답이 하나의 쌍을 이루는 구조로 통신
          • 원하는 리소스에 대해 서버쪽에 요청을 해야한다
          • ex)탁구
        • 웹소켓
          • 한번 연결을 하면 끊기 전까지 계속 유지드되므로, 요청없이 상대가 보낸 메시지를 계속 듣고 있기만 하면 된다.
          • ex)전화연결
        • 보내는 데이터의 양에서의 차이
        • .
        • HTTP
          • 매 요청 마다 많은 정보를 만들어서 서버에 보냄
          • 응답시에도 마찬가지
          • 실시간성을 요구하는 서비스에 부담이 되는 구조
        • 웹소켓
          • 최초의 HandShake 과정에서는 HTTP 프로토콜을 이용하기 때문에 위와 유사한 양의 데이터를 주고받음
          • 하지만 한번 연결이 수립되면, 간단한 데이터만 오고간다.(HTTP보다 통신 비용이 저렴)

 

웹소켓 적용해보기

package com.websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new SocketTextHandler(), "/user")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}
  • WebSocketConfigurer를 구현한 클래스 작성 후 @EnableWebSocket을 작성해준다.
  • 스프링에서 웹소켓을 사용하기 위해 클라이언트가 보내는 통신을 처리할 핸들러가 필요한데
    • 직접 구현한 웹소켓 핸들러(위의 코드 상 SocketTextHanler())를 웹소켓이 연결될 때, HandShake할 주소(위의 코드상 "/user")와 함께 addHandler의 인자로 넣어준다.
  • setAllowedOrigins("*")으로 Cors 설정을 할 수 있다.
    • 스프링에서 웹소켓을 사용할 때, same-origin만 허용하는것이 기본정책
  • withSockJS()로 SockJS 라이브러리를 사용하도록 설정할 수 있다.
    • 웹소켓을 지원하지 않는 브라우저 환경에서도 비슷한 경험을 할 수 있는 기능을 제공

 

package com.websocket;

import org.json.JSONObject;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;

public class SocketTextHandler extends TextWebSocketHandler {

    private final Set<WebSocketSession> sessions = ConcurrentHashMap.newKeySet();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        JSONObject jsonObject = new JSONObject(payload);
        for (WebSocketSession s : sessions) {
            s.sendMessage(new TextMessage("Hi " + jsonObject.getString("user") + "!"));
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}
  • 기본적으로 웹소켓 프로토콜은 Text, Binary 타입을 지원한다.
    • 필요에 따라 위의 코드처럼 TextWebSocketHandler를 상속하거나 BinaryWebSocketHandler를 상속하여 구현해주면 된다.
  • WebSocketSession 파라미터는 웹소켓이 연결될 때 생기는 연결정보를 담고 있는 객체이다.
    • Handler에서는 웹소켓 통신에 대한 처리를 위해, 웹소켓 세션들을 컬렉션에 담아 관리하는 경우가 많음
      • 웹소켓 커넥션이 맺어지면 (afterConnectionEstablished -> sessions.add(session)
      • 웹소켓 커넥션이 끊어지면 (afterConnectionEstablished -> sessions.remove(session)
  • 웹소켓 세션을 통해, 연결된 모든 클라이언트들에게 메시지를 보낼 수 있다.

STOMP

  • STOMP는 간단한 텍스트 기반 메시징 프로토콜
    • 메시지 브로커라는 것을 활용하여 pub/sub(즉, Publish/Subscribe ) 방식으로 클라이언트와 서버가 쉽게 메시지를 주고 받을 수 있도록하는 프로토콜이다.
  • pub/sub은 일종의 메시지 패러다임
    • 발신자가 어떠한 범주(예를 들어 경로)로 메시지를 발행하면 이 범주를 구독하고 있는 수신자들이 해당 메시지를 받아볼 수 있는 방식
  • 메시지 브로커발신자가 보낸 메시지들을 받아서 수신자들에게 전달해주는것이다.
  • 웹소켓 위에 STOMP를 얹어서 사용하는 이유?
    • 웹소켓은 Text, Binary 타입의 메시지를 양방향으로 주고받을 수 있는 프로토콜인데 메시지를 주고받는 형식이 따로 정해진것이 없다.
      • 웹소켓만 사용하는 프로젝트가 커진다면, 주고 받는 메시지에 대한 형식이 중요해지게 되기 때문에 정의된 메시지 형식대로 파싱하는 로직 또한 따로 구현해야한다.
      • STOMP를 사용하면 메시지 형식에 대한 고민과 파싱 로직을 위한 코드 구현이 필요없어진다.
      • 웹소켓(왼쪽)은 오고 가는 데이터는 raw한 형태의 메시지
      • STOMP(오른쪽) 커맨드, 헤더, 바디의 형태로 데이터가 오고간다.
  • STOMP 프로토콜의 동작 흐름

    • 메시지를 보내려는 발신자, 메시지를 받으려는 구독자가 있고 구독자는 /topic이라는 경로를 구독하고 있다.
    • 발신자는 /topic을 destination 헤더로 넣어 메시지를 메시지 브로커를 통해 구독자들에게 곧바로 송신할 수 있다.
    • 또는 서버 내에서 어떠한 가공처리가 필요하다면 /app 경로로 메시지를 송신할 수 있다.
      • 서버가 가공처리가 끝난 데이터를 /topic 이라는 경로를 담아 메시지 브로커에게 전달하면
      • 메시지 브로커는 전달받은 메시지를 /topic을 구독하는 구독자들에게 최종적으로 전달한다.

STOMP 사용해보기

package com.websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketBrokerConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/queue","/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/gs-guide-websocket")
                .withSockJS();
    }
}

 

  • @EnableWebSocketMessageBroker 어노테이션을 달고 WebSocketMessageBrokerConfigurer 인터페이스를 구현
  • ConfigureMessageBroker는 STOMP에서 사용하는 메시지 브로커를 설정하는 메소드
    • enableSimpleBroker : 내장 메시지 브로커를 사용하기 위한 메소드이다.
      파라미터로 지정한 prefix(/queue 또는 /topic)가 붙은 메시지를 발행할경우,
      메시지 브로커가 이를 처리하게 된다.
      • /queue prefix는 메시지가 1대1로 송신될 때,
      • /topic prefix는 메시지가 1대다로 브로드캐스팅될 때 사용됨
    • setApplicationDestinationPrefixes : 메시지 핸들러로 라우팅되는 prefix(/app)를 파라미터로 지정할 수 있다.
      • 메시지 가공 처리가 필요한경우, 가공 핸들러로 메시지를 라우팅 되도록 하는 설정
  • registerStompEndpoints는 웹소켓 configuration의 addHandler 메소드와 유사하다.
    • addEndpoint 메소드의 파라미터로 들어가는 /gs-guide-websocket 은 처음 웹소켓 HandShake를 위한 경로
    • cors,SockJS 설정 또한 할 수 있다.
    • addHandler와 다른 점은 핸들러를 하나하나 추가해줄 필요가 없다.
      • STOMP를 사용하면 웹소켓만 사용할 때와 다르게 하나의 연결주소마다 핸들러 클래스를 따로 구현할 필요없이 Controller 방식으로 간편하게 사용할 수 있다.
package com.websocket;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import org.springframework.web.util.HtmlUtils;

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greeting")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000);
        return new Greeting("Hello" + HtmlUtils.htmlEscape(message.getName()));
    }
}
  • 가공 핸들러는 이와 같이 구현한다.
  • STOMP를 사용하면 따로 인터페이스를 상속받을 필요 없이 @Controller 어노테이션을 사용할 수 있다.
  • @MessageMapping 어노테이션은 @RequestMapping과 비슷한 역할을 한다.
    • HTTP 요청의 경로에 맞는 핸들러에게 처리를 위임하듯,
      STOMP 웹소켓 통신을 통해 메시지가 들어오면 메시지의 destination 헤더와 @MessageMapping에 설정된 경로가 일치한 핸들러를 찾아 해당 핸들러가 이를 처리한다.
      ->WebSocketBrokerConfig에서 설정한 /app prefix와 합쳐진 /app/hello라는 destination 헤더를 가진 메시지들이 @MessageMapping("/hello")가 붙은 핸들러를 거치게 된다.
  • @SendTo 어노테이션은 핸들러에서 처리를 마친 후 결과 메시지를 설정한 경로(/topic/greeting)로 보내준다.
    • 앞에 /topic이 붙었으니 SimpleBroker로 전달된다.

STOMP 프로토콜의 장점

  • 하위 프로토콜, 컨벤션을 따로 정의할 필요가 없다.
    • STOMP가 프레임 단위로 정해줌
  • 연결 주소마다 새로운 Handler를 구현하고 설정해줄 필요가 없다.
    • @Controller 어노테이션을 사용하면 된다.
  • 외부 Messaging Queue (Kafka, RabbitMQ ....)를 사용할 수 있다.
    • Spring이 기본적으로 제공하는 내장 메시지 브로커가 아닌 외부 메시지 큐를 연동해서 사용할 수 있다.
  • Spring Security를 사용할 수 있다.
    • 오고 가는 메시지에 대한 보안설정을 할 수 있음.

 

'WebSocket' 카테고리의 다른 글

아주 간단한 채팅 구현해보기 (WebSocket - 2)  (0) 2024.01.08