공개 채팅방 구현
사용자가 공개 방송형 채팅방에 참여하고 대화할 수 있는 기능을 개발합니다.
공개 채팅방 구현은(는) CoddyKit의 무료 WebSockets & Real-Time Systems with Spring 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 WebSockets & Real-Time Systems with Spring 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. WebSockets & Real-Time Systems with Spring 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
Public Chat Rooms Explained
Welcome! In this lesson, we'll build public chat rooms. These are common spaces where many users can send and receive messages, visible to everyone in that room.
Think of a general discussion channel in a messaging app. The key characteristic here is broadcast communication: one message sent by any user is instantly relayed to all other users currently in the room.
STOMP Topics for Rooms
In Spring with STOMP, we use topics to represent chat rooms. A topic is like a channel clients can subscribe to. Messages sent to a topic are broadcast to all its subscribers.
- For public rooms, we often use a common topic path like
/topic/public-chat. - Clients subscribe to this topic to receive messages.
- Clients send messages to a specific application destination, which the server then forwards to the topic.
Simple Chat Message Model
Before implementing the chat logic, we need a simple structure for our messages. This helps ensure everyone understands the data being sent.
A basic ChatMessage might include the message type (e.g., CHAT, JOIN, LEAVE), the sender's name, and the actual content. Here's a quick look:
public class ChatMessage {
public enum MessageType {
CHAT,
JOIN,
LEAVE
}
private MessageType type;
private String content;
private String sender;
public ChatMessage() {}
public MessageType getType() { return type; }
public void setType(MessageType type) { this.type = type; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public String getSender() { return sender; }
public void setSender(String sender) { this.sender = sender; }
@Override
public String toString() {
return "ChatMessage{" + "type=" + type + ", sender='" + sender + "', content='" + content + "'}";
}
}Server-Side Chat Controller
To handle incoming chat messages and broadcast them, we'll create a Spring @Controller. This controller will listen for messages sent to a specific application destination (e.g., /app/chat.sendMessage) and then use a SimpMessageSendingOperations (often SimpMessagingTemplate) to broadcast them to our public topic (/topic/public-chat).
Try running this example:
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Controller;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
// ChatMessage POJO (for simplicity, included here)
class ChatMessage {
public enum MessageType { CHAT, JOIN, LEAVE }
private MessageType type;
private String content;
private String sender;
public ChatMessage() {}
public MessageType getType() { return type; }
public void setType(MessageType type) { this.type = type; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public String getSender() { return sender; }
public void setSender(String sender) { this.sender = sender; }
@Override
public String toString() {
return "ChatMessage{" + "type=" + type + ", sender='" + sender + "', content='" + content + "'}";
}
}
// WebSocket Configuration
@Configuration
@EnableWebSocketMessageBroker
class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
// Chat Controller
@Controller
class ChatController {
private final SimpMessageSendingOperations messagingTemplate;
public ChatController(SimpMessageSendingOperations messagingTemplate) {
this.messagingTemplate = messagingTemplate;
}
@MessageMapping("/chat.sendMessage")
public void sendMessage(@Payload ChatMessage chatMessage) {
System.out.println("Received CHAT message from " + chatMessage.getSender() + ": " + chatMessage.getContent());
messagingTemplate.convertAndSend("/topic/public-chat", chatMessage);
}
}
// Main Application
@SpringBootApplication
public class Main {
public static void main(String[] args) {
SpringApplication.run(Main.class, args);
System.out.println("\n--- Spring Boot Chat Server Started ---");
System.out.println("Connect to ws://localhost:8080/ws");
System.out.println("Send CHAT messages to /app/chat.sendMessage and subscribe to /topic/public-chat");
}
}Broadcasting User Joins
When a user first connects or explicitly "joins" a chat room, it's good practice to notify everyone else. We can do this by sending a special JOIN type message.
Our @MessageMapping can detect these join events and broadcast them to the same public topic. This way, all clients know who has entered the room.
Let's extend our ChatController to handle JOIN messages:
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.simp.SimpMessageSendingOperations;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.stereotype.Controller;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
class ChatMessage {
public enum MessageType { CHAT, JOIN, LEAVE }
private MessageType type;
private String content;
private String sender;
public ChatMessage() {}
public MessageType getType() { return type; }
public void setType(MessageType type) { this.type = type; }
public String getContent() { return content; }
public void setContent(String content) { this.content = content; }
public String getSender() { return sender; }
public void setSender(String sender) { this.sender = sender; }
@Override
public String toString() {
return "ChatMessage{" + "type=" + type + ", sender='" + sender + "', content='" + content + "'}";
}
}
@Configuration
@EnableWebSocketMessageBroker
class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
@Controller
class ChatController {
private final SimpMessageSendingOperations messagingTemplate;
public ChatController(SimpMessageSendingOperations messagingTemplate) {
this.messagingTemplate = messagingTemplate;
}
@MessageMapping("/chat.sendMessage")
public void sendMessage(@Payload ChatMessage chatMessage) {
System.out.println("Received CHAT message from " + chatMessage.getSender() + ": " + chatMessage.getContent());
messagingTemplate.convertAndSend("/topic/public-chat", chatMessage);
}
@MessageMapping("/chat.addUser")
public void addUser(@Payload ChatMessage chatMessage) {
if (chatMessage.getType() == ChatMessage.MessageType.JOIN) {
System.out.println(chatMessage.getSender() + " JOINED the chat!");
messagingTemplate.convertAndSend("/topic/public-chat", chatMessage);
}
}
}
@SpringBootApplication
public class Main {
public static void main(String[] args) {
SpringApplication.run(Main.class, args);
System.out.println("\n--- Spring Boot Chat Server Started with JOIN handling ---");
System.out.println("Connect to ws://localhost:8080/ws");
System.out.println("Send JOIN messages to /app/chat.addUser");
System.out.println("Send CHAT messages to /app/chat.sendMessage");
System.out.println("Subscribe to /topic/public-chat");
}
}Client: Connect & Subscribe
On the client-side (e.g., using JavaScript and SockJS/STOMP.js), the first step is to establish a WebSocket connection and then subscribe to the public chat topic.
The client uses the STOMP client to connect to the /ws endpoint and then subscribes to /topic/public-chat to receive all broadcast messages.
// Assuming SockJS and STOMP.js are loaded
var socket = new SockJS('/ws'); // Connect to our WebSocket endpoint
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('Connected: ' + frame);
// Subscribe to the public chat topic
stompClient.subscribe('/topic/public-chat', function(message) {
var chatMessage = JSON.parse(message.body);
console.log('Received message: ' + chatMessage.content + ' from ' + chatMessage.sender);
// Update UI with the message
});
// Send a JOIN message (example)
stompClient.send("/app/chat.addUser", {}, JSON.stringify({
sender: 'User123',
type: 'JOIN'
}));
});Client: Sending Chat Messages
Once connected and subscribed, clients can send chat messages to the server. These messages are sent to the application destination (e.g., /app/chat.sendMessage) that our Spring controller is listening to.
The server then processes this message and broadcasts it back to all subscribers of /topic/public-chat, including the sender.
// Function to send a chat message
function sendChatMessage(senderName, messageContent) {
if (stompClient && stompClient.connected) {
var chatMessage = {
sender: senderName,
content: messageContent,
type: 'CHAT'
};
stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));
console.log("Sent: " + chatMessage.content);
} else {
console.log("STOMP client not connected.");
}
}
// Example usage:
// sendChatMessage('Alice', 'Hello everyone!');The Full Chat Flow
Let's visualize the complete flow for a public chat room:
- Client Connects: A user's browser connects to the WebSocket endpoint (
/ws). - Client Subscribes: The client subscribes to the public topic (
/topic/public-chat) to receive messages. - Client Joins: The client sends a
JOINmessage to the server (/app/chat.addUser). - Server Broadcasts Join: The server receives the
JOINmessage and broadcasts it to/topic/public-chat. All clients receive the "user joined" notification. - Client Sends Chat: A client sends a
CHATmessage to the server (/app/chat.sendMessage). - Server Broadcasts Chat: The server receives the
CHATmessage and broadcasts it to/topic/public-chat. All clients receive the chat message.
Public Chat Best Practices
When building public chat rooms, consider these points for a better user experience and server performance:
- Message History: Implement a way to store and retrieve past messages for new users joining the room.
- User Presence: Track active users in a room (e.g., using an in-memory map or a database).
- Rate Limiting: Prevent spamming by limiting how frequently a user can send messages.
- Moderation: Provide tools for moderators to remove inappropriate messages or ban users.
- Scalability: For large-scale public chats, consider external message brokers like RabbitMQ or Kafka.
Public Chat Room Check
Which of the following are true about implementing public chat rooms using Spring WebSockets and STOMP?
Recap: Public Chat Rooms
In this lesson, you learned how to implement public, broadcast-style chat rooms using Spring WebSockets and STOMP.
- We saw how STOMP topics (e.g.,
/topic/public-chat) serve as the channels for rooms. - You learned to use
@MessageMappingandSimpMessageSendingOperationson the server to handle incoming messages and broadcast them. - We explored how to handle user join events and notify all participants.
- Finally, we touched upon client-side interaction and important best practices for robust chat applications.
Next, we'll dive into implementing private, one-on-one messaging!
자주 묻는 질문
“공개 채팅방 구현” 강의는 무료인가요?
네 — “공개 채팅방 구현” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 WebSockets & Real-Time Systems with Spring 강의 전체를 잠금 해제할 수 있습니다. WebSockets & Real-Time Systems with Spring 강의에는 총 4개의 강의가 포함되어 있습니다.
“공개 채팅방 구현”에서 뭘 배우나요?
사용자가 공개 방송형 채팅방에 참여하고 대화할 수 있는 기능을 개발합니다. 브라우저에서 직접 실행하는 실습 코드로 WebSockets & Real-Time Systems with Spring을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
WebSockets & Real-Time Systems with Spring을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 WebSockets & Real-Time Systems with Spring은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“공개 채팅방 구현” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 WebSockets & Real-Time Systems with Spring 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 WebSockets & Real-Time Systems with Spring 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.