Partilhar via

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

Note

Esta não é a versão mais recente deste artigo. Para a versão atual, consulte a versão .NET 10 deste artigo.

Warning

Esta versão do ASP.NET Core não é mais suportada. Para obter mais informações, consulte a Política de suporte do .NET e do .NET Core. Para a versão atual, consulte a versão .NET 9 deste artigo.

Este tutorial ensina os conceitos básicos da criação de uma aplicação em tempo real usando SignalR. Você aprende a:

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

No final, você terá um aplicativo de bate-papo de trabalho:

SignalR aplicativo de exemplo

Prerequisites

Criar um projeto de aplicativo Web

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

Criar um novo projeto a partir da janela inicial

Na caixa de diálogo Criar um novo projeto , selecione ASP.NET Core Web App (Razor Pages) e, em seguida, selecione Next.

Criar uma ASP.NET Core Web App

Na caixa de diálogo Configurar o novo projeto, digite SignalRChat para nome do projeto. É importante nomear o projeto SignalRChat, incluindo a correta capitalização, para que os namespaces correspondam ao código no tutorial.

Selecione Avançar.

Na caixa de diálogo Informações adicionais , selecione .NET 8.0 (Suporte de longo prazo) e, em seguida, selecione Criar.

Informações adicionais

Adicionar a biblioteca de cliente SignalR

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

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Client-Side Biblioteca.

Na caixa de diálogo Adicionar Client-Side Biblioteca :

  • Selecione unpkg para Provedor
  • Insira @microsoft/signalr@latest para Biblioteca.
  • Selecione Escolher arquivos específicos, expanda a pasta dist/browser e selecione signalr.js e signalr.min.js.
  • Defina o Local de Destino como wwwroot/js/signalr/.
  • Selecione Instalar.

Caixa de diálogo Adicionar Biblioteca Client-Side - selecionar biblioteca

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

Criar um SignalR hub

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

Na pasta do projeto SignalRChat, crie uma Hubs pasta.

Hubs Na pasta, 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 Hub classe gerencia conexões, grupos e mensagens.

O SendMessage método pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código do cliente 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 arquivo Program.cs.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

O código destacado anteriormente adiciona SignalR aos sistemas de injeção de dependências e de roteamento do ASP.NET Core.

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 p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </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 de envio.
  • Cria uma lista com id="messagesList" para exibir mensagens recebidas do SignalR hub.
  • Inclui referências de script a SignalR e o código da aplicação chat.js é criado na próxima etapa.

wwwroot/js Na pasta, 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 ao botão de envio um manipulador que envia mensagens para o hub.
  • Adiciona ao objeto de conexão um manipulador que recebe mensagens do hub e as adiciona à lista.

Executar o aplicativo

Selecione Ctrl+F5 para executar o aplicativo sem depuração.

Copie o URL da barra de endereço, abra outra instância ou guia do navegador e cole o URL na barra de endereço.

Escolha um 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.

Aplicativo de exemplo concluído SignalR

Tip

Se o aplicativo não funcionar, abra as ferramentas de desenvolvedor do navegador (F12) e vá para o console. Procure possíveis erros relacionados ao código HTML e JavaScript. Por exemplo, se signalr.js foi colocado em uma pasta diferente da direcionada, a referência a esse arquivo não funcionará, resultando em um erro 404 no console. signalr.js erro não encontrado Se tiver ocorrido um ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY erro no Chrome, execute os seguintes comandos para atualizar o 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 Guia de início rápido: implantar um aplicativo Web ASP.NET. Para obter mais informações sobre o Serviço do Azure SignalR , consulte O que é o Serviço do Azure SignalR ?.

Próximos passos

Este tutorial ensina os conceitos básicos da criação de uma aplicação em tempo real usando SignalR. Você aprende a:

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

No final, você terá um aplicativo de bate-papo de trabalho:

SignalR aplicativo de exemplo

Prerequisites

Criar um projeto de aplicativo Web

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

Criar um novo projeto a partir da janela inicial

Na caixa de diálogo Criar um novo projeto , selecione ASP.NET Core Web Appe, em seguida, selecione Seguinte.

Criar uma ASP.NET Core Web App

Na caixa de diálogo Configurar o novo projeto, digite SignalRChat para nome do projeto. É importante nomear o projeto SignalRChat, incluindo a correta capitalização, para que os namespaces correspondam ao código no tutorial.

Selecione Avançar.

Na caixa de diálogo Informações adicionais , selecione .NET 7.0 (Suporte de Termo Padrão) e, em seguida, selecione Criar.

