[Spring boot] WebSocket + STOMP

개요

이전포스트에서 작업한거에서 추가로 STOMP를 적용하는것을 해보았습니다.

STOMP (Simple Text Oriented Messaging Protocol)
   - STOMP은 메시지 지향 미들웨어나 메시지 큐 시스템에서 사용되는 간단한 텍스트 기반의 프로토콜입니다.
   - 주로 클라이언트와 서버 간의 메시지 전송 및 구독을 정의합니다.
   - 메시지의 송수신을 위한 프레임(Frame)을 제공하며, CONNECT, SEND, SUBSCRIBE, UNSUBSCRIBE, ACK 등의 명령을 사용하여 클라이언트와 서버 간 통신을 정의합니다.

WebSocket과 STOMP는 종종 함께 사용됩니다. WebSocket은 실시간 양방향 통신을 가능하게 하고, STOMP은 이를 이용하여 메시지를 보내고 받는 구조를 정의합니다. 이를 통해 웹 기반의 애플리케이션에서 실시간 채팅, 데이터 스트리밍, 실시간 업데이트 등을 구현할 수 있습니다. 주로 웹 소켓을 이용하여 클라이언트와 서버 간의 연결을 맺고, STOMP을 이용하여 메시지를 주고받습니다.

 

 

STOMP 사용

기존에 WebSocketConfig를 만들때 WebSocketConfigurer 를 구현하였는데 WebSocket STOMP 설정을 위해서는 WebSocketMessageBrokerConfigurer를 구현하면 됩니다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketStompConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/wsStompEvent").setAllowedOriginPatterns("*");
    }

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

WebSocketMessageBrokerConfigurer를 구현하는 클래스에서는 다음과 같은 작업을 수행할 수 있습니다:

1. registerStompEndpoints(StompEndpointRegistry registry) : 클라이언트가 WebSocket에 연결할 수 있는 엔드포인트를 등록합니다. STOMP(간단한 텍스트 기반 메시징 프로토콜)을 사용하여 클라이언트가 이러한 엔드포인트에 연결할 수 있습니다.

2. configureMessageBroker(MessageBrokerRegistry registry) : 메시지 브로커를 구성합니다. 여기서 메시지를 수신하고 라우팅하는 방법을 정의하며, 특정 주제를 구독하고 해당 주제로 메시지를 보낼 수 있도록 설정할 수 있습니다.

 

서버에서 SimpMessagingTemplate 클래스의 convertAndSend 함수를 통해 특정 브로커에 메세지를 전달할 수 있습니다.

private final SimpMessagingTemplate simpMessagingTemplate;
    
simpMessagingTemplate.convertAndSend("/wsStompBroker", pushMap);

 

STOMP.js 사이트에서 라이브러리를 다운받고 프로젝트에 포함시켜 줍니다.

이 라이브러리를 사용하면  WebSocket을 통해 STOMP 브로커에 연결할 수 있습니다.

<script src="/static/js/lib/stomp.min.js" ></script>

var url = "ws://localhost:8080/wsStompEvent";
var client = Stomp.client(url);
client.connect({}, (msg) => {
    console.log('Connected: ' + msg);
    var subscription = client.subscribe("/wsStompBroker", (msg) => {
        console.log('subscribe: ' + msg);
        const data = JSON.parse(msg.body);
        console.log('subscribe body: ' + data);
    });
});

 

 

 

참고자료

https://stomp-js.github.io/stomp-websocket/codo/extra/docs-src/Usage.md.html

https://dev-gorany.tistory.com/235

https://velog.io/@kmh916/Spring-Boot-%EC%B1%84%ED%8C%85-%EA%B5%AC%ED%98%84SockJSStomp-1.-%EA%B8%B0%EB%B3%B8-%EB%8F%99%EC%9E%91-%EA%B5%AC%ED%98%84

https://growth-coder.tistory.com/157