스프링 웹소켓을 이용한 실시간 채팅 애플리케이션 개발 방법

스프링 웹소켓 채팅 애플리케이션

스프링 웹소켓은 HTML5에서 표준으로 제공하는 WebSocket API를 이용하여 웹 브라우저와 웹 서버간 실시간 양방향 통신을 구현할 수 있는 기술입니다. 이번에는 스프링 웹소켓을 이용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보겠습니다.

개발환경 설정과 의존성 추가

우선 개발환경을 설정하고 필요한 의존성을 추가해야 합니다. 스프링 부트를 이용하여 개발하므로, 스프링 부트 스타터 프로젝트를 생성하고, build.gradle 파일에 아래와 같이 의존성을 추가합니다.

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
    implementation 'org.webjars:webjars-locator-core'
    implementation 'org.webjars:sockjs-client:1.0.2'
    implementation 'org.webjars:stomp-websocket:2.3.3'
}

• spring-boot-starter-websocket: 스프링 웹소켓 기능을 제공하는 스타터 의존성입니다.
• webjars-locator-core: 웹 자원을 관리하는 Webjars를 사용하기 위한 의존성입니다.
• sockjs-client: SockJS 클라이언트를 사용하기 위한 의존성입니다.
• stomp-websocket: STOMP 프로토콜을 사용하기 위한 의존성입니다.

의존성 추가가 완료되면, IDE에서 프로젝트를 Import하여 WebSocketConfiguration 클래스를 생성합니다.

WebSocketConfiguration 구현

WebSocketConfiguration 클래스는 스프링 웹소켓을 구성하는 클래스입니다. @EnableWebSocketMessageBroker 어노테이션을 이용하여 웹소켓 메시지 브로커를 활성화합니다.

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer {
}

이어서 configureMessageBroker() 메소드를 오버라이딩하여 메시지 브로커를 구성합니다. 메시지 브로커는 클라이언트로부터 메시지를 수신하고, 구독 중인 클라이언트에게 메시지를 전달하는 역할을 합니다.

@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
    config.enableSimpleBroker("/topic");
    config.setApplicationDestinationPrefixes("/app");
}

• enableSimpleBroker(): "/topic" prefix로 시작하는 대상 구독자에게 메시지를 전달합니다.
• setApplicationDestinationPrefixes(): "/app" prefix로 시작하는 대상 메시지를 처리합니다.

이어서 registerStompEndpoints() 메소드를 오버라이딩하여 STOMP 엔드포인트를 등록합니다. STOMP 프로토콜은 WebSocket을 기반으로 하며, HTTP 엔드포인트를 WebSocket 엔드포인트로 업그레이드할 수 있습니다.

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

• addEndpoint(): "/chat" 엔드포인트를 등록합니다.
• withSockJS(): SockJS를 사용하여 클라이언트에서 WebSocket을 지원하지 않을 경우, 대체 수단으로 사용할 수 있도록 합니다.

WebSocketHandler 구현 및 통신 구현

WebSocketHandler는 클라이언트와 서버간의 웹소켓 메시지를 처리하는 핸들러 클래스입니다. 이번에는 WebSocketHandler를 구현하고, 클라이언트와 서버간의 통신을 구현해보겠습니다.

먼저, WebSocketHandler를 상속하여 ChatWebSocketHandler 클래스를 구현합니다.

public class ChatWebSocketHandler extends TextWebSocketHandler {
}

이어서, 클라이언트가 연결되었을 때 호출되는 afterConnectionEstablished() 메소드를 오버라이딩하여 클라이언트와의 연결을 처리합니다.

@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    super.afterConnectionEstablished(session);
    log.info("Connected session id {}", session.getId());
}

• WebSocketSession: 클라이언트와 연결된 WebSocketSession 객체입니다.

그리고, 클라이언트로부터 메시지를 수신할 때 호출되는 handleTextMessage() 메소드를 오버라이딩하여 클라이언트로부터 수신된 메시지를 처리합니다.

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    super.handleTextMessage(session, message);
    log.info("Received message : {} from session id {}", message.getPayload(), session.getId());
    session.sendMessage(new TextMessage("Hello, " + message.getPayload()));
}

• TextMessage: 클라이언트로부터 수신된 메시지 객체입니다.

마지막으로, 클라이언트와 연결이 종료될 때 호출되는 afterConnectionClosed() 메소드를 오버라이딩하여 클라이언트와의 연결을 종료합니다.

@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
    super.afterConnectionClosed(session, status);
    log.info("Disconnected session id {}", session.getId());
}

WebSocketHandler를 구현한 후, ChatController 클래스를 생성하여 클라이언트와의 통신을 처리합니다.

@Controller
public class ChatController {
    @MessageMapping("/chat")
    @SendTo("/topic/messages")
    public ChatMessage sendMessage(ChatMessage chatMessage) {
        return chatMessage;
    }
}

• @MessageMapping: 클라이언트로부터 수신된 메시지를 처리할 대상 메서드를 지정합니다.
• @SendTo: 지정된 prefix로 시작하는 대상 구독자에게 메시지를 전달합니다.

이제, 웹소켓 메시지를 전송하는 클라이언트 코드를 작성합니다.

var socket = new SockJS('/chat');
var stompClient = Stomp.over(socket);

stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);
    stompClient.subscribe('/topic/messages', function (message) {
        console.log(message);
    });
});

function sendMessage() {
    stompClient.send("/app/chat", {}, JSON.stringify({'content': $("#message").val()}));
    $("#message").val('');
}

• SockJS: WebSocket이 지원되지 않는 브라우저에서 대체 수단으로 사용할 수 있는 클라이언트 라이브러리입니다.
• Stomp: WebSocket을 이용하여 메시지를 주고받기 위한 프로토콜입니다.
• connect(): 서버와 연결합니다.
• subscribe(): 서버로부터 메시지를 구독합니다.
• send(): 서버로 메시지를 전송합니다.

결론

이번에는 스프링 웹소켓을 이용하여 실시간 채팅 애플리케이션을 개발하는 방법에 대해 알아보았습니다. 스프링 웹소켓을 이용하면, 웹 브라우저와 웹 서버간의 실시간 양방향 통신을 구현할 수 있으며, STOMP 프로토콜을 사용하여 메시지를 주고받을 수 있습니다. 이를 이용하여 다양한 실시간 애플리케이션을 개발할 수 있습니다.