Tutorial: Chat em tempo real com SignalR 2 e MVC 5

Este tutorial mostra como usar ASP.NET SignalR 2 para criar um aplicativo de chat em tempo real. Você adiciona o SignalR a um aplicativo MVC 5 e cria uma exibição de chat para enviar e exibir mensagens.

Neste tutorial, você:

Pré-requisitos

• Visual Studio 2017 com a carga de trabalho ASP.NET e desenvolvimento para a Web.

Configurar o Projeto

Esta seção mostra como usar o Visual Studio 2017 e o SignalR 2 para criar um aplicativo vazio ASP.NET MVC 5, adicionar a biblioteca SignalR e criar o aplicativo de chat.

1. No Visual Studio, crie um aplicativo de ASP.NET C# direcionado .NET Framework 4.5, nomeie-o como SignalRChat e clique em OK.

   

2. Em Novo aplicativo Web ASP.NET - SignalRMvcChat, selecione MVC e, em seguida, selecione Alterar Autenticação.

3. Em Alterar Autenticação, selecione Sem Autenticação e clique em OK.

   

4. Em Novo aplicativo Web ASP.NET - SignalRMvcChat, selecione OK.

5. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Novo Item.

6. Em Adicionar Novo Item – SignalRChat, selecione Instalado>Visual C#>Web>SignalR e, em seguida, selecione Classe do Hub do SignalR (v2).

7. Nomeie a classe ChatHub e adicione-a ao projeto.

   Esta etapa cria o arquivo de classe ChatHub.cs e adiciona um conjunto de arquivos de script e referências de assembly que dão suporte ao SignalR ao projeto.

8. Substitua o código no novo arquivo de classe ChatHub.cs por este código:

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

9. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Classe.

10. Nomeie a nova classe Startup e adicione-a ao projeto.

11. Substitua o código no arquivo de classe Startup.cs por este código:

    using Owin;
    using Microsoft.Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
    

12. Em Gerenciador de Soluções, selecione Controladores>HomeController.cs.

13. Adicione esse método ao HomeController.cs.

    public ActionResult Chat()
    {
        return View();
    }
    

    Esse método retorna a exibição chat que você cria em uma etapa posterior.

14. Em Gerenciador de Soluções, clique com o botão direito do mouse em Modos> de ExibiçãoPágina Inicial e selecione Adicionar>Exibição.

15. Em Adicionar Exibição, nomeie o novo modo de exibição Chat e selecione Adicionar.

16. Substitua o conteúdo de Chat.cshtml por este código:

    @{
        ViewBag.Title = "Chat";
    }
    <h2>Chat</h2>
    <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>
    @section scripts {
        <!--Script references. -->
        <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
        <!--Reference the SignalR library. -->
        <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="~/signalr/hubs"></script>
        <!--SignalR script to update the chat page and send messages.--> 
        <script>
            $(function () {
                // Reference the auto-generated proxy for the hub.  
                var chat = $.connection.chatHub;
                // Create a function that the hub can call back to display messages.
                chat.client.addNewMessageToPage = function (name, message) {
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + htmlEncode(name) 
                        + '</strong>: ' + htmlEncode(message) + '</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();
                    });
                });
            });
            // This optional function html-encodes messages for display in the page.
            function htmlEncode(value) {
                var encodedValue = $('<div />').text(value).html();
                return encodedValue;
            }
        </script>
    }
    

17. Em Gerenciador de Soluções, expanda Scripts.

    As bibliotecas de script para jQuery e SignalR são visíveis no projeto.

    Importante

    O gerenciador de pacotes pode ter instalado uma versão posterior dos scripts do SignalR.

18. Verifique se as referências de script no bloco de código correspondem às versões dos arquivos de script no projeto.

    Referências de script do bloco de código original:

    <!--Script references. -->
    <!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
    <!--Reference the SignalR library. -->
    <script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
    

19. Se eles não corresponderem, atualize o arquivo .cshtml .

20. Na barra de menus, selecione Arquivo>Salvar Tudo.

Executar o exemplo

1. Na barra de ferramentas, ative a Depuração de Script e, em seguida, selecione o botão Reproduzir para executar o exemplo no modo de Depuração.

   

2. Quando o navegador for aberto, insira um nome para sua identidade de chat.

3. Copie a URL do navegador, abra dois outros navegadores e cole as URLs nas barras de endereços.

4. Em cada navegador, insira um nome exclusivo.

5. Agora, adicione um comentário e selecione Enviar. Repita isso nos outros navegadores. Os comentários aparecem em tempo real.

   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.

   Veja como o aplicativo de chat é executado em três navegadores diferentes. Quando Tom, Anand e Susan enviam mensagens, todos os navegadores são atualizados em tempo real:

   

6. 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 em runtime. Esse arquivo gerencia a comunicação entre o script jQuery e o código do lado do servidor.

   

Examinar o código

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

Hubs signalr no ChatHub.cs

No exemplo de código, a ChatHub classe deriva da Microsoft.AspNet.SignalR.Hub classe . Derivar da Hub classe é 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 em uma página da Web.

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

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

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

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

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

  public class ChatHub : Hub
  {
      public void Send(string name, string message)
      {
          Clients.All.addNewMessageToPage(name, message);
      }
  }
  

SignalR e jQuery Chat.cshtml

O arquivo de exibição Chat.cshtml no exemplo de código mostra como usar a biblioteca jQuery do SignalR para se comunicar com um hub signalr. O código executa muitas tarefas importantes. Ele cria uma referência ao proxy gerado automaticamente para o hub, declara uma função que o servidor pode chamar para enviar conteúdo por push aos clientes e inicia uma conexão para enviar mensagens para o hub.

var chat = $.connection.chatHub;

Neste bloco de código, você cria uma função de retorno de chamada no script.

chat.client.addNewMessageToPage = function (name, message) {
    // Add the message to the page. 
    $('#discussion').append('<li><strong>' + htmlEncode(name) 
        + '</strong>: ' + htmlEncode(message) + '</li>');
};

A classe hub no servidor chama essa função para enviar atualizações de conteúdo por push para cada cliente. A chamada opcional para a htmlEncode função mostra uma maneira de codificar html o conteúdo da mensagem antes de exibi-lo na página. É uma maneira de evitar a injeção de script.

Esse código abre uma conexão com o hub.

$.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();
    });
});

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

Obter o código

Baixar Projeto Concluído

Recursos adicionais

Para obter mais informações sobre o SignalR, consulte os seguintes recursos:

• Projeto do SignalR

• Exemplos e GitHub do SignalR

• SignalR Wiki

Próximas etapas

Neste tutorial, você:

Avance para o próximo artigo para saber como criar um aplicativo Web que usa ASP.NET SignalR 2 para fornecer funcionalidade de mensagens de alta frequência.