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.
Já 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.