Skip to main content

Explicar em detalhes, passo-a-passo, como desenvolver o sistema é algo fora de escopo. Mas basicamente você pode usar o Spring Boot para facilitar o trabalho pesado.

A arquitetura é simples:

  • O servidor precisa disponibilizar um canal via WebSockets para que o cliente (navegador) possa receber atualizações.
  • A página deve ter um JavaScript que se inscreva para receber atualizações (mensagens) do servidor.

Neste tutorial você encontra um exemplo simples. Por cima de WebSockets, ele usa uma biblioteca baseada no protocolo STOMP para comunicação via texto, mais especificamente, JSON.

Cliente

O código no cliente para conectar, desconectar, enviar e recebermensagens fica assim:

function connect() {
    var socket = new SockJS('/hello');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function(greeting){
            showGreeting(JSON.parse(greeting.body).content);
        });
    });
}

function disconnect() {
    if (stompClient != null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendName() {
    var name = document.getElementById('name').value;
    stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name }));
}

A função showGreeting chamada no primeiro método seria a responsável por exibir a mensagem recebida.

Servidor

Você pode criar um controller para receber e retornar mensagens:

@Controller
public class GreetingController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(3000); // simulated delay
        return new Greeting("Hello, " + message.getName() + "!");
    }
}

Infelizmente, neste exemplo do tutorial, ele apenas manda uma mensagem e finaliza.

neste outro tutorial você encontra um exemplo de como publicar mensagens no canal se forma assíncrona (em qualquer momento):

@Service
public class ScheduleTask {

    @Autowired
    private SimpMessagingTemplate template;

    // this will send a message to an endpoint on which a client can subscribe
    @Scheduled(fixedRate = 5000)
    public void trigger() {
        // sends the message to /topic/message
        this.template.convertAndSend("/topic/message", "Date: " + new Date());
    }

}

A configuração (conforme o segundo tutorial) é assim:

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // the endpoint for websocket connections
        registry.addEndpoint("/stomp").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        // use the /topic prefix for outgoing WebSocket communication
        config.enableSimpleBroker("/topic");

        // use the /app prefix for others
        config.setApplicationDestinationPrefixes("/app");
    }
}

Banco de dados

Os exemplos acima não consideram bancos de dados. Infelizmente, receber eventos do banco de dados ou fazer polling (verificação contínua) em geral não são possíveis ou mesmo recomendados.

O ideal é que seu sistema contenha alguma API de notificação, onde cada nova mensagem gere uma notificação que vá para uma fila. Eventualmente algum código assíncrono pode capturar essa mensagem e publicar no canal correto, como no exemplo acima onde o agendador publica a data no canal.

Claro que você pode implementar isso de forma síncrona, mas geralmente isso vai gerar impactos muito negativos na performance, por isso aplicações de verdade não fazem isso.

utluiz
  • 74,6mil
  • 8
  • 162
  • 254