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 para usar 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 do 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, em seguida, selecione Avançar.

    Criar um aplicativo Web ASP.NET Core

  3. Na caixa de diálogo Configurar seu novo projeto , insira SignalRChat para 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 Biblioteca Client-Side :
    • Selecionar unpkg para Provedor
    • Inserir @microsoft/signalr@latest para Biblioteca
    • Selecione Escolher arquivos específicos, expanda a pasta dist/browser e selecione signalr.js e signalr.min.js.
    • Definir Local de Destino como wwwroot/js/signalr/
    • Selecione 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 ele.

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 Projeto de SignalRchat, 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 código realçado a seguir 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 em 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 com id="messagesList" para exibir mensagens recebidas do SignalR hub.
    • Inclui referências de script para SignalR e 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.

Execute 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 em 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, confira 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 SignalR biblioteca de clientes.
  • Criar um SignalR hub.
  • Configure o projeto para usar 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 do aplicativo Web

  • No menu, selecione Arquivo > Novo Projeto.
  • 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 projeto SignalRchat e selecione Criar.
  • Na caixa de diálogo Criar um 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.min.js.
  • Definir Local de Destino como wwwroot/js/signalr/
  • Selecione 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 Projeto de SignalRchat, 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 código realçado a seguir 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 no 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 script para SignalR 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 em 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.