Comunicação “Real-time” cliente/servidor com SignalR
Olá pessoal. Tudo certo?!
Nesse post, compartilho com vocês minhas primeiras impressões sobre o SignalR.
O que é SignalR?
Segundo a definição do site oficial:
SignalR is an async library for .NET to help build real-time, multi-user interactive web applications.
Começou como um projeto ASP.net (no lado servidor) e uma biblioteca Javascript (no lado do cliente). Entretanto, já evoluiu significativamente e suporta, atualmente: Silverlight, Xaml (para WP7), WinRT, clientes Javascript.
Funciona através da manutenção de conexões persistentes.
Trata-se de um projeto open-source, mantido no GitHub, por dois funcionários da Microsoft – Damian Edwards e David Fowler.
Como aprender
A documentação do projeto ainda é bem escassa. Mas há boas coisas em https://github.com/SignalR/SignalR/wiki.
Além disso, há um projeto bacana de exemplo disponível no Nuget.
Por fim, há um vídeo bacana, dos autores, explicando como funciona o projeto, no Channel9.
Também há uma ótima palestra do TechEd 2012 NA sobre o SignalR.
Referências
As referências que você precisará adicionar em seu projeto variam conforme o tipo de projeto que você pretende desenvolver.
A relação completa de referências disponíveis pode ser encontrada em: https://github.com/SignalR/SignalR/wiki/Getting-Started
Hello SignalR
Para começar, vamos criar um projeto ASP.NET MVC.
Será necessário adicionar as seguintes referências:
Próximo passo, adicionar um Hub
Hubs são os pontos de conexão entre seu programa no servidor, e os clientes.
Eis o código fonte do Hub:
using System;
using System.Collections.Generic;
using SignalR.Hubs;
namespace HelloSignalR.Hubs
{
public class MyHub : Hub
{
private static readonly List<string> messages = new List<string>();
public void GetData()
{
Clients.updateMessages(messages);
}
public void PushData(string message)
{
messages.Add(string.Format("{0}: {1}",
DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss"),
message
));
Clients.updateMessages(messages);
}
}
}
Agora, o código fonte da View:
@{
ViewBag.Title = "Index";
}
<script src="/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../Scripts/json2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.signalR-0.5.1.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var myHub = $.connection.myHub;
myHub.updateMessages = function (data) {
$("li").remove();
$.each(data, function () {
$('#messages').append('<li>' + this + '</li>');
});
};
$("#sendButton").click(function () {
myHub.pushData($("#messageText").val());
});
$.connection.hub.start(function () {
myHub.getData();
});
});
</script>
<ul id="messages"></ul>
<input id="messageText"/>
<button type="button" id="sendButton">Push Message</button>
Viu a mágica?!
- Cliente chama métodos do Hub como métodos locais;
- Servidor chama métodos do cliente como se estivessem no servidor.
Veja a execução de duas instâncias de browser:
Louco, não?! Por hora, pense nas possibilidades. Depois, “deep dive”.
Era isso.
@elemarjr Que tal uma série de posts sobre SignalR? Fiz o pedido e você prontamente atendeu. Gosto muito da forma simples como você escreve sobre coisas complicadas. Valeu “man”. As possibilidades com o SignalR são inúmeras.
Não conhecia essa lib, e vai de encontro com uma “brincadeira” que eu tô fazendo pra mercado financeiro em real time web. Vamos ver se fica legal. Obrigado pela dica!
“vai de encontro”
O nego quer aprender a escrever código novo mas não quer escrever português de forma correta ou pelo menos saber usar as expressões.
Só para contribuir com o post do Elemar:
… os dois primeiros scripts fazem referencia a um arquivo específicos. Já o terceiro (~/signalr/hubs) faz referencia ao conteúdo que é gerado em tempo real, e que depende da nossa implementação do código que temos nos nossos Hubs…
Eu escrevi um post sobre isso esses dias, tem um vídeo legal do Scott Hanselman no TechEd da Russia, http://www.techdays.ru/videos/4369.html (@ericlemes da uma olhada nele pode ajudar), fiz dois demos também, o primeiro é um chat parecido com esse do Elemar, o outro é um Todo List usando SignalR e EF http://todo-2.apphb.com/
Agora estou tentando descobrir se tem como eu notificar somente um grupo especifico de usuários, seria bem interessante isso!
Boa tarde cleiton vc teria essa chat quedesnvolveu para me enviar ?
Grato
jose23b@hotmail.com
Escrevi no meu blog sobre isso, lá tem o codigo ok, o exemplo que fiz ta aqui http://chatsignalr.apphb.com/ o Rafael Zaccanni escreveu um artigo muito bom na .Net Magazine do ultimo mes também, pode ser util. da uma olhada la no meu blog ok.
Uai….. interessante isto, o como o nodeJS no aspecto update clients.
Cleyton,
Acabei de resolver esse lance de grupo de usuários. É só botar um método no seu hub do tipo
public void signToGroup(string group)
{
groups.Add(group, Context.ConnectionId);
}
(groups é um dictionary).
Na hora de mandar chamar métodos para o cliente vc busca na estrutura q armazenou (ex.: dictionary) e faz um broadcast só para caras daquele grupo.
Clients[connectionId].metodoNoCliente(blah);
Abraço,
Eric
Caraca, como não vi esse post antes! rs
Estou escrevendo alguns posts sobre o assunto, entre eles: PersistentConnection, Notificações para um usuário específico, etc.
O assunto é muito empolgante! a biblioteca é ótima! Abs pessoal…