Spring Boot를 이용한 WebSocket 지원: 실시간 통신 기능 구현하기
Overview
Spring Boot의 WebSocket 지원을 활용하면 웹 애플리케이션에서 실시간 통신 기능을 쉽게 구현할 수 있습니다. 이 기능은 특히 채팅 애플리케이션, 실시간 알림 및 데이터 업데이트에 매우 유용합니다. 이번 글에서는 Spring Boot에서 WebSocket을 설정하고 사용하는 방법을 구체적인 예시와 함께 자세히 설명하겠습니다.
WebSocket 이해하기
WebSocket은 클라이언트와 서버 간의 전이중 통신을 가능하게 하는 프로토콜입니다. HTTP 프로토콜과는 달리, WebSocket은 한 번의 연결로 양방향 통신을 할 수 있습니다. 이는 웹 애플리케이션이 사용자와 서버 간의 실시간 데이터 전송을 가능하게 하여 사용자 경험을 향상시킵니다.
예시: 채팅 애플리케이션
채팅 애플리케이션을 예로 들어보겠습니다. 사용자가 메시지를 보내면, 이 메시지가 서버로 전송되고 서버는 이를 모든 클라이언트에게 전파합니다. WebSocket을 사용하면 사용자가 새로운 메시지를 받을 때마다 페이지를 새로 고칠 필요 없이 실시간으로 업데이트된 메시지를 받을 수 있습니다.
Spring Boot에서 WebSocket 설정하기
1. 프로젝트 생성 및 의존성 추가
먼저 Spring Boot 프로젝트를 생성해야 합니다. Spring Initializr를 통해 프로젝트를 생성하고 다음 의존성을 추가합니다:
- Spring Web
- Spring WebSocket
- Spring Boot DevTools (개발 중 핫 스왑 기능을 위한 선택)
Maven을 사용할 경우, pom.xml 파일에 다음 의존성을 추가합니다:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2. WebSocket 구성 클래스 작성하기
WebSocket의 엔드포인트를 설정하기 위해 구성 클래스를 작성합니다. 이 클래스에서는 WebSocket 연결을 위한 엔드포인트를 정의하고, 메시지를 처리할 핸들러를 등록합니다.
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/chat").withSockJS();
}
}3. 메시지 핸들러 작성하기
이제 메시지를 수신하고 전송할 수 있는 핸들러를 작성합니다. @MessageMapping 애노테이션을 사용하여 클라이언트의 메시지를 처리합니다.
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
@Controller
public class ChatController {
@MessageMapping("/send")
@SendTo("/topic/messages")
public String sendMessage(String message) throws Exception {
// 메시지 처리 (여기서는 단순히 그대로 반환)
return message;
}
}4. 클라이언트 측 구현
이제 클라이언트 측에서 WebSocket 연결을 설정하고 메시지를 전송하는 코드를 작성해야 합니다. HTML 파일에서 다음과 같이 WebSocket을 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
<div id="chat">
<input type="text" id="message" placeholder="메시지 입력">
<button onclick="sendMessage()">전송</button>
</div>
<div id="messages"></div>
<script>
const socket = new SockJS('/chat');
const stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/messages', function (message) {
document.getElementById("messages").innerHTML += '<div>' + message.body + '</div>';
});
});
function sendMessage() {
const message = document.getElementById("message").value;
stompClient.send("/app/send", {}, message);
}
</script>
</body>
</html>5. 에러 처리 및 문제 해결
WebSocket을 사용할 때 몇 가지 일반적인 에러가 발생할 수 있습니다. 예를 들어, CORS 에러가 발생할 수 있습니다. 이 경우, Spring Security를 구성하여 필요한 CORS 설정을 추가해야 합니다.
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("http://localhost:8080");
}
}이렇게 구성하면 특정 도메인에서 WebSocket 연결이 허용됩니다.
마무리
이제 Spring Boot를 사용하여 WebSocket을 설정하고 실시간 통신 기능을 구현할 수 있습니다. 채팅 애플리케이션을 구축하는 과정에서 WebSocket의 강력한 기능을 활용하여 사용자와의 상호작용을 개선할 수 있습니다. 실시간 데이터 전송은 사용자 경험을 크게 향상시킬 수 있습니다.
참고문서
'Study Information Technology' 카테고리의 다른 글
| 마이크로서비스 아키텍처 개발 Spring Cloud Gateway를 통한 라우팅 및 로드 밸런싱 (0) | 2024.10.14 |
|---|---|
| Spring Boot와 Thymeleaf로 동적 웹 페이지 만들기 (0) | 2024.10.14 |
| Spring Boot와 마이크로서비스 아키텍처 통합의 이해 (0) | 2024.10.13 |
| Spring Boot 테스트 기능 단위 테스트와 통합 테스트 (0) | 2024.10.13 |
| Spring Boot에서 커스텀 어노테이션 만들기 (0) | 2024.10.13 |