spring boot websocket

Construindo um aplicativo de bate -papo em tempo real com bota de primavera e websocket

O que é WebSocket?

O WebSocket é um protocolo de comunicação por computador, fornecendo canais de comunicação complexos de duplex em uma única conexão TCP. WebSocket é distinto do HTTP. O protocolo permite a interação entre um navegador da web (ou outro aplicativo cliente) e um servidor da Web com alternativas de alta duplex mais baixa, como a pesquisa HTTP, facilitando a transferência de dados em tempo real do e para o servidor.

Depois que uma conexão WebSocket é estabelecida entre um cliente e um servidor, ambos podem trocar informações até que a conexão seja fechada por qualquer uma das partes.

Esta é a principal defeito que o WebSocket é preferido no protocolo HTTP ao criar um serviço de comunicação semelhante ao bate-papo que opera em altas frequências com baixa latência.

O que é Stomp?

O protocolo de mensagem de texto simples (ou de streaming) (Stomp), anteriormente conhecido como TTMP, é um protocolo simples baseado em texto, projetado para trabalhar com middleware orientado a mensagens (MOM). Ele fornece um formato de fio interoperável que permite que os clientes da Stomp conversem com qualquer corretor de mensagens que suporta o protocolo.

Como o WebSocket é apenas um protocolo de comunicação, ele não sabe como enviar uma mensagem para um usuário específico. Stomp é basicamente um protocolo de mensagens que é útil para essas funcionalidades.

Configurando o aplicativo

Nosso aplicativo terá a seguinte configuração que pode ser definida usando o Spring Initializr:

• Versão Java: 11

• Tipo: Projeto Maven

• Dependências: WebSocket

• Versão da inicialização da primavera: 2.4.2

Estrutura do projeto

Configurando o WebSocket

Configurar nosso endpoint WebSocket e corretor de mensagens é bastante simples.

 @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 A anotação é usada para ativar o nosso servidor Websocket.

• WebSocketMessageBrokerConFigurer A interface é usada para fornecer implementação para alguns de seus métodos para configurar a conexão WebSocket.

• O método RegisterStomEndPoints é usado para registrar um ponto de extremidade do WebSocket que os clientes usarão para se conectar ao servidor.

• O método ConfiguremessageBroker é usado para configurar nosso corretor de mensagens, que será usado para rotear mensagens de um cliente para outro.

O SockJS também está sendo usado para ativar as opções de fallback para navegadores que não suportam o WebSocket.

Criando um modelo de bate -papo

Nosso modelo de bate -papo é a carga útil da mensagem que será trocada entre o lado do cliente e o lado do servidor do aplicativo.

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

Criando nosso controlador de bate -papo

Nosso controlador será responsável por lidar com todos os métodos de mensagem presentes em nosso aplicativo de bate -papo, que basicamente receberão mensagens de um cliente e o transmitirão para outros.

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

O uso de /aplicativo como ponto de destino é devido ao nosso arquivo de configuração do WebSocket, que diz que todas as mensagens serão roteadas para esses métodos de manuseio anotados com @MessageMapping.

Criando uma interface do usuário front-end

Nossa interface do usuário é uma caixa de cartão simples criada usando HTML e CSS que executa algumas funções JS para enviar e receber mensagens.

• Index.html é um arquivo HTML que contém alguma estrutura básica A SCE.JS para ativar as opções de fallback para aqueles que não podem executar o JS em seus navegadores e uma biblioteca Stomp para servir como corretor de mensagens.
• Main.css é um arquivo CSS que estiliza nosso HTML.
• Main.js é um arquivo JavaScript que conecta o fim de extremidade do WebSocket para enviar e receber mensagens. Ele também exibe e formate as mensagens na tela.

Resultado final