Criação de um servidor WebSocket com o Spring Boot

WebSocket é um protocolo que permite a comunicação entre o servidor e o navegador. Ele apresenta uma vantagem em relação ao HTTP RESTful, pois as comunicações são bidirecionais e em tempo real. Isso permite que o servidor notifique o cliente a qualquer momento, em vez de o cliente verificar se há atualizações em intervalos regulares.

Nesta série de posts, vou mostrar a vocês três maneiras diferentes de criar um servidor WebSocket em Java usando Spring Boot, o Spark Frameworke a API Java para WebSockets.

Pré-requisitos

Você utilizará o Gradle para gerenciar suas dependências e executar seu aplicativo.

Além disso, você precisará verificar se tem uma cópia do JDK instalada. Vou usar o JDK 8 neste tutorial.

WebSockets com Spring Boot

Spring Boot permite criar aplicativos Spring prontos para produção dentro de um JAR executável.

Criar o projeto

Você pode usar o Spring Initializr para inicializar seu aplicativo e selecionar os pacotes de que você precisa.

Para este exemplo, você precisará da Websocket dependência. Também vou usar o Gradle, então é recomendável alterá-lo para gerar um projeto Gradle.

Spring Initializer Homepage

Ao clicar no botão “Gerar projeto”, um arquivo zip será baixado. Descompacte-o em um diretório de sua escolha.

Criar o manipulador WebSocket

As mensagens WebSocket podem ser tanto de texto quanto binárias. Você vai criar um manipulador capaz de lidar com ambos os tipos de mensagem.

Crie uma nova classe chamada WebSocketHandler que estenda AbstractWebSocketHandler no com.example.websocketdemo pacote. AbstractWebSocketHandler exige que você implemente dois métodos, handleTextMessage e handleBinaryMessage que são chamados quando uma nova mensagem de texto ou binária é recebida.

Para fins de demonstração, você vai criar um servidor de eco que irá reenviar a mensagem recebida de volta ao remetente.

Adicione as seguintes implementações:

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
    System.out.println("New Text Message Received");
    session.sendMessage(message);
}

@Override
protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) throws IOException {
    System.out.println("New Binary Message Received");
    session.sendMessage(message);
}

Registrar o manipulador de WebSocket

Para utilizar o WebSocketHandler, ele deve ser registrado no WebSocketHandlerRegistry. O código a seguir realizará duas coisas:

1. Ele registrará o WebSocketHandler no /socket caminho.

2. Isso permitirá que todos os navegadores enviem mensagens ao servidor. Não será necessário que eles tenham uma origem específica.

Crie uma nova classe chamada WebSocketConfiguration que implemente a WebSocketConfigurer interface no com.example.websocketdemo pacote.

Anotar WebSocketConfiguration com o @Configuration e @EnableWebSocket anotações.

WebSocketConfigurer exige que você implemente um registerWebSocketHandlers método.

Adicione a seguinte implementação para registrar WebSocketHandler:

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(new WebSocketHandler(), "/socket").setAllowedOrigins("*");
}

Como você lidará com mensagens binárias além das mensagens de texto, é recomendável definir o tamanho máximo das mensagens binárias. Esse valor é armazenado no contêiner do servidor. Você pode substituir esse valor injetando uma nova fábrica de contêineres do servidor como parte do seu WebSocketConfiguration.

Adicione o código a seguir para injetar um novo ServletServerContainerFactoryBean acima WebSocketConfiguration acima do registerWebSocketHandlers método que você adicionou anteriormente:

@Bean
public ServletServerContainerFactoryBean createWebSocketContainer() {
    ServletServerContainerFactoryBean container = new ServletServerContainerFactoryBean();
    container.setMaxBinaryMessageBufferSize(1024000);
    return container;
}

Isso permitirá que seja enviada uma imagem com tamanho de até 1 MB.

Crie um cliente para testar seu aplicativo

Você precisará criar um cliente para testar seu servidor WebSocket. É recomendável testar o envio tanto de mensagens de texto quanto de mensagens binárias. Isso pode ser feito com JavaScript.

Adicione o seguinte ao index.html dentro da src/main/resources/static pasta:

<html>
<head>
    <style>
        #messages {
            text-align: left;
            width: 50%;
            padding: 1em;
            border: 1px solid black;
        }
    </style>
    <title>Sample WebSocket Client</title>
</head>
<body>
<div class="container">
    <div id="messages" class="messages"></div>
    <div class="input-fields">
        <p>Type a message and hit send:</p>
        <input id="message"/>
        <button id="send">Send</button>

        <p>Select an image and hit send:</p>
        <input type="file" id="file" accept="image/*"/>

        <button id="sendImage">Send Image</button>
    </div>
</div>
</body>
<script>
    const messageWindow = document.getElementById("messages");

    const sendButton = document.getElementById("send");
    const messageInput = document.getElementById("message");

    const fileInput = document.getElementById("file");
    const sendImageButton = document.getElementById("sendImage");

    const socket = new WebSocket("ws://localhost:8080/socket");
    socket.binaryType = "arraybuffer";

    socket.onopen = function (event) {
        addMessageToWindow("Connected");
    };

    socket.onmessage = function (event) {
        if (event.data instanceof ArrayBuffer) {
            addMessageToWindow('Got Image:');
            addImageToWindow(event.data);
        } else {
            addMessageToWindow(`Got Message: ${event.data}`);
        }
    };

    sendButton.onclick = function (event) {
        sendMessage(messageInput.value);
        messageInput.value = "";
    };

    sendImageButton.onclick = function (event) {
        let file = fileInput.files[0];
        sendMessage(file);
        fileInput.value = null;
    };

    function sendMessage(message) {
        socket.send(message);
        addMessageToWindow("Sent Message: " + message);
    }

    function addMessageToWindow(message) {
        messageWindow.innerHTML += `<div>${message}</div>`
    }

    function addImageToWindow(image) {
        let url = URL.createObjectURL(new Blob([image]));
        messageWindow.innerHTML += `<img src="${url}"/>`
    }
</script>
</html>

Iniciar o aplicativo

Seu servidor WebSocket já está pronto. Inicie seu aplicativo usando o gradle bootRun comando dentro do diretório do aplicativo.

Você pode acessar sua inscrição em http://localhost:8080 onde você será direcionado para a seguinte página:

Sample JavaScript-enabled client for testing the WebSocket server

A mensagem “conectado” indica que o cliente JavaScript conseguiu estabelecer uma conexão.

Tente enviar uma mensagem de texto digitando no campo de entrada e clicando no botão “Enviar”. Tente também fazer o upload de uma imagem. Em ambos os casos, você deverá ver a mesma mensagem e a mesma imagem exibidas de volta.

Sample JavaScript-enabled client showing a text and binary message echoed back

Conclusão

Neste tutorial, você aprendeu a criar um servidor WebSocket usando o Spring Boot, capaz de receber mensagens tanto binárias quanto de texto. O código final deste tutorial pode ser encontrado em nexmo-community/websocket-spring-boot .

Você já experimentou o Spark Framework? Talvez você queira saber como criar um servidor WebSocket usando o Spark Framework.

Você sabia que é possível usar o WebSocket como um ponto de extremidade em um Objeto de Controle de Chamada? Veja este exemplo sobre Transmissão de chamadas para um navegador com Voice WebSockets.