WebSockets & Real-Time Systems with Spring · Leçon

Mise en œuvre de salons de discussion publics

Développez les fonctionnalités permettant aux utilisateurs de rejoindre des salons de discussion publics et d’y participer selon un modèle de diffusion.

Mise en œuvre de salons de discussion publics est une leçon WebSockets & Real-Time Systems with Spring gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage WebSockets & Real-Time Systems with Spring, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours WebSockets & Real-Time Systems with Spring comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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 JOIN message to the server (/app/chat.addUser).
Server Broadcasts Join: The server receives the JOIN message and broadcasts it to /topic/public-chat. All clients receive the "user joined" notification.
Client Sends Chat: A client sends a CHAT message to the server (/app/chat.sendMessage).
Server Broadcasts Chat: The server receives the CHAT message 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 @MessageMapping and SimpMessageSendingOperations on 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!

Questions Fréquemment Posées

La leçon « Mise en œuvre de salons de discussion publics » est-elle gratuite ?

Oui — le texte complet de « Mise en œuvre de salons de discussion publics » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours WebSockets & Real-Time Systems with Spring, passe à CoddyKit PRO. Le cours WebSockets & Real-Time Systems with Spring comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Mise en œuvre de salons de discussion publics » ?

Développez les fonctionnalités permettant aux utilisateurs de rejoindre des salons de discussion publics et d’y participer selon un modèle de diffusion. Tu pratiques WebSockets & Real-Time Systems with Spring avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer WebSockets & Real-Time Systems with Spring ?

Aucune expérience préalable n'est requise. WebSockets & Real-Time Systems with Spring sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Mise en œuvre de salons de discussion publics » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon WebSockets & Real-Time Systems with Spring ?

Oui. Chaque leçon WebSockets & Real-Time Systems with Spring inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Conception d’un modèle de messages de discussion
Mise en œuvre de salons de discussion publics
Messagerie privée avec STOMP
Indicateurs de saisie et présence en ligne

← Retour à WebSockets & Real-Time Systems with Spring