Quero implementar um ícone em uma view que traga a quantidade de mensagens que um usuário tem em sua caixa, porém a atualização da informação da quantidade deve ocorrer em tempo real conforme o modelo abaixo do Facebook:
Eu tenho um endpoint de uma API que traz a lista de mensagens:
http://localhost:8080/clientes/mensagens/
Para buscar esta lista de mensagens eu criei um service que roda perfeitamente:
buscarMensagens() : Observable<Mensagem[]> {
return this.http.get<Mensagem[]>(`${CONF_API.baseUrl}/clientes/mensagem/`);
}
Dentro do controlador da view criei uma variável que recebe a quantidade de mensagens:
quantificarMensagens(){
this.mensagemService.buscarMensagens().subscribe(response => {
this.qtdMensagem = response.lenght();
})
Ele busca perfeitamente a quantidade de mensagens do usuário.
O grande problema aqui é que isso não ocorre de forma dinâmica, ou seja, quando chega mais uma mensagem para o usuário o valor não atualiza em tempo real, pois é necessário um novo request.
Estudando mais profundamente me informaram que para esta situação eu devo utilizar o Socket, porém os exemplos que encontrei se refere a criação de um chat utilizando tal tecnologia, e não consegui compreender em como aplicar isso em minha situação.
Então pergunto: Como utilizar Socket para atualizar em tempo real a quantidade de mensagens que chegam na caixa do usuário utilizando este este endpoint? http://localhost:8080/clientes/mensagens/