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} 여기로 라우팅