Skip to content

ASP.NET SignalR introdução

O artigo de hoje é sobre um framework muito útil em aplicações que requerem trafego de informação em tempo real, sua marca principal é ser simplesmente fácil em sua utilização. Então, sem mais e sem menos, vamos falar um pouco do SignalR, como podemos instalar em nossos projetos e um exemplo do seu funcionamento.

Uma das coisas que me impressionou neste framework foi a seguinte frase em um livro que li sobre o tema: “ASP.NET SignalR is a new library for ASP.NET developer that makes it incredibly simple to add real-time web functionality to your applications”. Só isso já me deixou fascinado e foi o ponto principal para eu poder estudar mais.

Inicialmente SignalR foi desenvolvimento como um projeto pessoal por David Fowler e Damian Edwards que fazem parte do time ASP.NET Microsoft. Hoje SignalR faz parte da pilha de desenvolvimento da Microsoft e é Open Source. SignalR é apenas para ambientes Microsoft? Não, SignalR pode ser desenvolvimento para vários dispositivos moveis (Android, IOS, Windows Phone) e aplicações Web como Java, PHP e claro o ótimo e excelente ASP.NET.

Mas para que serve a funcionalidade de entrega de mensagens em tempo real?

Pense o seguinte (o velho e bom exemplo do chat), como deve funcionar um ambiente de chat, whatsapp  e outros que existem por ai. Vou dar exemplo de um que fiz uma vez para uma empresa.

Toda mensagem que um usuário enviava para outro era sempre salva inicialmente no banco de dados com o endereço da pessoa que tinha que receber e claro uma flag marcando que aquela mensagem não tinha sido lida ainda. Do outro lado, a pessoa que foi destinada a receber a mensagem continuava a aguardar, pois eu marquei no sistema de a cada 2 segundos acessar o banco de dados e procurar por mensagens que ainda não tinham sido lidas pelo usuário.

Repare que no texto acima eu destaquei a parte primordial do sistema onde é acessar o banco de dados de tempos em tempos. Isso não é um problema para um aplicativo que tem poucos usuários. Agora imagina um whatsapp, será que sua equipe tem infra estrutura suficiente para aguentar todos os usuários solicitando requisições a cada 5, 10, 15 (que seja) segundos? Isso sem contar que destes que fazem requisições, nem todos tem mensagens novas e com isso podemos dizer que são requisições perdidas, mas que gastou banda larga do aplicativo e com isso ocupou a vaga de alguém que poderia sim receber uma nova mensagem. É ai que entra a funcionalidade de entrega de mensagem em tempo real. No aplicativo que desenvolvi não era nem de perto um exemplo de chat em tempo real, pois o usuário teria que aguardar por 2 segundos para receber a mensagem.

Como funciona o ASP.NET SignalR?

SignalR isola os detalhes de baixo nível para que possamos ter a aparência de uma constante conexão aberta entre o servidor com o cliente e vice e versa. Quando eu falo que ele isola do desenvolvedor os detalhes de baixo nível é por que internamente ele verifica qual é o melhor tipo de conexão entre o cliente e servidor. Primeiro ele sempre irá tentar através de Websockets uma conexão e se não conseguir ele tenta outros como Long Polling, Forever Frame e etc. Está decisão é feita no que chamamos de estagio inicial de comunicação entre o servidor e cliente.

Como é sua instalação?

A instalação é fácil e você apenas precisa do NUGET do Visual Studio para efetuar sua instalação. Para quem não sabe para que serve o NUGET no Visual Studio, de forma bem resumida, posso dizer que ele é um repositório na nuvem de plugins de desenvolvimento. Mesmo assim é bom pesquisar para saber mais sobre ele. Mas para ninguém ficar perdido posso dizer que para instalar o SignalR em seu projeto basta clicar com o botão direito nas referencias do projeto e acionar a opção “Manage Nuget Packages”.

Conforme a imagem abaixo esses são os itens encontrados para a busca “SignalR”. Existe um apenas para cliente JS, outro para cliente .Net, sendo que o primeiro que encontramos é destinada ao servidor e também efetua a instalação da parte cliente. Em meu projeto de exemplo instalei o primeiro da lista.

Nuget com SignalR

