본문 바로가기

Spring

Spring Boot로 실시간 웹 애플리케이션 구현하기: WebSocket 도입 방법과 간단한 예제

728x90
반응형

실시간 데이터 전송이 필요한 웹 애플리케이션에서는 WebSocket이 필수적인 기술로 자리잡고 있습니다. 채팅 애플리케이션, 실시간 알림 시스템, 주식 시세 업데이트 등 다양한 실시간 기능을 지원하기 위해서는 HTTP 기반의 전통적인 요청-응답 모델을 넘어선 기술이 필요합니다. 이번 블로그에서는 Spring Boot 프로젝트에 WebSocket을 적용하는 방법을 간단한 예제와 함께 알아보겠습니다.

WebSocket의 기본 개념

WebSocket은 클라이언트와 서버 간의 양방향 통신을 실시간으로 가능하게 하는 프로토콜입니다. HTTP와는 다르게, 일단 연결이 이루어지면 클라이언트와 서버가 자유롭게 데이터를 주고받을 수 있습니다. 이를 통해, 클라이언트가 데이터를 요청하기를 기다리지 않고, 서버가 직접 클라이언트로 데이터를 푸시할 수 있게 됩니다.

주요 개념은 다음과 같습니다:

  1. 양방향 통신: 클라이언트와 서버가 모두 데이터를 보낼 수 있는 방식으로, HTTP와는 달리 서버도 클라이언트에게 데이터를 자유롭게 전송할 수 있습니다.
  2. 지속적인 연결: WebSocket은 초기 핸드셰이크를 제외하고는 HTTP를 사용하지 않으며, 연결이 지속적으로 열려있는 상태로 남아있습니다.
  3. 낮은 오버헤드: HTTP 요청/응답의 헤더와 달리 WebSocket은 훨씬 더 가벼운 패킷을 사용하여 네트워크 오버헤드가 낮습니다.
반응형

Spring Boot에서 WebSocket 적용 방법

Spring Boot에서는 WebSocket을 손쉽게 설정하고 사용할 수 있습니다. 아래의 단계들을 통해 간단한 WebSocket 서버를 구현해보겠습니다.

의존성 추가

먼저 build.gradle 또는 pom.xml에 WebSocket을 사용하기 위한 의존성을 추가해야 합니다.

implementation 'org.springframework.boot:spring-boot-starter-websocket'

WebSocket 설정

다음으로 WebSocket을 설정하는 클래스를 작성합니다. 이 클래스에서는 WebSocket 엔드포인트를 정의하고, 필요한 핸들러를 등록합니다.

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

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

이 설정에서는 /chat 엔드포인트를 통해 WebSocket 연결을 허용하며, 모든 출처(origin)에서의 접근을 허용하고 있습니다.

WebSocket 핸들러 구현

핸들러는 WebSocket 메시지를 처리하는 핵심 요소입니다. 여기서는 간단한 채팅 핸들러를 구현해보겠습니다.

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.ArrayList;
import java.util.List;

public class ChatHandler extends TextWebSocketHandler {

    private final List<WebSocketSession> sessions = new ArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession webSocketSession : sessions) {
            webSocketSession.sendMessage(new TextMessage(message.getPayload()));
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}

이 ChatHandler 클래스는 모든 연결된 클라이언트에게 메시지를 브로드캐스트하는 간단한 채팅 서버를 구현한 것입니다. 새로운 메시지가 수신되면, 모든 세션에 그 메시지를 전송합니다.

클라이언트 구현

마지막으로, WebSocket 클라이언트를 구현하여 서버와 연결을 테스트할 수 있습니다. 다음은 JavaScript를 사용한 간단한 클라이언트 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
</head>
<body>
    <div>
        <input type="text" id="messageInput" placeholder="메시지를 입력하세요" />
        <button onclick="sendMessage()">전송</button>
    </div>
    <div id="chatOutput"></div>

    <script type="text/javascript">
        var socket = new WebSocket("ws://localhost:8080/chat");

        socket.onmessage = function(event) {
            var chatOutput = document.getElementById("chatOutput");
            var message = document.createElement("p");
            message.textContent = event.data;
            chatOutput.appendChild(message);
        };

        function sendMessage() {
            var messageInput = document.getElementById("messageInput");
            socket.send(messageInput.value);
            messageInput.value = '';
        }
    </script>
</body>
</html>

이 간단한 HTML 페이지는 서버에 WebSocket을 통해 연결하고, 메시지를 전송하며, 다른 클라이언트로부터 수신된 메시지를 표시합니다.

728x90

WebSocket은 실시간 데이터 통신이 중요한 웹 애플리케이션에서 필수적인 기술입니다. Spring Boot를 사용하면 WebSocket을 손쉽게 설정하고 적용할 수 있습니다. 이번 블로그에서는 간단한 채팅 서버를 예제로 WebSocket의 기본 개념과 구현 방법을 설명하였습니다. WebSocket을 활용하여 여러분의 웹 애플리케이션에 실시간 기능을 더해보세요!

728x90
반응형