728x90
반응형
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") // 클라이언트에서 "/app/chat.sendMessage"로 전송된 메시지 처리
@SendTo("/topic/public") // "/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; // 메시지 타입 (CHAT, JOIN, LEAVE)
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>
var stompClient = null;
var username = null;
function connect() {
username = document.getElementById('username').value;
if (!username) {
alert("Enter your name!");
return;
}
var socket = new SockJS('/ws');
stompClient = Stomp.over(socket);
stompClient.connect({}, function () {
document.getElementById('chat-container').style.display = 'block';
stompClient.subscribe('/topic/public', function (message) {
showMessage(JSON.parse(message.body));
});
stompClient.send("/app/chat.addUser",
{},
JSON.stringify({ sender: username, type: 'JOIN' })
);
});
}
function sendMessage() {
var message = document.getElementById('message').value;
if (message) {
stompClient.send("/app/chat.sendMessage",
{},
JSON.stringify({ sender: username, content: message, type: 'CHAT' })
);
document.getElementById('message').value = '';
}
}
function showMessage(message) {
var messages = document.getElementById('messages');
var messageElement = document.createElement('li');
messageElement.textContent = message.sender + ": " + message.content;
messages.appendChild(messageElement);
}
</script>
</body>
</html>
6. 실행 결과
1. 여러 클라이언트가 브라우저에서 chat.html을 열고 WebSocket 연결을 생성합니다.
2. 사용자가 메시지를 입력하면 메시지가 서버를 통해 다른 클라이언트로 전송됩니다.
3. 새 사용자가 입장하면 "XXX님이 입장하셨습니다!" 메시지가 표시됩니다.
정리
이번 글에서는 Spring Boot와 WebSocket을 활용해 실시간 채팅 애플리케이션을 구현해 보았습니다.
WebSocket은 실시간 데이터 전송이 필요한 다양한 애플리케이션에 활용할 수 있습니다.
이번 예제를 바탕으로 더 복잡한 채팅 기능이나 실시간 데이터 처리 애플리케이션을 개발해 보세요!
728x90
반응형
'통신&프로토콜&네트워크' 카테고리의 다른 글
| 웹 개발의 핵심: AJP와 HTTP를 활용한 WEB-WAS 연동 전략(feat. 아파치, 톰캣) (24) | 2024.02.21 |
|---|---|
| JSON 이해하기: 개발자의 기본기 (WITH 자바예제) (0) | 2024.02.18 |
