[STOMP] 스프링 + JWT + STOMP 로 채팅 기능 구현

웹 소켓은 예전부터 사용해보고 싶었다. 직전 프로젝트에서 실시간 알람 기능을 추가했는데 그때 사용하려다 알람에는 SSE가 더 적절해 보였고 소켓은 사용하지 않았고 이번에 개인적으로 채팅 서비스를 구현하기로 했다. 

 

웹 소켓에 대해 알아보기 전 http 통신의 특징과 한계에 대해 알아보자

 

 

 

http 통신의 특징과 한계

http통신은 HyperText Transfer Plotocol의 약자로서 오늘날 광범위하고 일반적으로 사용되는 통신 기법이다.
http의 통신 과정은 아래와 같다.

 

1. client가 server에게 자신이 받고싶은 정보를 request에 담아 전송한다.
2. server는 client의 request에 따라서 알맞은 response로 응답한다.
3. client는 server에게 받은 response의 데이터를 사용한다.

즉 서버에서 데이터를 제공하는 시점은 client가 server에 요청을 했을 때 이다.

 

http통신의 가장 큰 특징 중 Stateless, Connectionless라는 특징이 있다.
client가 server에 request를 보내면, 서버는 클라이언트에게 response를 하고, 그 이후 연결이 끊어져 서버와 클라이언트는 독립된 상태를 유지하는 것이다.

 

따라서 http 통신으로 실시간 채팅을 구현하려면 아래와 같은 절차를 밟아야 한다.

1. client1이 서버에 메세지를 전송하고,
2. server는 그 메세지를 client2에게 전송하고,
3. client2는 자신에게 온 메세지를 확인한다.

그렇다면 client2는 언제 어느 주기로 자신에게 메세지가 왔는지 확인해야할까? 주기적으로 요청하는 방법밖에 없는데 이렇게 되면 서버에 무리가 나며 실시간 채팅 기능이라고도 할 수 없다. 

 

따라서 클라이언트가 서버와 한번 연결을 맺고 나면 커넥션을 끊지 않고 유지하고 있어야 한다. 

 

 

 

SSE(server push)

sse는 server sent event의 줄임말로 이벤트가 [서버 -> 클라이언트] 방향으로만 흐르는 단방향 통신 채널이다. SSE는 클라이언트가 polling과 같이 주기적으로 http 요청을 보낼 필요없이 http 연결을 통해 서버에서 클라이언트로 데이터를 보낼 수 있다. 

알림 같은 경우 서버와 연결되어 있는 클라이언트에게 서버가 데이터를 보내는 것이다. 따라서 서버->클라이언트 커넥션만 유지하고 있어도 충분하다. 

 

하지만 채팅은 유저 A가 서버에 데이터를 보내고 서버는 채팅방에 있는 모든 유저 B, C, D.. 에게 데이터를 전송해야 한다. 마찬가지로 B, C, D..도 메세지를 보낼 수 있다. 따라서 web socket 기술을 사용해야 한다.

 

 

 

Web Socket

Web socket은 실시간 양방향 통신을 위한 스펙으로 서버와 브라우저가 지속적으로 연결된 TCP라인을 통해 실시간으로 데이터를 주고받을 수 있다. 

지속적으로 업데이트되는 정보를 수신해야 하는 채팅이나 주식 보고서에서 WebSocket 프로토콜을 사용하는 이점이 있다. 이 프로토콜은 정보를 동시에 송수신할 수 있으므로 전이중 양방향 통신이 가능하므로 정보 교환이 더 빨라진다.

웹 소켓 동작 원리는 무엇일까?

클라이언트와 서버 간의 연결은 당사자 중 하나에 의해 종료되거나 시간 초과에 의해 닫힐 때까지 열린 상태로 유지된다. 클라이언트와 서버 간의 연결을 설정하기 위해 위 사진 처럼 핸드셰이크를 수행한다. 설정된 연결은 열린 상태로 유지되며 클라이언트 또는 서버 측에서 연결이 종료될 때까지 동일한 채널을 사용하여 통신이 수행된다. 따라서 메시지는 양방향으로 전송될 수 있다.

 

 

웹 소켓의 특징

1. 양방향 통신
   • 데이터 송수신을 동시에 처리할 수 있는 통신 방법
   • 통상적인 http 통신은 client가 요청을 보내는 경우에만 server에서 응답
2. 실시간 네트워킹
   • 웹 환경에서 연속된 데이터를 빠르게 노출
   • ex) 채팅, 주식, 비디오 데이터
3. 요청 해더
   • Upgrade: websocket
   • Connection: Upgrade
   • 위 두 헤더가 없으면 웹 소켓 연결이 되지 않는다.
   • GET방식으로 핸드쉐이킹 하며 HTTP 버전은 반드시 1.1 이상
   • 위 내용들은 Nginx를 사용 할 때 따로 설정해줘야 했던 부분들임

 

 

 

코드로 살펴보자

WebSocketConfig.class

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

    private final ChatPreHandler chatPreHandler;
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/send");
        registry.enableSimpleBroker("/room");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws-stomp").setAllowedOriginPatterns("*").withSockJS();
    }

   
    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.interceptors(chatPreHandler);
    }
}

• configureMessageBroker
  • 보낼 때와 받을 때의 prefix 지정
  • 클라이언트가 메시지를 보낼 때 경로 맨앞에 "/send"이 붙어있으면 Broker로 보내짐.
  • "/room" 경로가 붙은 경우 messageBroker가 잡아서 해당 채팅방을 구독하고 있는 클라이언트에게 메시지를 전달해줌
