How to update the amount of messages with socket.io in an Ionic3 Angular app for a particular endpoint?

I want to implement an icon in a view that brings the amount of messages that a user has in his box, however, updating the quantity information must occur in real time according to the model below Facebook:

I have an endpoint of an API that brings the list of messages:

http://localhost:8080/clientes/mensagens/

To search for this list of messages I created a service that runs perfectly:

buscarMensagens() : Observable<Mensagem[]>  {
        return this.http.get<Mensagem[]>('${CONF_API.baseUrl}/clientes/mensagem/');
    }

Inside the view controller I created a variable that receives the amount of messages:

quantificarMensagens(){
this.mensagemService.buscarMensagens().subscribe(response => {
  this.qtdMensagem = response.lenght();
})

It perfectly searches the amount of user messages.

The big problem here is that this does not occur dynamically, ie when a further message arrives for the user the value does not update in real time, as a new request is required.

Studying more deeply, they informed me that in this situation I should use Socket, but the examples I found relate to creating a chat using such technology, and I could not understand how to apply this to my situation.

So I ask: How to use Socket to update in real time the amount of messages that arrive in the user box using this this endpoint? http://localhost:8080/clientes/mensagens/