Como podem ver essas são as modificações que existiram em nossos projetos após instalação do SignalR. Na primeira imagem temos o core para criação da parte do servidor e na segunda temos o cliente JS que irá se conectar no servidor.

Referencias do SignalR

Scripts do SignalR

Pronto! Framework instalado, então agora é só brincar.

Para esse primeiro artigo vamos implementar até a parte de conexão com o servidor, na segunda parte vamos construir um chat para que os usuários possam trocar mensagens.

O que precisamos agora é criar o servidor que será o centro do nosso universo para entrega e recebimento de informações em tempo real.

Para criarmos o servidor precisamos de uma classe com a seguinte declaração “public class ExemploSignalRHub : Hub“. Como podem ver nossa classe herda da classe “Hub” sendo esta responsável por criar o servidor SignalR. Dependendo da forma de conexão entre o servidor e o cliente, por exemplo Websockets, está classe irá permanecer ativa durante todo o tempo de conexão. Já se o modo de conexão for Forever Frame a classe não irá permanecer instanciada, então como dica, nunca utilize membros desta classe para armazenar o estado do sistema.

No próximo código podemos visualizar que na classe SampleHub existem dois métodos onde sua implementação está na classe Hub.

[sourcecode language=”csharp”]

using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;

namespace Web.SignalR
{

public class SampleHub : Hub
{

public override Task OnConnected()
{
return base.OnConnected();
}

public override Task OnDisconnected()
{
return base.OnDisconnected();
}

}
}

[/sourcecode]

Tanto o método OnConnected como o OnDisconnected são eventos acionados pelo servidor para informar que há uma novo usuário conectando ou saindo da conexão. Esses métodos podem ser uteis em contextos onde você precisa gravar o acesso do usuário, quando entrou e saiu do sistema.

Como exemplo irei demonstrar a utilização de um cliente web acessando o sistema e o evento OnConnected sendo acionado pelo SignalR.

Com um projeto em MVC 5 aberto vamos criar uma classe igual ao discutido acima, não se esqueça de efetuar a instalação do pacote do SignalR disponível no NUGET.

Após isso na view chamada index.cshtml, temos o seguinte código.

[sourcecode language=”html”]
<h2>Exemplo SignalR</h2>
<span id=”connectionStatus”></span>
<span id=”log”></span>

@section scripts
{
<script type=”text/javascript” src=”/Scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”/Scripts/jquery.signalR-2.0.3.min.js”></script>
<script src=”@Url.Content(“~/signalr/hubs”)”></script>
<script type=”text/javascript”>

var proxy = $.connection.sampleHub;
$.connection.hub.start().done(function () {

$(‘#connectionStatus’).text(‘conectado’);
}).fail(function (e) {

$(‘#connectionStatus’).text(‘não conectado’);
});
</script>
}

[/sourcecode]

Acima temos uma página bem simples onde o objetivo é visualizar a conexão (ou não) com o servidor SignalR. Para correto funcionamento precisamos referenciar primeiro o arquivo jQuery. Segundo passo o SignalR cliente javascript (“jquery.signalR-2.0.3.min.js”). O ultimo passo é referenciar o caminho (~/signalr/hubs) onde o SignalR aguarda por conexões de clientes do tipo Hub, isso é comum a todos os clientes.

Feito todos os passos acima vamos trabalhar com o script cliente SignalR para tentar conectar no servidor, em caso de sucesso ou falha a página irá mostrar o resultado e por isso estamos utilizando a instrução “$.connection.hub.start()” onde é responsável pela tentativa de conexão. Uma coisa útil do SignalR cliente é que podemos aguardar a conclusão da tentativa de conexão e validar se houve sucesso ou falha através dos métodos done e fail. Note que em caso de sucesso ou falha estamos acessando o elemento span para avisar o usuário.

Uma observação muito importante que faço é que a cada conexão com o SignalR é fornecido um código de conexão, um id no formado guid e este pode ser obtido tanto através do cliente ($.connection.hub.id) como através do servidor (Context.ConnetionId).

Ainda não terminamos o nosso exemplo. Falta registrar as rotas do SignalR na inicialização da aplicação para que os clientes possam acessar. Isso é simples, basta criar uma classe Startup.cs. Quando instalado o pacote do SinalR através do NUGET é criado um arquivo texto na aplicação que já faz essa orientação. Segue a classe abaixo que deve ser criada no projeto:

[sourcecode language=”csharp”]
using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SampleWebSignalR.Startup))]
namespace SampleWebSignalR
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
[/sourcecode]

