[SpringBoot] 스프링부트 WebSocket(웹소켓) 사용하기

Spring Boot에서 WebSocket, STOMP을 사용해보자.

STOMP란?

STOMP는 Publish-Subscribe 방법을 지원한다.
STOMP를 사용하지 않고도 WebSocket사용은 얼마든지 가능하지만 이 경우 직접 세션을 관리하는 등 추가 작업이 필요할 수 있다.
STOMP를 사용하면 이런 작업을 보다 편리하게 이용할 수 있다.

STOMP 설정

먼저 의존성을 추가하자.

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

그 후에 WebSocketMessageBrokerConfigurer 의 구현체를 만들어 웹소켓 설정을 해야 한다.

@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

  @Override
  public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/sub");
    config.setApplicationDestinationPrefixes("/pub");
  }

  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();
  }
}

@EnableWebSocketMessageBroker 와 @Configuration 어노테이션을 붙여 설정 클래스를 만든다.

이후 크게 두가지 작업을 수행했다.

• endpoint 설정 - 클라이언트와 서버가 연결(handshakin)하는 경로이다.
  클라이언트에서 서버URL/socket 으로 연결이 가능하다.
• setApplicationDestinationPrefixes 는 클라이언트가 서버측에 보내는 publish에 대한 prefix이다. 만약 클라이언트측에서 stomp.send 를 통해 Publish를 하면 위 Prefix가 자동으로 붙게된다.

웹소켓 컨트롤러

이후 컨트롤러는 다음처럼 작성하면 된다.

@Controller
@RequiredArgsConstructor
public class Controller {

    private final SimpMessagingTemplate webSocket;

  @MessageMapping(value = "/enter")
  public void enter(String id) {
    webSocket.convertAndSend("/sub/enter", "Enter test!");
  }
}

만약 클라이언트에서 /pub/enter 로 publish하면 enter() 함수에 매핑되게 된다. 함수에 이후 함수 내에서 비즈니스 로직을 수행후 /sub/enter 로 응답을 보내면 stomp.subscribe("/sub/enter") 를 구독하고 있는 클라이언트에게 응답이 보내지게 된다.

이렇게 publish-subscribe를 통해 별도의 session관리 없이 쉽게 소켓통신이 가능하다.

클라이언트는 특정 이벤트에 대해 구독 하면 되고, 요청을 보낼땐 데이터를 담아 출판 하면 된다.

서버도 마찬가지로 클라이언트가 보내는 요청을 매핑 하여 그 결과를 출판 하면 된다.

클라이언트 단

먼저 라이브러리를 설치하자.

npm i sockjs-client stompjs

이후에는 다음과 같이 간단하게 작성할 수 있다.

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

//socket 연결
const socket = new SockJS("서버URL/socket");
const stomp = Stomp.over(socket);

// socket 연결 확인
stomp.connect({}, callback);

// subscribe
stomp.subscribe("event", callback);

// publish
stomp.send("event", {}, data);

위처럼 subscribe 와 send 함수를 통해 구독과 출판을 할 수 있다.
이것을 통해 채팅방을 만드는 등 다양한 응용이 가능하다.

stomp가 제공하는 함수에 대해서는 공식 문서를 참고하자.