spring boot websocket

Construyendo una aplicación de chat en tiempo real con Boot Spring y WebSocket

¿Qué es WebSocket?

WebSocket es un protocolo de comunicaciones informáticas, que proporciona canales de comunicación Full-Duplex a través de una sola conexión TCP. WebSocket es distinto de HTTP. El protocolo permite la interacción entre un navegador web (u otra aplicación cliente) y un servidor web con una sobrecarga más baja que las alternativas medio-dúplex, como la encuesta HTTP, facilitando la transferencia de datos en tiempo real desde y hacia el servidor.

Una vez que se establece una conexión WebSocket entre un cliente y un servidor, ambos pueden intercambiar información hasta que cualquiera de las partes cierre la conexión.

Esta es la referencia principal que se prefiere WebSocket sobre el protocolo HTTP al construir un servicio de comunicación similar al chat que opera a altas frecuencias con baja latencia.

¿Qué es Stomp?

El protocolo de mensaje orientado al texto simple (o transmisión) (Stomp), anteriormente conocido como TTMP, es un protocolo simple basado en texto, diseñado para trabajar con el middleware orientado a mensajes (MOM). Proporciona un formato de alambre interoperable que permite a los clientes de STOMM hablar con cualquier corredor de mensajes que respalde el protocolo.

Dado que WebSocket es solo un protocolo de comunicación, no sabe cómo enviar un mensaje a un usuario en particular. Stomp es básicamente un protocolo de mensajería que es útil para estas funcionalidades.

Configuración de la aplicación

Nuestra aplicación tendrá la siguiente configuración que se puede configurar utilizando Spring Initializr:

• Versión de Java: 11

• Tipo: Proyecto Maven

• Dependencias: WebSocket

• Versión de arranque de primavera: 2.4.2

Estructura de proyectos

Configuración de WebSocket

Configurar nuestro punto final de WebSocket y un corredor de mensajes es bastante 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 se utiliza para habilitar nuestro servidor WebSocket.

• WebSocketMessageBrokerConfigurer La interfaz se utiliza para proporcionar implementación de algunos de sus métodos para configurar la conexión WebSocket.

• El método RegisterStompendPoints se utiliza para registrar un punto final de WebSocket que los clientes usarán para conectarse al servidor.

• El método ConfigureMessageBroker se utiliza para configurar nuestro corredor de mensajes que se utilizará para enrutar mensajes de un cliente a otro.

Sockjs también se está utilizando para habilitar opciones de respaldo para navegadores que no admiten WebSocket.

Creando un modelo de chat

Nuestro modelo de chat es la carga útil de mensajes que se intercambiará entre el lado del cliente y el lado del servidor de la aplicación.

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

Creando nuestro controlador de chat

Nuestro controlador será responsable de manejar todos los métodos de mensajes presentes en nuestra aplicación de chat que básicamente recibirá mensajes de un cliente y luego lo transmitirá a otros.

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

El uso de /aplicación como punto de destino se debe a nuestro archivo de configuración de WebSocket que dice que todos los mensajes se enrutarán a estos métodos de manejo anotados con @MessageMapping.

Creando una interfaz de usuario front-end

Nuestra UI es una caja de tarjetas simple construida con HTML y CSS que ejecuta algunas funciones JS para enviar y recibir mensajes.

• index.html es un archivo HTML que contiene alguna estructura básica a s ock.js para habilitar las opciones de retroceso a aquellos que no pueden ejecutar JS en sus navegadores y una biblioteca de Stomp para servir como corredor de mensajes.
• Main.css es un archivo CSS que establece nuestro HTML.
• Main.js es un archivo JavaScript que conecta el punto final de WebSocket para enviar y recibir mensajes. También muestra y formatea los mensajes en la pantalla.

Resultado final