Informações adicionais

Adicionar a biblioteca de cliente SignalR

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

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Client-Side Biblioteca.

Na caixa de diálogo Adicionar Client-Side Biblioteca :

  • Selecione unpkg para Provedor
  • Insira @microsoft/signalr@latest para Biblioteca.
  • Selecione Escolher arquivos específicos, expanda a pasta dist/browser e selecione signalr.js e signalr.min.js.
  • Defina o Local de Destino como wwwroot/js/signalr/.
  • Selecione Instalar.

Caixa de diálogo Adicionar Biblioteca Client-Side - selecionar biblioteca

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

Criar um SignalR hub

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

Na pasta do projeto SignalRChat, crie uma Hubs pasta.

Hubs Na pasta, 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 Hub classe gerencia conexões, grupos e mensagens.

O SendMessage método pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código do cliente 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 arquivo Program.cs.

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddSignalR();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    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.MapRazorPages();
app.MapHub<ChatHub>("/chatHub");

app.Run();

O código destacado anteriormente adiciona SignalR aos sistemas de injeção de dependências e de roteamento do ASP.NET Core.

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 p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </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 de envio.
  • Cria uma lista com id="messagesList" para exibir mensagens recebidas do SignalR hub.
  • Inclui referências de script a SignalR e o código da aplicação chat.js é criado na próxima etapa.

wwwroot/js Na pasta, 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 ao botão de envio um manipulador que envia mensagens para o hub.
  • Adiciona ao objeto de conexão um manipulador que recebe mensagens do hub e as adiciona à lista.

Executar o aplicativo

Selecione Ctrl+F5 para executar o aplicativo sem depuração.

Copie o URL da barra de endereço, abra outra instância ou guia do navegador e cole o URL na barra de endereço.

Escolha um 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.

Aplicativo de exemplo concluído SignalR

Tip

Se o aplicativo não funcionar, abra as ferramentas de desenvolvedor do navegador (F12) e vá para o console. Procure possíveis erros relacionados ao código HTML e JavaScript. Por exemplo, se signalr.js foi colocado em uma pasta diferente da direcionada, a referência a esse arquivo não funcionará, resultando em um erro 404 no console. signalr.js erro não encontrado Se tiver ocorrido um ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY erro no Chrome, execute os seguintes comandos para atualizar o 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 Guia de início rápido: implantar um aplicativo Web ASP.NET. Para obter mais informações sobre o Serviço do Azure SignalR , consulte O que é o Serviço do Azure SignalR ?.

Próximos passos

Este tutorial ensina os conceitos básicos da criação de uma aplicação em tempo real usando SignalR. Você aprende a:

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

No final, você terá um aplicativo de bate-papo de trabalho:

SignalR aplicativo de exemplo

Prerequisites

Criar um projeto de aplicativo Web

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

Criar um novo projeto a partir da janela inicial

Na caixa de diálogo Criar um novo projeto , selecione ASP.NET Core Web Appe, em seguida, selecione Seguinte.

Criar uma ASP.NET Core Web App

Na caixa de diálogo Configurar o novo projeto, digite SignalRChat para nome do projeto. É importante nomear o projeto SignalRChat, incluindo a correta capitalização, para que os namespaces correspondam ao código no tutorial.

Selecione Avançar.

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

Informações adicionais

Adicionar a biblioteca de cliente SignalR

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

No Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar>Client-Side Biblioteca.

Na caixa de diálogo Adicionar Client-Side Biblioteca :

  • Selecione unpkg para Provedor
  • Insira @microsoft/signalr@latest para Biblioteca.
  • Selecione Escolher arquivos específicos, expanda a pasta dist/browser e selecione signalr.js e signalr.min.js.
  • Defina o Local de Destino como wwwroot/js/signalr/.
  • Selecione Instalar.

Caixa de diálogo Adicionar Biblioteca Client-Side - selecionar biblioteca

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

Criar um SignalR hub

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

Na pasta do projeto SignalRChat, crie uma Hubs pasta.

Hubs Na pasta, 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 Hub classe gerencia conexões, grupos e mensagens.

O SendMessage método pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código do cliente 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 arquivo Program.cs.

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 destacado anteriormente adiciona SignalR aos sistemas de injeção de dependências e de roteamento do ASP.NET Core.

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 p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </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 de envio.
  • Cria uma lista com id="messagesList" para exibir mensagens recebidas do SignalR hub.
  • Inclui referências de script a SignalR e o código da aplicação chat.js é criado na próxima etapa.

