16 June, 2012 0 Comments AUTHOR: elemarjr CATEGORIES: Sem categoria Tags: ,

Comunicação “Real-time” cliente/servidor com SignalR

Tempo de leitura: 1 minute

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.

0 Comments

  1. Antonio Castro Jr (@agcjunior) 4 years ago says:

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

    Reply
  2. ericlemes 4 years ago says:

    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!

    Reply
    • Pasquale 3 years ago says:

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

      Reply
  3. Cleyton Ferrari 4 years ago says:

    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!

    Reply
    • jose 4 years ago says:

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

      Reply
      • Cleyton Ferrari 4 years ago says:

        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.

        Reply
  4. Alexsandro (@alexsandro_xpt) 4 years ago says:

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

    Reply
  5. ericlemes 4 years ago says:

    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

    Reply
  6. Rafael Zaccanini 4 years ago says:

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

    Reply