WebSocket com SpringBoot e Angular (PO UI)

Muitas vezes precisamos executar um processamento longo no servidor e, ao invés de deixar a tela bloqueada, temos que ir dando feedback ao usuário. Neste artigo vou demonstrar uma forma de fazer isso utilizando WebSocket com o Backend em SpringBoot e a tela em Angular (com a biblioteca open source da Totvs, PO UI).

WebSocket, basicamente, é uma forma de manter um canal de comunicação (Socket) entre o client e o server, para que não seja necessário, por exemplo, o navegador ficar pedindo informações de tempos em tempos para saber quando um determinado processo finalizou.

Implementações do Backend

Para configurar um projeto SpringBoot é muito fácil, basta acessar https://start.spring.io/, informar os dados do projeto e pronto!

Para utilizar WebSocket, existe a dependência spring-boot-starter-websocket que facilita a nossa vida:

Agora, para configurar um WebSocket, vamos criar uma classe que implemente a interface WebSocketMessageBrokerConfigurer:

Na configuração acima, foi criado o endpoint /socket com o broker /statusProcessor. Essas são as informações para se conectar ao backend e ficar “escutando” os eventos gerados.

Agora vamos implementar um caso de uso para simular um processamento demorado, onde teremos um controller que será o input deste processo e um service para executar as etapas de maneira assíncrona e publicar as mensagens conforme essas etapas forem sendo finalizadas:

ProcessController:

ProcessorService:

O fluxo é, após entrar uma requisição do verbo PUT no controller, ele irá chamar o método execute do service, que por sua vez irá simular o processamento de 3 etapas (com Thread.sleep()), enviando uma mensagem ao final de cada uma.

Frontend:

Para simular o comportamento da API, vamos criar um projeto Angular utilizando a biblioteca PO UI. Basicamente, vamos ter uma tela com um botão, que irá executar a chamada para o endpoint e ficará recebendo as mensagens e exibindo-as conforme forem chegando.

Para criar um projeto PO UI, basta seguir os passos descritos na documentação: https://po-ui.io/guides/getting-started.

Com o projeto configurado, vamos criar uma classe para lidar com a conexão com o WebSocket:

Na página app.component.ts, vamos implementar a chamada à API para iniciar o processamento e também utilizar o WebSocketConnector para receber as mensagens e mostrá-las no componente po-list-view.

app.component.html:

app.component.ts:

Funcionamento da tela:

Com a utilização dessas bibliotecas fica fácil de implementar um feedback sobre o status das requisições das nossas aplicações e, assim, melhorarmos a experiência dos usuários.

O código fonte de cada implementação está disponível no meu GitHub:

Frontend: https://github.com/tatsumibruno/portinari-websocket-processor

Backend: https://github.com/tatsumibruno/springboot-websocket-processor