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

Standard

Este post é uma introdução rápida e simplificada de uma série de artigos que pretendo publicar sobre a biblioteca SignalR. Minha ideia é publicar alguns artigos desta fantástica biblioteca, demonstrado o poder e facilidade para criar aplicações web com informações/atualizações em tempo real.

 

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. Um exemplo bem legal é o Gmail, que utiliza SignalR para diversos recursos de notificações em tempo real.

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:

using SignalR.Hubs;

namespace ProjetoSignalR
{
    [HubName("mensagemHub")]
    public class MensagemHub : Hub
    {
        public void EnviaMensagem(string sessionId, string mensagem)
        {	
            Clients.obtemMensagem(sessionId, mensagem);
        }
    }
}

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:

<script src="../../../../Scripts/jQuery/jquery.signalR.min.js" type="text/javascript"></script>
<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:

// Cria objeto de conexão com o server (SignalR)
var realTimeHub = $.connection.mensagemHub;

// Função que será chamada automaticamente quando uma nova mensagem for adicionada
// Esta função será chamada através de uma requisição do server
realTimeHub.obtemMensagem = function (sessionId, mensagem) {
    // Inclui mensagem apenas se for outro usuário
    if (sessionId != $("#sessionId").val()) 
        $("#mensagens").append(mensagem);
    
};

// Inicia a conexão com o server (SignalR)
$.connection.hub.start();

// Evento de click para adicionar uma nova mensagem
$("#btnEnviaMsg").click(function () {
    realTimeHub.EnviaMensagem($("#sessionId").val(), $("#mensagem").val());
});

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 a trafego do SessionId apenas para saber no retorno, se o usuário é o mesmo do request (não obrigatório).

Nos próximos artigos, irei integrar o SignalR em aplicações MVC, utilizar IoC, Flexigrid, utilizar PersistentConnection e algumas outras coisas bacanas! =)

 

Links

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

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

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

 

 

One thought on “SignalR – Introdução, tipos de conexão e exemplo simples de utilização

Leave a Reply

Your email address will not be published. Required fields are marked *