Tutorial: Introdução ao SignalR 1.x

  • Artigo

por Patrick Fletcher, Tim Teebken

Aviso

Esta documentação não é para a versão mais recente do SignalR. Dê uma olhada em ASP.NET Core SignalR.

Este tutorial mostra como usar o SignalR para criar um aplicativo de chat em tempo real. Você adicionará o SignalR a um aplicativo Web ASP.NET vazio e criará uma página HTML para enviar e exibir mensagens.

Visão geral

Este tutorial apresenta o desenvolvimento do SignalR mostrando como criar um aplicativo de chat simples baseado em navegador. Você adicionará a biblioteca SignalR a um aplicativo Web ASP.NET vazio, criará uma classe de hub para enviar mensagens aos clientes e criará uma página HTML que permite que os usuários enviem e recebam mensagens de chat. Para obter um tutorial semelhante que mostra como criar um aplicativo de chat no MVC 4 usando uma exibição MVC, consulte Introdução com SignalR e MVC 4.

Observação

Este tutorial usa a versão de versão (1.x) do SignalR. Para obter detalhes sobre as alterações entre o SignalR 1.x e 2.0, consulte Atualizando projetos do SignalR 1.x.

O SignalR é uma biblioteca .NET de software livre para a criação de aplicativos Web que exigem interação dinâmica do usuário ou atualizações de dados em tempo real. Exemplos incluem aplicativos sociais, jogos multiusuários, colaboração empresarial e notícias, clima ou aplicativos de atualização financeira. Eles geralmente são chamados de aplicativos em tempo real.

O SignalR simplifica o processo de criação de aplicativos em tempo real. Ele inclui uma biblioteca de servidores ASP.NET e uma biblioteca de clientes JavaScript para facilitar o gerenciamento de conexões cliente-servidor e atualizações de conteúdo por push para clientes. Você pode adicionar a biblioteca SignalR a um aplicativo ASP.NET existente para obter funcionalidade em tempo real.

O tutorial demonstra as seguintes tarefas de desenvolvimento do SignalR:

  • Adicionando a biblioteca SignalR a um aplicativo Web ASP.NET.
  • Criando uma classe de hub para enviar conteúdo por push aos clientes.
  • Usando a biblioteca jQuery do SignalR em uma página da Web para enviar mensagens e exibir atualizações do hub.

A captura de tela a seguir mostra o aplicativo de chat em execução em um navegador. Cada novo usuário pode postar comentários e ver comentários adicionados após o usuário ingressar no chat.

Instâncias de chat

Seções:

Configurar o Projeto

Esta seção mostra como criar um aplicativo Web ASP.NET vazio, adicionar o SignalR e criar o aplicativo de chat.

Pré-requisitos:

  • Visual Studio 2010 SP1 ou 2012. Se você não tiver o Visual Studio, consulte ASP.NET Downloads para obter a Ferramenta de Desenvolvimento Expressa do Visual Studio 2012 gratuita.
  • Microsoft ASP.NET and Web Tools 2012.2. Para o Visual Studio 2012, esse instalador adiciona novos recursos de ASP.NET, incluindo modelos do SignalR ao Visual Studio. Para o Visual Studio 2010 SP1, um instalador não está disponível, mas você pode concluir o tutorial instalando o pacote NuGet do SignalR, conforme descrito nas etapas de instalação.

As etapas a seguir usam o Visual Studio 2012 para criar um aplicativo Web ASP.NET Vazio e adicionar a biblioteca signalr:

  1. No Visual Studio, crie um aplicativo Web ASP.NET vazio.

    Criar Web vazia

  2. Abra o Console do Gerenciador de Pacotes selecionando Ferramentas | Gerenciador de Pacotes NuGet | Console do Gerenciador de Pacotes. Insira o seguinte comando na janela do console:

    Install-Package Microsoft.AspNet.SignalR -Version 1.1.3

    Este comando instala a versão mais recente do SignalR 1.x.

  3. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto, selecione Adicionar | Classe. Nomeie a nova classe ChatHub.

  4. Em Gerenciador de Soluções expanda o nó Scripts. As bibliotecas de script para jQuery e SignalR são visíveis no projeto.

    Referências de biblioteca

  5. Substitua o código na classe ChatHub pelo código a seguir.

    using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

  6. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e clique em Adicionar | Novo Item. Na caixa de diálogo Adicionar Novo Item , selecione Classe de Aplicativo Global e clique em Adicionar.

    Adicionar global

  7. Adicione as instruções a seguir using após as instruções fornecidas using na classe Global.asax.cs.

    using System.Web.Routing;
using Microsoft.AspNet.SignalR;

  8. Adicione a seguinte linha de código no Application_Start método da classe Global para registrar a rota padrão para hubs SignalR.

    // Register the default hubs route: ~/signalr/hubs
RouteTable.Routes.MapHubs();

  9. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e clique em Adicionar | Novo Item. Na caixa de diálogo Adicionar Novo Item , selecione Página Html e clique em Adicionar.

  10. Em Gerenciador de Soluções, clique com o botão direito do mouse na página HTML que você acabou de criar e clique em Definir como Página Inicial.

  11. Substitua o código padrão na página HTML pelo código a seguir.

    <!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion">
        </ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="/Scripts/jquery-1.6.4.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="/Scripts/jquery.signalR-1.1.4.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="/signalr/hubs"></script>
    <!--Add script to update the page and send messages.--> 
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message. 
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page. 
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.  
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub. 
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment. 
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

  12. Salve Tudo para o projeto.