• registerStompEndpoints
  • Client에서 websocket연결할 때 사용할 API 경로를 설정해주는 메서드.
• configureClientInboundChannel
  • 인증된 사용자만 받기 위해 chatPreHandler 등록.

 

ChatPreHandler

@RequiredArgsConstructor
@Component
@Slf4j
public class ChatPreHandler implements ChannelInterceptor {

    private final JwtTokenProvider jwtTokenProvider;
    private static final String BEARER_PREFIX = "Bearer ";

    // websocket을 통해 들어온 요청이 처리 되기전 실행된다.
    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);
        if (StompCommand.CONNECT == accessor.getCommand()) { // websocket 연결요청
            String jwtToken = accessor.getFirstNativeHeader("Authorization");
            log.info("CONNECT {}", jwtToken);
            // Header의 jwt token 검증
            String token = jwtToken.substring(7);
            jwtTokenProvider.validateTokenInChat(token);
        }

        return message;
    }
}

 

 

ChatController.class

@Controller
@RequiredArgsConstructor
@Slf4j
public class ChatController {
    private final ChatService chatService;
    private final JwtTokenProvider jwtTokenProvider;

    @MessageMapping("/{roomId}")
    @SendTo("/room/{roomId}") // 여길 구독하고 있는 곳으로 메시지 전송
    public ChatDto messageHandler(@DestinationVariable Long roomId, ChatDto message, @Header("token") String token) {
        String loginId = jwtTokenProvider.getUserNameFromJwt(token);//loginId 가져옴
        return chatService.createChat(roomId, message.getMessage(), loginId);
    }
}

 

 

Client

Socket 연결, 메시지 send 등 클라이언트 코드는 아래와 같이 작성하였다.

채팅 구현 관련 블로그 글을 보면 클라이언트쪽 코드가 잘 없어 힘들었기에 전체 코드를 공유한다.

<script th:inline="javascript">
    // WebSocket 연결을 관리하는 클라이언트
    let stompClient = null;

    // 서버에서 받아온 방 ID와 채팅 목록
    let roomId = [[${roomId}]];
    let chatList = [[${chatList}]];
    const token = localStorage.getItem('token');
    const name = localStorage.getItem('name');

    // 웹 소켓 연결 생성
    function connect() {
        var socket = new SockJS('/ws-stomp');
        stompClient = Stomp.over(socket);

        let headers = {Authorization: token};
        stompClient.connect(headers, function (frame) {
            console.log('Connected: ' + frame);
            loadChat(chatList); // 저장된 채팅 불러오기

            // 구독 설정
            stompClient.subscribe('/room/' + roomId, function (chatMessage) {
                console.log(JSON.parse(chatMessage.body));
                showChat(JSON.parse(chatMessage.body));
            });
        });
    }

    // 스크롤 항상 아래로 유지
    function scrollChatToBottom() {
        let chatContainer = document.getElementById('chatting');
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }

    function disconnect() {
        if (stompClient !== null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }


    // 입력된 채팅 전송
    function sendChat() {
        const message = $("#message").val();
        // WebSocket 통신을 위한 헤더 설정
        const headers = {
            "token": token // 토큰 값을 여기에 넣어주세요
        };
        stompClient.send("/send/" + roomId, headers, JSON.stringify({message: message}))
        $("#message").val("");
    }

    // 저장된 채팅 불러와 화면에 표시
    function loadChat(chatList) {
        if (chatList != null) {
            for (let chat of chatList) {
                let chatHtml = '';
                if (chat.sender !== name) {
                    chatHtml = `<div class="chat ch1">
                    <div class="icon"><i class="fa-solid fa-user"></i></div>
                    <div class="sender">${chat.sender}</div>
                    <div class="textbox">${chat.message}</div>
                </div>`;
                } else if (chat.sender === name) {
                    chatHtml = `<div class="chat ch2">
                    <div class="icon"><i class="fa-solid fa-user"></i></div>
                    <div class="sender">${chat.sender}</div>
                    <div class="textbox">${chat.message}</div>
                </div>`;
                }
                $("#chatting").append(chatHtml);
            }
        }
    }


    // 실시간으로 받은 채팅을 화면에 표시
    function showChat(chatMessage) {
        let chatHtml = '';
        if (chatMessage.sender !== name) {
            chatHtml = `<div class="chat ch1">
            <div class="icon"><i class="fa-solid fa-user"></i></div>
            <div class="sender">${chatMessage.sender}</div>
            <div class="textbox">${chatMessage.message}</div>
        </div>`;
        } else if (chatMessage.sender === name) {
            chatHtml = `<div class="chat ch2">
            <div class="icon"><i class="fa-solid fa-user"></i></div>
            <div class="sender">${chatMessage.sender}</div>
            <div class="textbox">${chatMessage.message}</div>
        </div>`;
        }
        $("#chatting").append(chatHtml);
        scrollChatToBottom(); // 스크롤 항상 아래로 유지
    }

    // 폼 제출 시 기본 동작 방지
    $(function () {
        $("#chat-form").on('submit', function (e) {
            e.preventDefault();
        });
        // 버튼 클릭 이벤트에 함수 할당
        $("#send").click(function () {
            sendChat();
        });
    });

</script>