Tutorial: Introdução ao ASP.NET Core SignalR

Este tutorial ensina os conceitos básicos da criação de um aplicativo em tempo real usando SignalR. Você aprenderá como:

  • Crie um projeto Web.
  • Adicione a biblioteca de SignalR clientes.
  • Criar um SignalR hub.
  • Configure o projeto a ser usado SignalR.
  • Adicione o código que envia mensagens de qualquer cliente para todos os clientes conectados.

No final, você terá um aplicativo de chat funcionando:

SignalR aplicativo de exemplo

Pré-requisitos

Criar um projeto de aplicativo Web

  1. Inicie o Visual Studio 2022 e selecione Criar um novo projeto.

    Criar um novo projeto na janela inicial

  2. Na caixa de diálogo Criar um novo projeto, selecione ASP.NET Core Aplicativo Web e selecione Avançar.

    Criar um aplicativo Web ASP.NET Core

  3. Na caixa de diálogo Configurar seu novo projeto , insira SignalRChat o nome do projeto. É importante nomear o chat do projetoSignalR, incluindo a correspondência da capitalização, para que os namespaces correspondam quando você copiar e colar o código de exemplo.

  4. Selecione Avançar.

  5. Na caixa de diálogo Informações adicionais , selecione .NET 6.0 (suporte a longo prazo) e, em seguida, selecione Criar.

    Informações adicionais

Adicionar a SignalR biblioteca de clientes

A SignalR biblioteca de servidores está incluída na estrutura compartilhada ASP.NET Core. A biblioteca de clientes do JavaScript não é incluída automaticamente no projeto. Para este tutorial, use o Gerenciador de Bibliotecas (LibMan) para obter a biblioteca de clientes do unpkg. unpkgé uma rede de distribuição de conteúdo global rápida para tudo no npm.

  • No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Biblioteca do Lado do Cliente.
  • Na caixa de diálogo Adicionar Client-Side Biblioteca :
    • Selecionar unpkg para Provedor
    • Inserir @microsoft/signalr@latest para Biblioteca
    • Selecione Escolher arquivos específicos, expanda a pasta dist/navegador e selecione signalr.js e signalr.min.js.
    • Definir o Local de Destino como wwwroot/js/signalr/
    • Selecionar Instalar

Caixa de diálogo Adicionar Biblioteca do Lado do Cliente – selecionar biblioteca

O LibMan cria uma pasta wwwroot/js/signalr e copia os arquivos selecionados para ela.

Criar um SignalR hub

Um hub é uma classe que funciona como um pipeline de alto nível que lida com a comunicação entre cliente e servidor.

  • Na pasta de projeto chat SignalR, crie uma pasta Hubs .
  • Na pasta Hubs , crie a ChatHub classe com o seguinte código:
using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

A ChatHub classe herda da SignalRHub classe. A classe Hub gerencia conexões, grupos e sistemas de mensagens.

O método SendMessage pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código cliente do JavaScript que chama o método é mostrado posteriormente no tutorial. SignalR o código é assíncrono para fornecer escalabilidade máxima.

configurar SignalR

O SignalR servidor deve ser configurado para passar SignalR solicitações para SignalR. Adicione o seguinte código realçado ao Program.cs arquivo.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

O código realçado anterior adiciona SignalR ao ASP.NET Core sistemas de injeção e roteamento de dependência.

Adicionar SignalR código do cliente

  • Substitua o conteúdo Pages/Index.cshtml pelo seguinte código:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    A marcação anterior:

    • Cria caixas de texto e um botão enviar.
    • Cria uma lista para id="messagesList" exibir mensagens recebidas do SignalR hub.
    • Inclui referências de script e SignalR o código do chat.js aplicativo é criado na próxima etapa.
  • Na pasta wwwroot/js , crie um chat.js arquivo com o seguinte código:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable the send button until connection is established.
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you 
        // should be aware of possible script injection concerns.
        li.textContent = `${user} says ${message}`;
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    O JavaScript anterior:

    • Cria e inicia uma conexão.
    • Adiciona no botão Enviar um manipulador que envia mensagens ao hub.
    • Adiciona no objeto de conexão um manipulador que recebe mensagens do hub e as adiciona à lista.

Executar o aplicativo

  • Pressione CTRL + F5 para executar o aplicativo sem depuração.
  • Copie a URL da barra de endereços, abra outra instância ou guia do navegador e cole a URL na barra de endereços.
  • Escolha qualquer navegador, insira um nome e uma mensagem e selecione o botão Enviar Mensagem. O nome e a mensagem são exibidos em ambas as páginas instantaneamente.

SignalR aplicativo de exemplo

Dica

  • Se o aplicativo não funcionar, abra as ferramentas para desenvolvedores do navegador (F12) e acesse o console. Você pode encontrar erros relacionados ao código HTML e JavaScript. Por exemplo, suponha que você coloque signalr.js uma pasta diferente da direcionada. Nesse caso, a referência a esse arquivo não funcionará e ocorrerá um erro 404 no console. signalr.js erro não encontrado

  • Se você receber o erro ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY no Chrome, execute estes comandos para atualizar seu certificado de desenvolvimento:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

Publicar no Azure

Para obter informações sobre como implantar no Azure, consulte Início Rápido: Implantar um aplicativo Web ASP.NET.