Pronto! Agora sim podemos executar nosso projeto e validar se temos sucesso na conexão com o servidor SignalR. A imagem abaixo mostra o resultado.

signalr conectado

Agora vamos melhorar o nosso exemplo e realmente utilizar a troca de mensagem em tempo real. Vamos implementar uma funcionalidade que avisa todos os usuários quando um novo membro acessa a tela informando seu código de conexão. Para isso necessitamos entender que devemos criar uma função no javascript que será responsável por ficar aguardando mensagens do servidor e quando acionadas efetuar o procedimento do qual desejamos. Para isso precisamos acessar a classe de servidor que criamos através do javascript. O exemplo abaixo é demonstrado:

[sourcecode language=”javascript”]
var proxy = $.connection.sampleHub;

proxy.client.entryClient = function (connectionId) {
$(‘#log’).append(‘&lt;br /&gt;Entrada de cliente: ‘ + connectionId);
}

proxy.client.exitClient = function (connectionId) {
$(‘#log’).append(‘&lt;br /&gt;Saida cliente: ‘ + connectionId);
}

$.connection.hub.start().done(function () {

$(‘#connectionStatus’).text(‘conectado’);

}).fail(function (e) {

$(‘#connectionStatus’).text(‘não conectado’);
});
[/sourcecode]

Veja que na primeira linha do código acima estamos criando uma variável chamada “proxy” que recebe a classe que criamos no servidor. Note que a classe que criamos no servidor chama SampleHub e no javascript é chamada de sampleHub. A letra minuscula é por que o framework já converte o nome para o padrão javascript.

Agora que temos a classe Hub do lado javascript, podemos preparar as funções que terão a responsabilidade de ficar aguardando o chamado do servidor conforme o código abaixo. Temos duas funções, uma que é acionada quando um novo usuário acessa a tela e outro quando o usuário sai da tela/sistema:

[sourcecode language=”javascript”]
proxy.client.entryClient = function (connectionId) {
$(‘#log’).append(‘Entrada de cliente: ‘ + connectionId);
}

proxy.client.exitClient = function (connectionId) {
$(‘#log’).append(‘Saida cliente: ‘ + connectionId);
}
[/sourcecode]

Tome atenção a forma que é criado uma função de escuta, veja que a variável proxy chama a propriedade client para depois de forma dinâmica informar um nome para a nova função.

Mas como o servidor consegue fazer esse acesso? Simples, isso é visto no código abaixo:

[sourcecode language=”javascript”]
public override Task OnConnected()
{
Clients.All.entryClient(Context.ConnectionId);
return base.OnConnected();
}

public override Task OnDisconnected()
{
Clients.All.exitClient(Context.ConnectionId);
return base.OnDisconnected();
}
[/sourcecode]

Lembra dos métodos de eventos da classe SampleHub? Então, através delas estou avisando a todos os usuários qual é o código de conexão que entrou ou saiu do sistema. Para isso estou utilizando a propriedade “Clients” (que faz parte da classe Hub, pai da nossa classe SampleHub), onde solicito que seja avisado todos os usuários (“All”) que chame a função cliente entryClient ou exitClient que criamos mais acima. Perceba agora o poder e a vantagem que o SignalR traz para nossos sistemas.

Agora para testar basta acessarmos a página através de vários browser (simulando usuários diferentes) e visualizarmos o log que a aplicação informa da entrada ou saída de usuário.

signalr log

Pessoal, por hoje finalizamos por aqui e espero que tenham entendido o conceito da funcionalidade do framework SignalR. Abaixo coloco o link do projeto que utilizei que está no Git e alguns links úteis para leitura.

Link projeto no Git
https://github.com/StephanyBatista/SampleWebSignalR

Links úteis
https://github.com/SignalR/SignalR/wiki
http://www.asp.net/signalr

Abraços!

Published in.Net FrameworkC#Visual Studio

One Comment

  1. Muito Bom mesmo, gostei do conteúdo, ta de parabéns, sucesso e tudo de bom para o autor!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *