스프링 웹소켓과 실시간 채팅 애플리케이션 구축

스프링 웹소켓이란?

스프링 웹소켓은 웹 브라우저와 서버 사이의 양방향 통신을 지원하는 기술로, 실시간 웹 애플리케이션 개발에 필요한 기술 중 하나입니다. HTTP 프로토콜의 한계로 인해, 기존의 웹 애플리케이션에서는 서버에서 클라이언트로 데이터를 보내기 위해 일정한 간격으로 요청을 보내야 했습니다. 하지만 스프링 웹소켓을 이용하면, 클라이언트에서 서버로 데이터를 보내거나, 서버에서 클라이언트로 데이터를 보내는 등의 양방향 통신이 가능해집니다.

스프링 웹소켓은 WebSocket API를 사용하여 클라이언트와 서버 간의 소켓 연결을 수립하고, 메시지를 주고받을 수 있습니다. 또한, STOMP (Simple Text Oriented Messaging Protocol) 프로토콜을 지원하여, 채팅 애플리케이션 등의 메시지 기반의 애플리케이션을 쉽게 개발할 수 있습니다.

실시간 채팅 애플리케이션 구축을 위한 스프링 웹소켓 설정 방법

스프링 웹소켓을 사용하여 실시간 채팅 애플리케이션을 구축하기 위해서는, 먼저 스프링 웹소켓 관련 라이브러리를 추가해야 합니다. 다음은 Gradle 빌드 도구를 사용하는 경우의 예시입니다.

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
}

스프링 웹소켓을 사용하기 위해서는, WebSocketConfigurer 인터페이스를 구현하여 WebSocket 관련 설정을 추가해야 합니다. 다음은 WebSocketConfigurer 인터페이스를 구현한 예시입니다.

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatHandler(), "/chat").setAllowedOrigins("*");
    }

    @Bean
    public WebSocketHandler chatHandler() {
        return new ChatHandler();
    }
}

위 예시에서는 "/chat" 경로로 WebSocket 핸들러를 등록하고 있습니다. ChatHandler는 WebSocketHandler 인터페이스를 구현한 클래스로, 클라이언트로부터 메시지를 수신하거나, 클라이언트에게 메시지를 전송하는 역할을 합니다.

스프링 웹소켓과 STOMP 프로토콜을 활용한 채팅 애플리케이션 개발 방법

스프링 웹소켓과 STOMP 프로토콜을 활용하여 채팅 애플리케이션을 개발하는 방법을 살펴보겠습니다.

먼저, 클라이언트에서 WebSocket을 사용하여 서버와 연결합니다. 다음은 JavaScript를 사용하여 WebSocket을 생성하는 예시입니다.

const socket = new WebSocket('ws://localhost:8080/chat');

socket.onopen = () => {
  console.log('WebSocket connection established.');
}

socket.onmessage = (event) => {
  console.log(`Received message: ${event.data}`);
}

socket.onclose = () => {
  console.log('WebSocket connection closed.');
}

위 예시에서는 "ws://localhost:8080/chat" 경로로 WebSocket 서버와 연결하고 있습니다.

다음으로, STOMP 프로토콜을 사용하여 메시지를 주고받습니다. STOMP 프로토콜은 WebSocket을 사용하는 애플리케이션에서 널리 사용되는 메시지 프로토콜로, 메시지의 구조를 정의하고, 메시지의 구분을 위한 헤더 정보를 제공합니다.

스프링 프레임워크에서는 STOMP 프로토콜을 지원하기 위해, StompSessionHandler 인터페이스를 구현한 클래스를 사용합니다. 다음은 StompSessionHandler 인터페이스를 구현한 예시입니다.

public class ChatStompSessionHandler extends StompSessionHandlerAdapter {

    private final Consumer messageHandler;

    public ChatStompSessionHandler(Consumer messageHandler) {
        this.messageHandler = messageHandler;
    }

    @Override
    public void afterConnected(StompSession session, StompHeaders headers) {
        session.subscribe("/topic/chat", this);
    }

    @Override
    public void handleFrame(StompHeaders headers, Object payload) {
        String message = new String((byte[]) payload);
        messageHandler.accept(message);
    }
}

위 예시에서는 "/topic/chat" 경로로 STOMP 구독을 등록하고 있습니다. 메시지를 수신하면, messageHandler 함수를 호출하여 메시지를 처리합니다.

클라이언트에서는 다음과 같이 STOMP 프로토콜을 사용하여 메시지를 전송할 수 있습니다.

const headers = {
  'content-type': 'application/json',
  'destination': '/app/chat'
};

const message = {
  'sender': 'Alice',
  'content': 'Hello, Bob!'
};

socket.send(JSON.stringify(headers) + 'n' + JSON.stringify(message));

위 예시에서는 "/app/chat" 경로로 STOMP 메시지를 전송하고 있습니다. 메시지의 내용은 JSON 형식으로 작성되어 있습니다.

이제, 스프링 웹소켓과 STOMP 프로토콜을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법을 살펴보았습니다. 스프링 웹소켓과 STOMP 프로토콜을 사용하면, 채팅 애플리케이션 뿐만 아니라, 실시간으로 데이터를 전송하는 다양한 웹 애플리케이션을 쉽게 개발할 수 있습니다.