Compartilhar via

Introdução, tipos de conexão e exemplo simples de utilização

  • Artigo

SignalR, o que é?

Basicamente, é uma biblioteca em .Net e de código livre, que viabiliza atualizações/notificações asíncronas em tempo real para aplicações web. Ou seja, ela permite enviar dados e informações entre client/server em tempo real. Legal em!

A Microsoft já oferece suporte ao SignalR, o mesmo abrange aplicações em Javascript, Silverlight, .Net, Windows Phone 7 e WinRT. Além da Microsoft a comunidade open source forneceu apoio para Mono e iOS também.

 

Mas o .Net Framework 4.5 não suporta Websockets, utilizado para recursos em tempo real?

Sim, e aconselho o estudo e aprendizado em Websockets, onde, com o framework 4.5 é possivel utilizar seus recursos com o namespace System.Web.WebSockets, porém, trabalhar com Websockets requer no mínimo o framework 4.5 e o IIS8 ou IIS8 Express para utiliza-lo. Sem contar que infelizmente apenas o Chrome 16++, Firefox 11++ e IE 10 o suportam.

Desta forma, hoje, estou utilizando o SignalR para aplicações em tempo real.

 

Mas em qual tipo de aplicação eu posso utiliza-lo

As mais comuns são chats e notificações de mensagens, porém nada o impede de utiliza-lo em seu favor para qualquer tipo de solução. 

O que eu preciso para utiliza-lo

Para sua utilização, é necessário apenas:

  • Referência ao namespace Microsoft.Web.Infrastructure;
  • jQuery 1.6 ou superior.

A instalação do SignalR pode ser realizada pelo Nuget com o comando Install-Package SignalR pelo Package Manager Console. Observe que ao realizar a instalação, as dependências do jQuery e Infrastructure são atualizadas/instaladas também.

 

PersistentConnection e Hub

O SignalR oferece basicamente dois tipos de conexão, Hub (alto-nível) e PersistentConnection (baixo-nível). Analisando superficialmente ambas, podemos ver que:

A PersistentConnection faz uso da interface IHttpHandler, com isso, podemos disponibilizar um ponto final de acesso via Http, porém, para tanto, é necessário a configuração de uma rota customizada dentro do arquivo Global.asax. Utilizando este tipo de conexão, podemos sobrepor diversas operações e métodos pré-definidas pelo SignalR, permitindo enviar/receber solicitações dos clientes.

Já a conexão com Hub disponibiliza a capacidade de enviar diversos tipos de mensagens entre cliente/servidor. Com esta conexão não é necessário a configuração de uma rota customizada, pois o próprio SignalR cria a estrutura necessária para troca de mensagens utilizando o caminho “~/signalr/hubs”. Podemos também adicionar diversas operações customizadas, obtendo maior flexibilidade para codificação.

 

Exemplo bem simples de utilização

Vamos criar um recurso bem simples, uma página que envia uma mensagem, e exibe em tempo real a todos os usuários que estiverem na página as mensagens adicionadas.

 Primeiro vamos criar nossa classe pública para servir de Hub (conexão de alto-nível), expondo os métodos de solicitações pelo cliente, e suas chamadas de respostas:

01.using SignalR.Hubs;02. 03.namespace ProjetoSignalR04.{05.    [HubName("mensagemHub")]06.    public class MensagemHub : Hub07.    {08.        public void EnviaMensagem(string sessionId, string mensagem)09.        {10.            Clients.obtemMensagem(sessionId, mensagem);11.        }12.    }13.}

Sem muita complicação e de fácil entendimento, criamos uma classe que herda a classe abstrata Hub. Em seguida criamos o método EnviaMensagem, que será chamado pelo cliente, e posteriormente será chamado a função ObtemMensagem em todos os clientes que estiverem na mesma página!

Isso mesmo, estamos do lado do servidor e dizendo a todos os clientes para chamar a função javascript obtemMensagem(). Neste bloco de código estamos chamando o cliente a partir do servidor, enviando o nome do método a ser chamado através da nossa conexão estabelecida.

Continuando o código, a classe acima ficará bem mais simples de entender! Vamos agora adicionar as referências do SignalR em nossa página:

1.<script src="../../../../Scripts/jQuery/jquery.signalR.min.js" type="text/javascript"></script>2.<script src="../../../../signalr/hubs" type="text/javascript"></script>

Atente-se que a ultima linha, que aponta para o caminho “~/signalr/hubs” não existe, ele se responsabiliza em criar a estrutura a ser utilizada em run-time, se fossemos utilizar uma PersistentConnection teríamos que definir manualmente a rota a ser utilizada. Outro ponto importante, as referências do SignalR devem ser definidas após a referência do jQuery.

Em nosso script da página, adicionamos o seguinte código:

01.// Cria objeto de conexão com o server (SignalR)02.var realTimeHub = $.connection.mensagemHub;03. 04.// Função que será chamada automaticamente quando uma nova mensagem for adicionada05.// Esta função será chamada através de uma requisição do server06.realTimeHub.obtemMensagem = function (sessionId, mensagem) {07.    // Inclui mensagem apenas se for outro usuário08.    if (sessionId != $("#sessionId").val())09.        $("#mensagens").append(mensagem);10. 11.};12. 13.// Inicia a conexão com o server (SignalR)14.$.connection.hub.start();15. 16.// Evento de click para adicionar uma nova mensagem17.$("#btnEnviaMsg").click(function () {18.    realTimeHub.EnviaMensagem($("#sessionId").val(), $("#mensagem").val());19.});

Bem tranquilo e simples não? Porém, veja alguns detalhes:

  • O nome da conexão deve ser o mesmo da classe Hub, porém, deve iniciar com minúscula, e não maiúscula como a classe. Exemplo: Nossa classe chama-se MensagemHub, já a conexão no lado cliente, deve ser mensagemHub.
  • Estou utilizando o SessionId apenas para saber no retorno se o usuário é o mesmo do request (não obrigatório).

Links

SignalR Github https://github.com/SignalR/SignalR

SignalR Wiki https://github.com/SignalR/SignalR/wiki

SignalR Nuget http://nuget.org/packages/SignalR

 

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