Tutorial: Chat em tempo real com o SignalR 2

Artigo
07/13/2023

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

Neste tutorial, você:

Configurar o projeto
Execute o exemplo
Examinar o código

Aviso

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

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 Web ASP.NET vazio, adicionar o SignalR e criar o aplicativo de chat.

No Visual Studio, crie um aplicativo Web ASP.NET.
Na janela Novo projeto de ASP.NET – SignalRChat , deixe Vazio selecionado e selecione OK.
Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Novo Item.
Em Adicionar Novo Item – SignalRChat, selecioneVisual C#>Web>SignalRinstalado> e, em seguida, selecione Classe do Hub do SignalR (v2).
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.

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 broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
}

Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Novo Item.
Em Adicionar Novo Item – SignalRChat, selecioneVisual C#>WebInstalado> e, em seguida, selecione Classe de Inicialização OWIN.
Nomeie a classe Startup e adicione-a ao projeto.

Substitua o código padrão na classe Startup por este código:

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

Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Página HTML.
Nomeie o novo índice de página e selecione OK.
Em Gerenciador de Soluções, clique com o botão direito do mouse na página HTML que você criou e selecione Definir como Página Inicial.

Substitua o código padrão na página HTML por este código:

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

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.

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

Se eles não corresponderem, atualize o arquivo .html .
Na barra de menus, selecione Arquivo>Salvar Tudo.

Executar o exemplo

Na barra de ferramentas, ative a Depuração de Script e selecione o botão Reproduzir para executar o exemplo no modo de Depuração.
Quando o navegador for aberto, insira um nome para sua identidade de chat.
Copie a URL do navegador, abra dois outros navegadores e cole as URLs nas barras de endereços.
Em cada navegador, insira um nome exclusivo.
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:
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 SignalRChat 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 do SignalR no ChatHub.cs

No exemplo de código acima, 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, usar 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. Em seguida, o hub envia a mensagem para todos os clientes chamando Clients.All.broadcastMessage.

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 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 no index.html

A página index.html no exemplo de código mostra como usar a biblioteca jQuery do SignalR para se comunicar com um hub do SignalR. O código executa muitas tarefas importantes. Ele declara um proxy para fazer referência ao 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 ao hub.

var chat = $.connection.chatHub;

Observação

Em JavaScript, a referência à classe de servidor e seus membros deve ser camelCase. O exemplo de código faz referência à classe ChatHub do C# em JavaScript como chatHub.

Nesse bloco de código, você cria uma função de retorno de chamada no 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 de hub no servidor chama essa função para enviar atualizações de conteúdo por push para cada cliente. As duas linhas que codificam html o conteúdo antes de exibi-lo são opcionais e mostram uma boa 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();
        });
    });

Observação

Essa abordagem garante que o código estabeleça uma conexão antes da execução do manipulador de eventos.

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.

Obter o código

Baixar Projeto Concluído

Recursos adicionais

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

Próximas etapas

Neste tutorial, você:

Configurar o projeto
Executou o exemplo
Examinou o código

Avance para o próximo artigo para saber como usar o SignalR e o MVC 5.

SignalR 2 e MVC 5

Compartilhar via

Tutorial: Chat em tempo real com o SignalR 2

Pré-requisitos

Configurar o Projeto

Executar o exemplo

Examinar o código

Hubs do SignalR no ChatHub.cs

SignalR e jQuery no index.html

Obter o código

Recursos adicionais

Próximas etapas

Comentários

Recursos adicionais