Este tutorial ensina os conceitos básicos da criação de um aplicativo em tempo real usando SignalR. Você aprenderá como:

  • Crie um projeto Web.
  • Adicione a biblioteca de SignalR clientes.
  • Criar um SignalR hub.
  • Configure o projeto a ser usado SignalR.
  • Adicione o código que envia mensagens de qualquer cliente para todos os clientes conectados.

No final, você terá um aplicativo de chat funcionando:

SignalR aplicativo de exemplo

Pré-requisitos

Criar um projeto de aplicativo Web

  • No menu, selecione Novo Projeto de Arquivo>.
  • Na caixa de diálogo Criar novo projeto, selecione Aplicativo Web ASP.NET Core e depois selecione Avançar.
  • Na caixa de diálogo Configurar seu novo projeto, nomeie o chat do projeto SignalRe selecione Criar.
  • Na caixa de diálogo Criar um novo aplicativo Web ASP.NET Core, selecione .NET Core e ASP.NET Core 3.1.
  • Selecione Aplicativo Web para criar um projeto que usa Páginas Razor e, em seguida, selecione Criar.

Caixa de diálogo Novo Projeto no Visual Studio

Adicionar a SignalR biblioteca de clientes

A SignalR biblioteca de servidores está incluída na estrutura compartilhada ASP.NET Core 3.1. A biblioteca de clientes do JavaScript não é incluída automaticamente no projeto. No cenário deste tutorial, você usará o Gerenciador de Bibliotecas (LibMan) para baixar a biblioteca de clientes do unpkg. unpkg é uma CDN (rede de distribuição de conteúdo) que pode fornecer qualquer coisa encontrada no npm, o gerenciador de pacotes Node.js.

  • No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Biblioteca do Lado do Cliente.
  • Na caixa de diálogo Adicionar Biblioteca do Lado do Cliente, para Provedor, selecione unpkg.
  • Para Biblioteca, insira @microsoft/signalr@latest.
  • Selecione Escolher arquivos específicos, expanda a pasta dist/navegador e selecione signalr.js e signalr.js.
  • Definir o Local de Destino como wwwroot/js/signalr/
  • Selecionar Instalar

Caixa de diálogo Adicionar Biblioteca do Lado do Cliente – selecionar biblioteca

O LibMan cria uma pasta wwwroot/js/signalr e copia os arquivos selecionados para ela.

Criar um SignalR hub

Um hub é uma classe que funciona como um pipeline de alto nível que lida com a comunicação entre cliente e servidor.

  • Na pasta de projeto chat SignalR, crie uma pasta Hubs .
  • Na pasta Hubs , crie um ChatHub.cs arquivo com o seguinte código:
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

A ChatHub classe herda da SignalRHub classe. A classe Hub gerencia conexões, grupos e sistemas de mensagens.

O método SendMessage pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código cliente do JavaScript que chama o método é mostrado posteriormente no tutorial. SignalR o código é assíncrono para fornecer escalabilidade máxima.

configurar SignalR

O SignalR servidor deve ser configurado para passar SignalR solicitações para SignalR.

  • Adicione o seguinte código realçado ao Startup.cs arquivo.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chatHub");
                });
            }
        }
    }
    

    Essas alterações são adicionadas SignalR aos sistemas de injeção e roteamento de dependência ASP.NET Core.

Adicionar SignalR código do cliente

  • Substitua o conteúdo Pages/Index.cshtml pelo seguinte código:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    O código anterior:

    • Cria as caixas de texto para o nome e a mensagem de texto e um botão Enviar.
    • Cria uma lista com id="messagesList" para exibir mensagens recebidas do SignalR hub.
    • Inclui referências de SignalR script e o código do chat.js aplicativo que você cria na próxima etapa.
  • Na pasta wwwroot/js , crie um chat.js arquivo com o seguinte código:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you 
        // should be aware of possible script injection concerns.
        li.textContent = `${user} says ${message}`;
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    O código anterior:

    • Cria e inicia uma conexão.
    • Adiciona no botão Enviar um manipulador que envia mensagens ao hub.
    • Adiciona no objeto de conexão um manipulador que recebe mensagens do hub e as adiciona à lista.

Executar o aplicativo

  • Pressione CTRL + F5 para executar o aplicativo sem depuração.
  • Copie a URL da barra de endereços, abra outra instância ou guia do navegador e cole a URL na barra de endereços.
  • Escolha qualquer navegador, insira um nome e uma mensagem e selecione o botão Enviar Mensagem. O nome e a mensagem são exibidos em ambas as páginas instantaneamente.

SignalR aplicativo de exemplo

Dica

  • Se o aplicativo não funcionar, abra as ferramentas para desenvolvedores do navegador (F12) e acesse o console. Você pode encontrar erros relacionados ao código HTML e JavaScript. Por exemplo, suponha que você coloque signalr.js uma pasta diferente da direcionada. Nesse caso, a referência a esse arquivo não funcionará e ocorrerá um erro 404 no console. signalr.js erro não encontrado

  • Se você receber o erro ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY no Chrome, execute estes comandos para atualizar seu certificado de desenvolvimento:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

Publicar no Azure

Para obter informações sobre como implantar no Azure, consulte Início Rápido: Implantar um aplicativo Web ASP.NET.