WebSocket은 클라이언트와 서버 간의 양방향 실시간 통신을 가능하게 하는 강력한 프로토콜입니다.
이 글에서는 WebSocket을 활용하여 클라이언트 간 채팅 메시지가 서버를 통해 실시간으로 주고받아지는
채팅 애플리케이션을 완성해 보겠습니다.
예제는 Spring Boot와 JavaScript를 기반으로 작성되었으며, 간단히 따라 할 수 있도록 단계별로 구성했습니다.
1. 프로젝트 설정
Spring Boot 프로젝트를 생성하고, 아래의 의존성을 추가합니다:
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-websocket'
implementation 'org.springframework.boot:spring-boot-starter-web'
}
2. WebSocket 설정
Spring Boot에서 WebSocket 설정을 추가하여 클라이언트와 서버 간의 통신을 활성화합니다.
WebSocketConfig.java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic"); // 메시지를 전달할 주제(prefix)
config.setApplicationDestinationPrefixes("/app"); // 클라이언트 요청 prefix
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws") // WebSocket 엔드포인트
.setAllowedOrigins("*") // CORS 허용
.withSockJS(); // SockJS 지원
}
}
이 설정으로 클라이언트는 /ws 엔드포인트를 통해 WebSocket 연결을 생성하고, /topic 주제를 통해 메시지를 주고받을 수 있습니다.
3. 메시지 처리 컨트롤러
클라이언트에서 전송된 메시지를 처리하고, 구독 중인 모든 클라이언트에게 메시지를 브로드캐스팅합니다.
ChatController.java
@RestController
public class ChatController {
@MessageMapping("/chat.sendMessage")
@SendTo("/topic/public")
public ChatMessage sendMessage(ChatMessage chatMessage) {
return chatMessage;
}
@MessageMapping("/chat.addUser")
@SendTo("/topic/public")
public ChatMessage addUser(ChatMessage chatMessage) {
chatMessage.setContent(chatMessage.getSender() + "님이 입장하셨습니다!");
return chatMessage;
}
}
4. 메시지 데이터 모델
채팅 메시지를 표현하는 간단한 데이터 모델을 정의합니다.
ChatMessage.java
public class ChatMessage {
private String sender;
private String content;
private MessageType type;
public enum MessageType {
CHAT,
JOIN,
LEAVE
}
// Getters and Setters
}
5. 클라이언트 애플리케이션 구현
HTML, JavaScript, SockJS, Stomp.js를 활용하여 WebSocket 클라이언트를 작성합니다.
chat.html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
<script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stompjs/lib/stomp.min.js"></script>
<style>
#chat-box { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto; }
#messages { list-style: none; padding: 0; }
#messages li { margin: 5px 0; }
</style>
</head>
<body>
<div>
<input id="username" type="text" placeholder="Enter your name" />
<button onclick="connect()">Connect</button>
</div>
<div id="chat-container" style="display:none;">
<div id="chat-box">
<ul id="messages"></ul>
</div>
<input id="message" type="text" placeholder="Type your message" />
<button onclick="sendMessage()">Send</button>
</div>
<script>
// JavaScript 코드 (생략 가능)
</script>
</body>
</html>
6. 실행 결과
1. 여러 클라이언트가 브라우저에서 chat.html을 열고 WebSocket 연결을 생성합니다.
2. 사용자가 메시지를 입력하면 메시지가 서버를 통해 다른 클라이언트로 전송됩니다.
3. 새 사용자가 입장하면 "XXX님이 입장하셨습니다!" 메시지가 표시됩니다.
정리
Spring Boot와 WebSocket을 활용해 실시간 채팅 애플리케이션을 구현해 보았습니다. WebSocket은 실시간 데이터 전송이 필요한 다양한 애플리케이션에 활용할 수 있습니다. 이 예제를 바탕으로 더 복잡한 기능을 추가해 보세요!
'통신&프로토콜&네트워크' 카테고리의 다른 글
| 웹 개발의 핵심: AJP와 HTTP를 활용한 WEB-WAS 연동 전략(feat. 아파치, 톰캣) (24) | 2024.02.21 |
|---|---|
| JSON 이해하기: 개발자의 기본기 (WITH 자바예제) (0) | 2024.02.18 |
