Compartilhar via

Trocando mensagens e notificações entre Server/Client de forma global e individual

  • Artigo

Neste artigo, vou demonstrar como podemos requisitar uma função em server-side, e após o término, notificar todos os usuários conectados (client-side), ou apenas algum(ns) usuário(s) específico(s).

Para todos os exemplos, estou considerando que a importação dos scripts e referências para o SignalR já tenham sido realizadas.

Notificação Global

Veja como é simples o envio de notificações em tempo real para todos os usuários conectados, primeiramente vamos criar nossa conexão no script do cliente (client-side):

01.<script language="javascript" type="text/javascript">02. 03.    $(function () {04. 05.    // Cria objeto de conexão06.    var nomeHubClient = $.connection.nomeHub;07. 08.        // Função que envia mensagem para o servidor09.        $("#btnEnviaMsg").click(function () {10. 11.        var mensagem = $('#mensagem').val();12.            nomeHubClient.enviaMensagem(mensagem);13.            $('#mensagem').val("");14. 15.        });16. 17.        // Inicia a conexão18.        $.connection.hub.start(function () {19.            // Envia para o servidor o usuário que está criando a conexão20.        // O campo #nomeUsuario é apenas um campo presente na nossa página aspx que identifica o nome do usuário em questão (Não é obrigatório)21.        nomeHubClient.join($('#nomeUsuario').val(""));22.        });23. 24.        // Função chamada em real-time pelo servidor25.        nomeHubClient.novaMensagem = function (mensagem) {26.            mensagem = $("#mensagens").html() + "<br />" + mensagem;27.            $("#mensagens").html(mensagem);28.        };29.    });30. 31.</script>

Em seguida vamos criar nossa classe de conexão (Hub) no servidor:

01.[HubName("nomeHub")]02.public class NomeHub : Hub03.{04. 05.    public void Join(string nomeUsuario)06.    {07.        EnviaMensagem(string.format("usuário {0} logado.", nomeUsuario));08.    }09. 10.    public void EnviaMensagem(string mensagem)11.    {12.        Clients.novaMensagem(mensagem);13.    }14.}

Podemos ver que ao inciar a conexão, o método Join será chamado automaticamente, posteriormente, a propriedade Clients dispara para todas os clientes conectados (todas conexões abertas) a mensagem recebida.

 

Notificação Individual

Vamos ver agora como podemos fazer para enviar uma notificação apenas para um usuário específico. Para tanto temos a propriedade $.connection.hub.id, esta propriedade gera automaticamente uma especie de guid para nossa conexão, podendo assim via server-side, saber para qual conexão enviar a notificação.
Desta forma, ficamos com o seguinte bloco de código:

01.<script language="javascript" type="text/javascript">02. 03.    $(function () {04. 05.    // Cria objeto de conexão06.    var nomeHubClient = $.connection.nomeHub;07. 08.        // Função que envia mensagem para o servidor09.        $("#btnEnviaMsg").click(function () {10. 11.        var mensagem = $('#mensagem').val();12.            nomeHubClient.enviaMensagem(mensagem);13.            $('#mensagem').val("");14. 15.        });16. 17.        // Inicia a conexão18.        $.connection.hub.start(function () {19.        // Obtém o ID da conexão criada20.            var conexaoId = $.connection.hub.id;        21. 22.            // Envia para o servidor o nome do usuário que está criando a conexão e o ID da conexão criada23.        // O campo #nomeUsuario é apenas um campo presente na nossa página aspx que identifica o nome do usuário em questão (Não é obrigatório)24.        nomeHubClient.join($('#nomeUsuario').val(""), conexaoId);25.        });26. 27.        // Função chamada em real-time pelo servidor28.        nomeHubClient.novaMensagem = function (mensagem) {29.            mensagem = $("#mensagens").html() + "<br />" + mensagem;30.            $("#mensagens").html(mensagem);31.        };32.    });33. 34.</script>

Agora basta modificarmos nossa classe Hub no servidor, para que faça uso do ID da conexão enviada como parâmetro:

01.[HubName("nomeHub")]02.public class NomeHub : Hub03.{04.    public void Join(string nomeUsuario, string conexaoId)05.    {06.        EnviaMensagem(string.format("usuário {0} logado.", nomeUsuario), conexaoId);07.    }08. 09.    public void EnviaMensagem(string mensagem, string conexaoId)10.    {11.        Clients[conexaoId].novaMensagem(mensagem);12.    }13.}

Bem fácil e simples não? ao especificar o id da conexão na propriedade Clients, apenas a conexão informada receberá a notificação com a mensagem. Neste exemplo, enviamos a notificação para o próprio usuário que realizou a ação, porém, da mesma forma que obtemos o ID da conexão do próprio usuário, podemos utilizar um ID de outra conexão (para tanto, teríamos que implementar alguma estrutura para listar as conexões abertas, para que assim, seja possível o usuário selecionar a quem deseja notificar).
Uma outra forma de notificarmos apenas o usuário que realizou a ação, é utilizando a propriedade Caller, veja:

01.public void Join(string nomeUsuario, string conexaoId)02.{03.    EnviaMensagem(string.format("usuário {0} logado.", nomeUsuario), conexaoId);04.}05. 06.public void EnviaMensagem(string mensagem, string conexaoId)07.{08.    // Notifica apenas o usuário que possui o ID da conexão09.    Clients[conexaoId].novaMensagem(mensagem);         10. 11.    // Notifica apenas o usuário que realizou a chamada ao método Join12.    Caller.novaMensagem(mensagem);13.}

Rafael Zaccanini
MTAC – Microsoft Technical Audience Contributor
Blog: http://www.rafaelzaccanini.net
**Twitter: **@rafaelzaccanini
Facebook: http://www.facebook.com/RafaelZaccaniniNet