Executar o exemplo

  1. Pressione F5 para executar o projeto no modo de depuração. A página HTML é carregada em uma instância do navegador e solicita um nome de usuário.

    Inserir nome de usuário

  2. Insira um nome de usuário.

  3. Copie a URL da linha de endereço do navegador e use-a para abrir mais duas instâncias do navegador. Em cada instância do navegador, insira um nome de usuário exclusivo.

  4. Em cada instância do navegador, adicione um comentário e clique em Enviar. Os comentários devem ser exibidos em todas as instâncias do navegador.

    Observação

    Esse aplicativo de chat simples não mantém o contexto de discussão no servidor. O hub transmite comentários para todos os usuários atuais. Os usuários que ingressarem no chat mais tarde verão mensagens adicionadas a partir do momento em que ingressarem.

    A captura de tela a seguir mostra o aplicativo de chat em execução em três instâncias do navegador, todas atualizadas quando uma instância envia uma mensagem:

    Navegadores de chat

  5. Em Gerenciador de Soluções, inspecione o nó Documentos de Script para o aplicativo em execução. Há um arquivo de script chamado hubs que a biblioteca SignalR gera dinamicamente em runtime. Esse arquivo gerencia a comunicação entre o script jQuery e o código do lado do servidor.

    Script de hub gerado

Examinar o código

O aplicativo de chat SignalR demonstra duas tarefas básicas de desenvolvimento do SignalR: criar um hub como o objeto de coordenação main no servidor e usar a biblioteca jQuery do SignalR para enviar e receber mensagens.

Hubs SignalR

No exemplo de código, a classe ChatHub deriva da classe Microsoft.AspNet.SignalR.Hub . Derivar da classe Hub é uma maneira útil de criar um aplicativo SignalR. Você pode criar métodos públicos em sua classe de hub e, em seguida, acessar esses métodos chamando-os de scripts jQuery em uma página da Web.

No código de chat, os clientes chamam o método ChatHub.Send para enviar uma nova mensagem. O hub, por sua vez, envia a mensagem para todos os clientes chamando Clients.All.broadcastMessage.

O método Send demonstra vários conceitos de hub:

  • Declare métodos públicos em um hub para que os clientes possam chamá-los.

  • Use a propriedade dinâmica Microsoft.AspNet.SignalR.Hub.Clients para acessar todos os clientes conectados a esse hub.

  • Chame uma função jQuery no cliente (como a broadcastMessage função) para atualizar clientes.

    public class ChatHub : Hub
{
    public void Send(string name, string message)
    {
        // Call the broadcastMessage method to update clients.
        Clients.All.broadcastMessage(name, message);
    }
}

SignalR e jQuery

A página HTML no exemplo de código mostra como usar a biblioteca jQuery do SignalR para se comunicar com um hub signalr. As tarefas essenciais no código são declarar um proxy para fazer referência ao hub, declarar uma função que o servidor pode chamar para enviar conteúdo por push aos clientes e iniciar uma conexão para enviar mensagens para o hub.

O código a seguir declara um proxy para um hub.

var chat = $.connection.chatHub;

Observação

No jQuery, a referência à classe de servidor e seus membros está em maiúsculas e minúsculas. O exemplo de código faz referência à classe do ChatHub em C# em jQuery como chatHub.

O código a seguir é como você cria uma função de retorno de chamada no script. A classe de hub no servidor chama essa função para enviar atualizações de conteúdo por push para cada cliente. As duas linhas que o HTML codificam o conteúdo antes de exibi-lo são opcionais e mostram uma maneira simples de evitar a injeção de script.

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

O código a seguir mostra como abrir uma conexão com o hub. O código inicia a conexão e, em seguida, passa uma função para manipular o evento de clique no botão Enviar na página HTML.

Observação

Essa abordagem garante que a conexão seja estabelecida antes da execução do manipulador de eventos.

$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

Próximas etapas

Você aprendeu que o SignalR é uma estrutura para a criação de aplicativos Web em tempo real. Você também aprendeu várias tarefas de desenvolvimento do SignalR: como adicionar o SignalR a um aplicativo ASP.NET, como criar uma classe de hub e como enviar e receber mensagens do hub.

Você pode disponibilizar o aplicativo de exemplo neste tutorial ou em outros aplicativos do SignalR pela Internet implantando-os em um provedor de hospedagem. A Microsoft oferece hospedagem na Web gratuita para até 10 sites em uma conta de avaliação gratuita do Windows Azure. Para obter um passo a passo sobre como implantar o aplicativo SignalR de exemplo, consulte Publicar o Exemplo de Introdução do SignalR como um site do Windows Azure. Para obter informações detalhadas sobre como implantar um projeto Web do Visual Studio em um site do Windows Azure, consulte Implantando um aplicativo ASP.NET em um site do Windows Azure. (Observação: atualmente, não há suporte para o transporte WebSocket para Sites do Windows Azure. Quando o transporte WebSocket não está disponível, o SignalR usa os outros transportes disponíveis, conforme descrito na seção Transportes do tópico Introdução ao SignalR.)

Para saber mais sobre os conceitos mais avançados de desenvolvimento do SignalR, visite os seguintes sites para o código-fonte e os recursos do SignalR: