[spring 멀티 채팅] websocket,sockjs,STOMP 이용한 채팅 기능-STOMP채팅구현(2)

이전 글에서 설정을 하고 온 후의 진행과정이다! 설정이 되어있지 않다면 ->설정 게시글 참고 

[spring 멀티 채팅] websocket,sockjs,STOMP 이용한 채팅 기능-설정(1)

 

websocket만으로도 채팅 구현은 가능했지만 좀 더 채팅 환경에 최적화시키고자 STOMP를 적용하여 구현하였다!

 

 

STOMP란?

simple text oriented messaging protocol의 약자이며, 텍스트 기반의 프로토콜이다. websocket은 연결된 socket에게 data처리를 직접 다하는 반면, stomp는 subscriber, sender, broker를 따로 두어 처리를 하게 된다.

 

 

*여기서 말하는 socket은 client socket을 의미함

---

subscriber(receive socket)

: 채팅방에 입장하여 해당 채팅창을 구독, 즉 참여하고 있는 채팅창에 오는 메시지를 실시간으로 받아볼 수 있으려면 먼저 구독이 되어있어야 한다.

sender(send socket)

: 참여하고 있는 채팅창에 글을 써서 해당하는 주소로 메시지를 전달한다.

broker

: 연결된 socket들의 세션 관리를 해준다. 즉 subscriber를 구독한 채널에 연결시켜주고, sender가 그 채널에 메시지를 보내면 subscriber에게 전달해주는 중간 다리 역할을 한다.

 

 

위와 같은 3가지 역할로 나뉘어서 처리가 되는데 이걸 시퀀스 다이어 그램으로 표현해 보자면 아래와 같다.

 

 

-subscriber가 채팅창 채널을 구독하겠다고 broker에게 알리면 해당 채널로(roomNo로 판별) sender가 메시지를 보낼 경우 broker가 메시지를 응답해주는 흐름이다. 

 

-실제 코드 구현에서는 urlMapping을 controller단에서 해주게 되는데 이 부분은 아래에 코드를 통해 확인해보자

 

 

Broker - WebSocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer{
    
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/subscribe");
        config.setApplicationDestinationPrefixes("/app");
    }
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/endpoint").withSockJS();
    }
}

 

ChatController.java

@Controller
public class ChatController {

	// 채팅 메세지 전달
    @MessageMapping("/hello/{roomNo}")
    @SendTo("/subscribe/chat/{roomNo}")
    public Chat broadcasting(Chat chat) {
 	
        chat.setSendDate(new Date());
        
        return chat;
    }
    
}

 

*참고로 Chat클래스는 올리지 않았음 필요시 게시글 하단에 첨부된 github링크에서 확인!

 

Subscriber - chatting.jsp (script태그 안의 코드)

$(function() {

	var sock = new SockJS(
				"${pageContext.request.contextPath}/endpoint");
	var client = Stomp.over(sock);
    
    	client.connect({},function() {
			//메세지 들어오는곳 == 구독한 채팅 채널
            //roomNo는 채팅창 접속하는 url에 get방식의 값으로 연결해줌
            //ex)채팅url?roomNo=13 이면 jsp el태그로 ${roomNo}로 가져와서 사용
			client.subscribe('/subscribe/chat/'+ roomNo,function(chat) {
			//받은 데이터
			var content = JSON.parse(chat.body);
			//후에 받은 데이터를 html코드로 뿌려주면 됨					
			});
                            
       });

});

 

-채팅창에 접속하는 jsp파일에서 script태그 안에 작성되는 내용들. socket생성, subscribe로 broker에게 구독 알림.

 

Sender - chatting.jsp (script태그 안의 코드)

client.send('/app/hello/' + roomNo, {}, JSON
			.stringify({
				chatContent : message,
				memberId : "${loginMember.memberId}"

}));

 

-스크립트로 채팅 메시지를 보냄 나의 경우 Chat VO에 맞춰서 객체를 보냈음. (메시지 내용, 메시지 발신자 id)

 

 

 

 

 

 

 

참고로 이 채팅 서비스 구현은 내가 진행한 온라인 스터디 프로젝트에서 필요하여 구현하였다.

필요하다면 아래에서 전체 코드를 참고하시길

전체 코드 보러 가기