Projects - Jira

stomp.send('/app/api/meetings/{meetingId}/chat/{memberId}', {}, JSON.stringify({roomId: roomId, writer: username}))

@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                //sockJs 클라이언트가 websocket handshake로 커넥션할 경로
                .setAllowedOrigins("*")
                //가능한 경로 설정 ( 전체 오픈 : 기호에따라 수정 )
                .withSockJS();
    }
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/app");
        // /pub 으로 시작하는 stomp 메세지의 경로는 @controller @MessageMaping 메서드로 라우팅
        config.enableSimpleBroker("/topic");
        // /sub 로 시작하는 stomp 메세지는 브로커로 라우팅함
    }
}

@Controller
@RequiredArgsConstructor
public class StompChatController {

    private final SimpMessagingTemplate template; //특정 Broker로 메세지를 전달

// 없는 상태
    //Client가 SEND할 수 있는 경로
    //stompConfig에서 설정한 applicationDestinationPrefixes와 @MessageMapping 경로가 병합됨
    //"/pub/chat/enter"
   // @MessageMapping(value = "/chat/enter")
 //   public void enter(ChatMessageDTO message){
  //      message.setMessage(message.getWriter() + "님이 채팅방에 참여하였습니다.");
  //      template.convertAndSend("/sub/chat/room/" + message.getRoomId(), message);
  //  }

	//"/pub/chat/message" 로 날린 데이터에 대해서 /sub/chat/room + roomId 한 구독자들에게 해당 message를 전달
    @MessageMapping(value = "/api/meetings/{meetingId}/chat/{memberId}")
    public void message(ChatMessageDTO message){
        template.convertAndSend("/topic/rooms/" + meetingId + "/chat", message);
    }
}

<script>
	// config 에서 설정한 endpoint로 websocket handshake 를 해준다.
	var sockJs = new SockJS("/stomp/chat", null, {transports: ["websocket", "xhr-streaming", "xhr-polling"]});
    // sockJs 를 stomp 에 넘겨준다.
    var stomp = Stomp.over(sockJs);
    // connect이 맺어지면 실행
    stomp.connect({}, function (){
        // subscribe(path, callback)으로 메세지를 받을 수 있음
        // 해당 채팅방에 대해서 구독을 함 + 콜백함수로 chat 에 대한 메소드를 실행 (대충 가져온 메세지를 html 띄움)
        stomp.subscribe("/topic/rooms/" + meetingId + "/chat", function (chat) {
            var content = JSON.parse(chat.body);
            var writer = content.writer;
            var dateTime = new Date().toDateString();
            var str = '';

            if(writer === username){
                str = "<div class='col-6 offset-md-6'>";
                str += "<div class='alert alert-warning'>";
                str += "<b>" + writer + " : " + content.message + " : " + dateTime + "</b>";
                str += "</div></div>";
                $("#msgArea").append(str);
            }
            else{
                str = "<div class='col-6'>";
                str += "<div class='alert alert-success'>";
                str += "<b>" + writer + " : " + content.message + "</b>";
                str += "</div></div>";
                $("#msgArea").append(str);
            }
        });

        stomp.send('/pub/chat/enter', {}, JSON.stringify({roomId: roomId, writer: username}))
        // send(path, header, message)로 메세지를 보낼 수 있음
        // /pub 경로이므로 @MessageMapping 에 있는 endpoint로 이동
    });

    $("#button-send").on("click", function(e){
        var msg = document.getElementById("msg");
        stomp.send('/pub/chat/message', {}, JSON.stringify({roomId: roomId, message: msg.value, writer: username}));
        // 버튼 클릭시 /pub 경로이므로 @MessageMapping 에 있는 endpoint 이동
        // message endpoint는 해당 방을 구독한 사람들에게 메세지 전달함
    });
});
</script>

/app 으로 시작하는 stomp 메세지의 경로는 @MessageMapping으로 라우팅
=> 즉, /app/api/meetings/{meetingId}/chat/{memberId} 여기로 라우팅