wwwroot/js Na pasta, 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 ao botão de envio um manipulador que envia mensagens para o hub.
  • Adiciona ao objeto de conexão um manipulador que recebe mensagens do hub e as adiciona à lista.

Executar o aplicativo

Pressione CTRL+F5 para executar a aplicação sem depuração.

Copie o URL da barra de endereço, abra outra instância ou guia do navegador e cole o URL na barra de endereço.

Escolha um 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

Tip

Se o aplicativo não funcionar, abra as ferramentas de desenvolvedor do navegador (F12) e vá para o console. Procure possíveis erros relacionados ao código HTML e JavaScript. Por exemplo, se signalr.js foi colocado em uma pasta diferente da direcionada, a referência a esse arquivo não funcionará, resultando em um erro 404 no console. signalr.js erro não encontrado Se tiver ocorrido um ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY erro no Chrome, execute os seguintes comandos para atualizar o 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 Guia de início rápido: implantar um aplicativo Web ASP.NET. Para obter mais informações sobre o Serviço do Azure SignalR , consulte O que é o Serviço do Azure SignalR ?.

Próximos passos

Este tutorial ensina os conceitos básicos da criação de uma aplicação em tempo real usando SignalR. Você aprende a:

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

No final, você terá um aplicativo de bate-papo de trabalho:

SignalR aplicativo de exemplo

Prerequisites

Criar um projeto de aplicativo Web

  • No menu, selecione Arquivo > Novo Projeto.
  • Na caixa de diálogo Criar um novo projeto, selecione Aplicação Web ASP.NET Coree, em seguida, selecione Avançar.
  • Na caixa de diálogo Configurar seu novo projeto , nomeie o projeto como SignalRChat e 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 Razor Páginas e, em seguida, selecione Criar.

Caixa de diálogo Novo projeto no Visual Studio

Adicionar a biblioteca de cliente SignalR

A SignalR biblioteca do servidor está incluída na estrutura compartilhada do ASP.NET Core 3.1. A biblioteca de cliente JavaScript não é incluída automaticamente no projeto. Para este tutorial, você usa o Gerenciador de bibliotecas (LibMan) para obter a biblioteca de cliente do unpkg. unpkg é uma rede de distribuição de conteúdo (CDN) que pode entregar 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>Client-Side Biblioteca.
  • Na caixa de diálogo Adicionar Biblioteca Client-Side , para Provedor , selecione unpkg.
  • Em Biblioteca, digite @microsoft/signalr@latest.
  • Selecione Escolher arquivos específicos, expanda a pasta dist/browser e selecione signalr.js e signalr.min.js.
  • Defina o local de destino como wwwroot/js/signalr/
  • Selecione Instalar

Caixa de diálogo Adicionar Biblioteca Client-Side - 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 serve como um pipeline de alto nível que lida com a comunicação cliente-servidor.

  • Na pasta do projeto 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 Hub classe gerencia conexões, grupos e mensagens.

O SendMessage método pode ser chamado por um cliente conectado para enviar uma mensagem a todos os clientes. O código do cliente 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 arquivo Startup.cs.

    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 adicionam SignalR aos sistemas de injeção de dependência e aos sistemas de roteamento do ASP.NET Core.

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 p-1">
            <div class="col-1">User</div>
            <div class="col-5"><input type="text" id="userInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-1">Message</div>
            <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
        </div>
        <div class="row p-1">
            <div class="col-6 text-end">
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <hr />
            </div>
        </div>
        <div class="row p-1">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

    O código anterior:

    • Cria caixas de texto para nome e texto da mensagem e um botão de envio.
    • Cria uma lista com id="messagesList" para exibir mensagens recebidas do SignalR hub.
    • Inclui referências de script para SignalR e para o código da chat.js aplicação que irás criar 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 ao botão de envio um manipulador que envia mensagens para o hub.
    • Adiciona ao 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 o URL da barra de endereço, abra outra instância ou guia do navegador e cole o URL na barra de endereço.
  • Escolha um 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

Tip

  • Se o aplicativo não funcionar, abra as ferramentas de desenvolvedor do navegador (F12) e vá para o console. Poderá ver erros relacionados com o seu 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 você verá um erro 404 no console. signalr.js erro não encontrado

  • Se receberes o erro ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY no Chrome, executa estes comandos para atualizar o teu 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 Guia de início rápido: implantar um aplicativo Web ASP.NET.

Próximos passos

  • Last updated on