Spring boot + WebSocket

  최종목표는 Spring boot와 Kafka / websocket / elasticsearch / auth 서버를 micro로 셋팅하는 법을 공유하는 것입니다. 해당내용은 websocket에 해당되는 부분으로 다른것과 연동하고 싶으시면 다른 글을 참조하셔서 합치면되겠습니다. java + js 부분으로 이어집니다.

* Websocket : 2019/01/10 - [개발자를 벗어나긴 이미 늦었다./Spring boot] - Spring boot + WebSocket

* Reference 예제 : https://spring.io/guides/gs/messaging-stomp-websocket/

 

1. Dependency 추가

compile("org.springframework.boot:spring-boot-starter-websocket")
compile("org.webjars:sockjs-client:1.0.2")
compile("org.webjars:stomp-websocket:2.3.3")

  Spring boot Starter를 이용하기 위해 spring-boot-starter-websocket 을 추가하고, js에서 사용한 webjar를 추가해줍니다. webjar는 해당 js를 파일을 다운받으셔서 Static(js) 폴더에 넣으셔서 참조해주셔도 상관없습니다.

 

2. Config 파일생성

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

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

}

• @EnableWebSocketMessageBroker - spring boot websocket broker 활성화
  
• setApplicationDestinationPrefixes - default context  지정
• enableSimpleBroker - 호출시 broker가 감지할 url 설정
• addEndpoint - websocket connect 시 사용될 path 지정

3. Controller 생성

@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/ws/hello")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // simulated delay
        return new Greeting("Hello, " + HtmlUtils.htmlEscape(message.getName()) + "!");
    }
} 

@MessageMapping - 메세지를 수신받을 Annotation ( js에서 .send로 호출 )

@SendTo - 수신받은 메시지를 다시 보낼 주소 ( Websocket Connection 주소로 생각하심될듯)

 

=== JAVA 설정 끝

 

4. js에서 SockJS를 통해 접속

var socket = new SockJS('/test-websocket'); 
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) { 
        console.log('Connected: ' + frame);
        stompClient.subscribe('/ws/hello', function (message) {
            console.log(message); //실행부분
        });
    });

stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));