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

  • Artigo
  • 14 minutos para o fim da leitura

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.