Tutorial: Bate-papo em tempo real com SignalR 2Tutorial: Real-time chat with SignalR 2

Este tutorial mostra como usar o SignalR para criar um aplicativo de bate-papo em tempo real.This tutorial shows you how to use SignalR to create a real-time chat application. Adicionar o SignalR para um aplicativo de web ASP.NET vazio e criar uma página HTML para enviar e exibir as mensagens.You add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

Neste tutorial, você:In this tutorial, you:

  • Configurar o projetoSet up the project
  • Executar o exemploRun the sample
  • Examinar o códigoExamine the code

Warning

Esta documentação não é a versão mais recente do SignalR.This documentation isn't for the latest version of SignalR. Dê uma olhada SignalR do ASP.NET Core.Take a look at ASP.NET Core SignalR.

Pré-requisitosPrerequisites

Configurar o projetoSet up the Project

Esta seção mostra como usar o Visual Studio 2017 e SignalR 2 para criar um aplicativo web ASP.NET vazio, adicione o SignalR e criar o aplicativo de bate-papo.This section shows how to use Visual Studio 2017 and SignalR 2 to create an empty ASP.NET web application, add SignalR, and create the chat application.

  1. No Visual Studio, crie um aplicativo Web ASP.NET.In Visual Studio, create an ASP.NET Web Application.

    Criar web

  2. No novo projeto ASP.NET - SignalRChat janela, deixe vazia selecionado e selecione Okey.In the New ASP.NET Project - SignalRChat window, leave Empty selected and select OK.

  3. Na Gerenciador de soluções, clique com botão direito no projeto e selecione Add > Novo Item.In Solution Explorer, right-click the project and select Add > New Item.

  4. Na Adicionar Novo Item – SignalRChat, selecione instalado > Visual C# > Web > SignalR e, em seguida, selecione classe de Hub do SignalR (v2).In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  5. Nomeie a classe ChatHub e adicioná-lo ao projeto.Name the class ChatHub and add it to the project.

    Esta etapa cria o ChatHub.cs arquivo de classe e adiciona um conjunto de arquivos de script e referências de assembly que dão suporte ao SignalR ao projeto.This step creates the ChatHub.cs class file and adds a set of script files and assembly references that support SignalR to the project.

  6. Substitua o código no novo ChatHub.cs arquivo de classe com este código:Replace the code in the new ChatHub.cs class file with this code:

    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);
            }
        }
    }
    
  7. Na Gerenciador de soluções, clique com botão direito no projeto e selecione Add > Novo Item.In Solution Explorer, right-click the project and select Add > New Item.

  8. Na Adicionar Novo Item – SignalRChat selecionar instalado > Visual C# > Web e, em seguida, Selecione classe de inicialização OWIN.In Add New Item - SignalRChat select Installed > Visual C# > Web and then select OWIN Startup Class.

  9. Nomeie a classe inicialização e adicioná-lo ao projeto.Name the class Startup and add it to the project.

  10. Substitua o código padrão no inicialização classe com este código:Replace the default code in Startup class with this code:

    using Microsoft.Owin;
    using 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();
            }
        }
    }
    
  11. Na Gerenciador de soluções, clique com botão direito no projeto e selecione Add > página HTML.In Solution Explorer, right-click the project and select Add > HTML Page.

  12. Nomeie a nova página índice e selecione Okey.Name the new page index and select OK.

  13. Na Gerenciador de soluções, a página HTML que você criou com o botão direito e selecione definir como página inicial.In Solution Explorer, right-click the HTML page you created and select Set as Start Page.

  14. Substitua o código padrão na página HTML com este código:Replace the default code in the HTML page with this code:

    <!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-3.1.1.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.1.min.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>
    
  15. Na Gerenciador de soluções, expanda Scripts.In Solution Explorer, expand Scripts.

    Bibliotecas de script para o jQuery e o SignalR são visíveis no projeto.Script libraries for jQuery and SignalR are visible in the project.

    Important

    O Gerenciador de pacotes pode ter instalado uma versão mais recente dos scripts do SignalR.The package manager may have installed a later version of the SignalR scripts.

  16. Verifique se as referências de script no bloco de código correspondem às versões dos arquivos de script no projeto.Check that the script references in the code block correspond to the versions of the script files in the project.

    Referências de script de bloco de código original:Script references from the original code block:

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    
  17. Se eles não corresponderem, atualize o . HTML arquivo.If they don't match, update the .html file.

  18. Na barra de menus, selecione arquivo > Salvar tudo.From the menu bar, select File > Save All.

