스프링 부트 웹소켓 Stomp 사용법

스프링 부트 웹소켓 Stomp 사용법

stomp는 스프링 부트에서 웹소켓과 함께 사용하는 메시지 프로토콜이다.

웹소켓은 클라이언트와 서버 간의 양뱡향 통신을 실시간으로 유지하게 해 준다.

stomp 메시지를 좀더 사용하기 쉽게 만들어주는데 구독이라는 개념을 사용하여 구독한 사람간의 실시간 메세지 전송을 가능하게 해준다. 또한 메시지 브로커 라는 컴포넌트를 이용하여 메시지 전송을 관리한다.

 

 

의존성

/웹소켓/
implementation group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '3.3.3'
implementation 'org.webjars:stomp-websocket:2.3.4'
/웹소켓 html /
implementation 'org.webjars:webjars-locator-core'
implementation 'org.webjars:sockjs-client:1.5.1'

 

Config

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig  implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/send");
        //클라이언트에서 보내는 메서지가 받는 주소
        //클라이언트 구독 주소

        registry.enableSimpleBroker("/app");
        //이주소로 구독하고 있는 클라이언트에서 메세지 전달
        //클라이언트가 서버로 메서지 보낼때 사용하는 주소
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
        //sockjs연결주소로
        //이 엔드포이트로 웹소켓에 연결
        // 주소 ws://localhost:8080/ws
    }
}

 

vo

package org.example.study1.chat;

import lombok.*;

import java.time.LocalDateTime;

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class ChatVo {
    private Long id;
    private Long room;
    private String sender;
    private String message;
    private LocalDateTime sendDate;

    @Builder
    public ChatVo(Long room, String sender, String message) {
        this.room = room;
        this.sender = sender;
        this.message = message;
        this.sendDate = LocalDateTime.now();
    }

    

}

 

 

 

방번호와 보내는 사람이름, 메세지 내용을 사용할 예정이다.

 

Controller

딱히 현재 채팅 내용을 서버에 저장할 생각도 없기에 서비스 단은 만들지 않을 생각이다.

 

@Controller
public class ChatController {
    //채팅방
    @GetMapping("/chat/waiting")
    public String waiting(){
        return "chat";
    }

    @MessageMapping("/{roomId}") //여기로 전송되경우 호출(클라이언트가 서버로) //구독주소 접두사는 send가된다.
    @SendTo("/app/{roomId}")  //목적지 //서버에서 다시클라이언트로
    public ChatVo sendMessage(@DestinationVariable Long roomId, ChatVo message){
        return ChatVo.builder()
                .room(roomId)
                .sender(message.getSender())
                .message(message.getMessage())
                .build();
    }



}

 

 

config에서 채팅을 보낼 때는 send 구독할 때에는 app라고 주소를 명시해 두었다.

@sendTo는 구독한 사람들한테 모두 다 보내는 거고

@MessageMapping는 send/{roomId}로 채팅을 보낼 때 @sendTo로 보내는 거다.

 

html 코드

</body>
<div id="chat-box"></div>
<input type="text" id="romeId" placeholder="방 번호" onchange="connect()">
<input type="text" id="name" placeholder="작성자 이름">
<input type="text" id="message" placeholder="Enter message">
<button onclick="sendMessage()">Send</button>

<script>
        var stompClient = null;

        function connect() {
            var romeId = document.getElementById("romeId").value;
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/app/'+romeId, function (message) { //구독위치
            showMessage(JSON.parse(message.body));
            });
        });
    }

        function sendMessage() {
            var message = document.getElementById("message").value;
            var name = document.getElementById("name").value;
            var romeId = document.getElementById("romeId").value;
            stompClient.send("/send/"+romeId, {}, JSON.stringify({
                'sender': name,
                'message':message}));
    }

        function showMessage(chat) {
            var chatBox = document.getElementById("chat-box");
            chatBox.innerHTML += '<div>'+"보내는 사람 : "+ chat.sender +"   내용 : "+ chat.message + '</div>';
    }

        // Connect to WebSocket on page load
        window.onload = function () {
            connect();
    };


</script>
</html>

 

 

결과

 

방번호를 1번 방으로 잡고 작성자 이름가 작성할 채팅 내용을 각각 입려 해 보면

 

두 사람 모두에도 자신이 보낸 채팅하고 상태방이 보내 채팅이 잘 전달되는 것을 알 수 있다.

 

다음번에는 채팅방 대기방부터 시작해서 이전에 했던 채팅 내용까지 다 로드할 수 있도록 만들어 봐야겠다.