WIL - 웹소켓과 STOMP를 사용하여 채팅 기능 구현하기

웹소켓과 STOMP를 사용하여 채팅 기능 구현하기를 목표로 하고 있다.

1. build.gradle
   웹소켓, sockJS, stomp 에 관한 설정 등

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-websocket'
	implementation 'com.fasterxml.jackson.core:jackson-databind'

	implementation 'org.webjars.bower:jquery:3.3.1'
	implementation 'org.webjars:sockjs-client:1.1.2'
	implementation 'org.webjars:stomp-websocket:2.3.3-1'
	implementation 'org.webjars:webjars-locator:0.30'
}

2. WebSocketConfig
   웹소켓 사용을 위한 WebSocketMessageBrokerConfigurer 를 상속한 설정 파일로 publish와 subscribe 엔드포인트를 설정하고, 웹소켓 연결시의 엔드포인트도 설정해 준다.

@RequiredArgsConstructor
@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/publish");
        registry.enableSimpleBroker("/subscribe");
    }
}

3. ChatMessageController
   STOMP를 이용하면 SimpMessagingTemplate의 convertAndSend 메서드를 이용하여 컨트롤러 단에서 메시지를 보낼 수 있다.

@RestController
public class ChatMessageController {

    private final SimpMessagingTemplate template;

    @Autowired
    public ChatMessageController(SimpMessagingTemplate template) {
        this.template = template;
    }

    @MessageMapping("/chat/enter")
    public void enter(ChatMessageDto message){
        message.setMessage(message.getSenderId() + "님이 입장하셨습니다.");
        template.convertAndSend("/subscribe/chat/room/inout/" + message.getChatroomId(), message);

    }

    @MessageMapping("/chat/talk")
    public void talk(ChatMessageDto message) {
        template.convertAndSend("/subscribe/chat/room/" + message.getChatroomId(), message);
    }

    @MessageMapping("/chat/exit")
    public void exit(ChatMessageDto message) {
        message.setMessage(message.getSenderId() + "님이 퇴장하셨습니다.");
        template.convertAndSend("/subscribe/chat/room/inout/" + message.getChatroomId(), message);
    }
}

4. common.js - 프론트단에서 jwt 토큰을 쿠키에 저장

$(document).ready(function () {
    const auth = Cookies.get('Authorization');

    if(auth === undefined) {
        return '';
    }

    if (auth !== undefined && auth !== '') {
        $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
            jqXHR.setRequestHeader('Authorization', auth);

        });
    }
}