Executar o exemploRun the Sample

  1. Na barra de ferramentas, ative depuração de Script e, em seguida, selecione o botão Reproduzir para executar o exemplo no modo de depuração.In the toolbar, turn on Script Debugging and then select the play button to run the sample in Debug mode.

    Insira o nome de usuário

  2. Quando o navegador for aberta, insira um nome para sua identidade de bate-papo.When the browser opens, enter a name for your chat identity.

  3. Copie a URL do navegador, abra dois outros navegadores e cole as URLs em barras de endereço.Copy the URL from the browser, open two other browsers, and paste the URLs into the address bars.

  4. Em cada navegador, insira um nome exclusivo.In each browser, enter a unique name.

  5. Agora, adicione um comentário e selecione enviar.Now, add a comment and select Send. Repita que em outros navegadores.Repeat that in the other browsers. Os comentários são exibidos em tempo real.The comments appear in real-time.

    Note

    Este aplicativo de bate-papo simples não mantém o contexto de discussão no servidor.This simple chat application does not maintain the discussion context on the server. O hub transmite seus comentários para todos os usuários atuais.The hub broadcasts comments to all current users. Usuários que participam de bate-papo mais tarde verá mensagens adicionadas desde o momento em que entrarem.Users who join the chat later will see messages added from the time they join.

    Veja como o aplicativo de bate-papo é executado em três diferentes navegadores.See how the chat application runs in three different browsers. Quando o Tom, Anand e Susan enviam mensagens, todos os navegadores são atualizados em tempo real:When Tom, Anand, and Susan send messages, all browsers update in real time:

    Todos os três navegadores exibem ao mesmo histórico de bate-papo

  6. Na Gerenciador de soluções, inspecione o documentos de Script nó para o aplicativo em execução.In Solution Explorer, inspect the Script Documents node for the running application. Há um arquivo de script denominado hubs que a biblioteca SignalR gera em tempo de execução.There's a script file named hubs that the SignalR library generates at runtime. Este arquivo gerencia a comunicação entre o script jQuery e o código do lado do servidor.This file manages the communication between jQuery script and server-side code.

    script de hubs gerado automaticamente no nó documentos de Script

Examinar o códigoExamine the Code

O aplicativo SignalRChat demonstra duas tarefas básicas de desenvolvimento de SignalR.The SignalRChat application demonstrates two basic SignalR development tasks. Ele mostra como criar um hub.It shows you how to create a hub. O servidor usa esse hub de que o objeto principal de coordenação.The server uses that hub as the main coordination object. O hub usa a biblioteca jQuery SignalR para enviar e receber mensagens.The hub uses the SignalR jQuery library to send and receive messages.

Hubs de SignalR no ChatHub.csSignalR Hubs in the ChatHub.cs

No exemplo de código acima, o ChatHub classe deriva de Microsoft.AspNet.SignalR.Hub classe.In the code sample above, the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Derivando a Hub classe é uma maneira útil para criar um aplicativo do SignalR.Deriving from the Hub class is a useful way to build a SignalR application. Você pode criar métodos públicos em sua classe de hub e, em seguida, usar esses métodos chamando-as de scripts em uma página da web.You can create public methods on your hub class and then use those methods by calling them from scripts in a web page.

No código de bate-papo, os clientes chamam o ChatHub.Send método para enviar uma nova mensagem.In the chat code, clients call the ChatHub.Send method to send a new message. O hub, em seguida, envia a mensagem a todos os clientes chamando Clients.All.broadcastMessage.The hub then sends the message to all clients by calling Clients.All.broadcastMessage.

O Send método demonstra vários conceitos de hub:The Send method demonstrates several hub concepts:

  • Declare métodos públicos em um hub para que os clientes possam chamá-los.Declare public methods on a hub so that clients can call them.

  • Use o Microsoft.AspNet.SignalR.Hub.Clients propriedade dinâmica para se comunicar com todos os clientes conectados a esse hub.Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to communicate with all clients connected to this hub.

  • Chamar uma função no cliente (como o broadcastMessage função) para atualizar os clientes.Call a function on the client (like the broadcastMessage function) to update clients.

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

O SignalR e jQuery em index. HTMLSignalR and jQuery in the index.html

O index. HTML página no exemplo de código mostra como usar a biblioteca jQuery SignalR para se comunicar com um hub SignalR.The index.html page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. O código realiza várias tarefas importantes.The code carries out many important tasks. Ele declara um proxy para o hub de referência, declara uma função que o servidor pode chamar para enviar conteúdo aos clientes, e ele inicia uma conexão para enviar mensagens ao hub.It declares a proxy to reference the hub, declares a function that the server can call to push content to clients, and it starts a connection to send messages to the hub.

var chat = $.connection.chatHub;

Note

Em JavaScript a referência para a classe de servidor e seus membros deve ser camelCase.In JavaScript the reference to the server class and its members has to be camelCase. As referências de exemplo de código a C# ChatHub classe no JavaScript, enquanto chatHub.The code sample references the C# ChatHub class in JavaScript as chatHub.

Este bloco de código, você cria uma função de retorno de chamada no script.In this code block, you create a callback function in the 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>');
    };

A classe hub no servidor chama essa função para enviar atualizações de conteúdo para cada cliente.The hub class on the server calls this function to push content updates to each client. As duas linhas que a codificação HTML o conteúdo antes de exibi-los são opcionais e mostrar uma boa maneira de evitar a injeção de script.The two lines that HTML-encode the content before displaying it are optional and show a good way to prevent script injection.

Esse código abre uma conexão com o hub.This code opens a connection with the 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();
        });
    });

Note

Essa abordagem garante que o código estabelece uma conexão antes de ser executado o manipulador de eventos.This approach ensures that the code establishes a connection before the event handler executes.

O código começa a conexão e, em seguida, passa a ele uma função para manipular o evento de clique no enviar botão na página HTML.The code starts the connection and then passes it a function to handle the click event on the Send button in the HTML page.

Obter o códigoGet the code

Baixe o projeto concluídoDownload Completed Project

Recursos adicionaisAdditional resources

Para obter mais informações sobre o SignalR, consulte os seguintes recursos:For more about SignalR, see the following resources:

Próximas etapasNext steps

Neste tutorial você:In this tutorial you:

  • Configurar o projetoSet up the project
  • Executar a amostraRan the sample
  • Examinado o códigoExamined the code

Avance para o próximo artigo para saber como usar o SignalR e ao MVC 5.Advance to the next article to learn how to use SignalR and MVC 5.