Elemar DEV

Tecnologia e desenvolvimento

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:

image

Próximo passo, adicionar um Hub

image

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:

image

Louco, não?! Por hora, pense nas possibilidades. Depois, “deep dive”.

Era isso.

9 comentários em “Comunicação “Real-time” cliente/servidor com SignalR

  1. @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.

  2. ericlemes
    17/06/2012

    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!

    • Pasquale
      15/04/2013

      “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.

  3. Cleyton Ferrari
    17/06/2012

    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!

    • jose
      14/01/2013

      Boa tarde cleiton vc teria essa chat quedesnvolveu para me enviar ?
      Grato
      jose23b@hotmail.com

      • Cleyton Ferrari
        14/01/2013

        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.

  4. Uai….. interessante isto, o como o nodeJS no aspecto update clients.

  5. ericlemes
    01/07/2012

    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

  6. Rafael Zaccanini
    28/09/2012

    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…

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Informação

Publicado às 16/06/2012 por em Post e marcado , .

Estatísticas

  • 654,307 hits
%d blogueiros gostam disto: