spring boot websocket

Construire une application de chat en temps réel avec Spring Boot et WebSocket

Qu'est-ce que WebSocket?

WebSocket est un protocole de communication informatique, fournissant des canaux de communication complexe sur une connexion TCP unique. WebSocket est distinct de HTTP. Le protocole permet une interaction entre un navigateur Web (ou une autre application client) et un serveur Web avec des frais généraux inférieurs à des alternatives à demi-duplex telles que le sondage HTTP, facilitant le transfert de données en temps réel et vers le serveur.

Une fois qu'une connexion WebSocket est établie entre un client et un serveur, les deux peuvent échanger des informations jusqu'à ce que la connexion soit fermée par l'une des parties.

Il s'agit de la principale équipe que WebSocket est préférée au protocole HTTP lors de la création d'un service de communication en forme de chat qui fonctionne à haute fréquence avec une faible latence.

Qu'est-ce que Stomp?

Le protocole de messages (STOMP) simple (ou en streaming) (STOMM), anciennement connu sous le nom de TTMP, est un protocole simple basé sur le texte, conçu pour travailler avec des middleware orientés messages (MOM). Il fournit un format de fil interopérable qui permet aux clients STOMP de parler avec tout courtier de messages prenant en charge le protocole.

Étant donné que WebSocket n'est qu'un protocole de communication, il ne sait pas comment envoyer un message à un utilisateur particulier. Stomp est essentiellement un protocole de messagerie qui est utile pour ces fonctionnalités.

Configuration de l'application

Notre application aura la configuration suivante qui peut être définie à l'aide de Spring Initializr:

• Version Java: 11

• Type: Maven Project

• Dépendances: WebSocket

• Spring Boot Version: 2.4.2

Structure du projet

Configuration de WebSocket

La configuration de notre courtier de point final WebSocket et de message est assez simple.

 @Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

• @EnablewebsocketMessageBroker Annotation est utilisé pour activer notre serveur WebSocket.

• L'interface WebSocketMessageBrokerConfigurer est utilisée pour fournir une implémentation à certaines de ses méthodes pour configurer la connexion WebSocket.

• La méthode RegisterStompendPoints est utilisée pour enregistrer un point de terminaison WebSocket que les clients utiliseront pour se connecter au serveur.

• La méthode ConfigureMessageBroker est utilisée pour configurer notre courtier de messages qui sera utilisé pour acheminer les messages d'un client à un autre.

SOCKJS est également utilisé pour permettre des options de secours pour les navigateurs qui ne prennent pas en charge WebSocket.

Créer un modèle de chat

Notre modèle de chat est la charge utile du message qui sera échangée entre le côté client et le côté serveur de l'application.

 public class ChatMessage {
    private String content;
    private String sender;
    private MessageType type;

    public enum MessageType {
        *CHAT*, *LEAVE*, *JOIN
    *}

    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;
    }

    public MessageType getType() {
        return type;
    }

    public void setType(MessageType type) {
        this.type = type;
    }
}

Créer notre contrôleur de chat

Notre contrôleur sera responsable de la gestion de toutes les méthodes de messages présentes dans notre application de chat qui recevra essentiellement des messages d'un client, puis la diffusera à d'autres.

 @Controller
public class ChatController {

    @MessageMapping("/chat.register")
    @SendTo("/topic/public")
    public ChatMessage register(@Payload ChatMessage chatMessage, SimpMessageHeaderAccessor headerAccessor) {
        headerAccessor.getSessionAttributes().put("username", chatMessage.getSender());
        return chatMessage;
    }

    @MessageMapping("/chat.send")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }
}

L'utilisation de / App comme point de destination est due à notre fichier de configuration WebSocket qui indique que tous les messages seront acheminés vers ces méthodes de manutention annotées avec @MessageMapping.

Création d'une interface utilisateur frontale

Notre interface utilisateur est une simple boîte de cartes construite à l'aide de HTML et CSS qui exécute certaines fonctions JS pour envoyer et recevoir des messages.

• index.html est un fichier html qui contient une structure de base a s ock.js pour activer les options de secours à celles qui ne peuvent pas exécuter js sur leurs navigateurs et une bibliothèque stomp pour servir de courtier de messages.
• Main.css est un fichier CSS qui stylise notre HTML.
• Main.js est un fichier JavaScript qui connecte le point de terminaison WebSocket pour envoyer et recevoir des messages. Il affiche et formate également les messages à l'écran.

Résultat final