Spring Boot WebSocket

플레이어가 참여할 수 있는 퀴즈 방, 채팅과 이모지 기능 등을 구현하기 위해 웹소켓을 공부했다.
메세징 기능을 위해 메모리 기반의 STOMP 메세지 브로커를 사용했다. 이외에도 Kafka, RabbitMQ 등 메세징 시스템을 사용할 수도 있다.

WebSocket

웹소켓은 단방향이 아닌 양방향 통신을 가능하게 해주는 프로토콜 기술로, 클라이언트와 서버 간 실시간 통신이 필요할 때 사용한다.

웹소켓은 Handshake 과정을 거쳐 연결을 수립한다. 연결이 수립되고 나면 소켓 연결이 닫힐 때까지 실시간으로 데이터를 주고 받을 수 있다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-connection")
                .setAllowedOriginPatterns("*")
                .withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/subscribe");
        registry.setApplicationDestinationPrefixes("/publish");
    }
}

WebSocketConfig.java
백엔드에 구현한 웹소켓 설정 파일이다.

function connect() {
    var socket = new WebSocket('/ws-connection');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function () {
        setConnected(true);
        stompClient.subscribe('/subscribe/rooms/5', function (greeting) {
            console.log(greeting.body);
        });
    });
}

클라이언트에서는 위와 같은 방법으로 연결한다고 한다.

플레이어가 입퇴장할 때 프론트에서 소켓 연결을 관리해주면, 그 소켓 정보를 이용해 백에서 만든 메세지 컨트롤러로 소켓 간 실시간 통신을 할 수 있는 것 같다.
이제 메세지가 오면 같은 연결 소켓의 유저들에게 메세지를 전달해주는 ChatController를 구현할 예정이다.