Comenzando con ASP.NET Core SignalR

¿Cuáles son los requisitos previos?

Entorno: Visual Studio 2022 con ASP.NET y cargas de trabajo de desarrollo web

Crear un proyecto de aplicación web

En el cuadro de diálogo Configurar nuevo proyecto, realice una entrada para el Nombre del proyecto SignalRChat.

Seleccione " Página siguiente ".

En el cuadro de diálogo Información adicional, seleccione .NET 7.0 (soporte técnico estándar) y luego seleccione Crear.

Agregar biblioteca cliente SignalR

La biblioteca del servidor SignalR está incluida en el marco compartido ASP.NET Core. La biblioteca cliente de JavaScript no se incluye automáticamente en el proyecto; para este tutorial, utilice el administrador de biblioteca (LibMan) para obtener la biblioteca cliente de unpkg. unpkg es una red de entrega de contenido global rápida para todo el contenido de npm .

En Explorador de soluciones > Haga clic con el botón derecho en el proyecto y seleccione Agregar biblioteca cliente.

En el cuadro de diálogo Agregar biblioteca de cliente:

Seleccione "unpkg" para "Proveedor"
Para Biblioteca, ingrese @microsoft/signalr@latest.
Seleccione Seleccionar archivos específicos, expanda la carpeta dist/browser y seleccione signalr.js y signalr.min.js.
Establezca "Ubicación de destino" en wwwroot/js/signalr/.
Seleccione Instalar.

LibMan crea wwwroot/js/signalr una carpeta y copia los archivos seleccionados en la carpeta.

Crear centro SignaIR

Hub es una clase que sirve como conducto de alto nivel para manejar la comunicación cliente-servidor.

En la carpeta del proyecto SignalRChat, cree Hubs la carpeta.

En Hubs la carpeta, crea ChatHub la clase con el siguiente 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);
        }
    }
}

ChatHub Clase heredada de SignalR Hub . Hub Las clases gestionan conexiones, grupos y mensajes.

Se puede llamar desde clientes conectados SendMessagepara enviar mensajes a todos los clientes. El código del cliente JavaScript que llama a este método se muestra más adelante en este tutorial. El código de SignalR es asíncrono, lo que proporciona la máxima escalabilidad.

Configurar SignalR

El servidor SignalR debe configurarse para pasar solicitudes de SignalR a SignalR. Agregue el siguiente código resaltado al Program.cs archivo.

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

El código resaltado anteriormente agrega SignalR al sistema de enrutamiento e inyección de dependencias de ASP.NET Core.

Agregar código de cliente SignalR

Reemplace Pages/Index.cshtml el contenido con el siguiente 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>

Etiquetas anteriores:

Cree un cuadro de texto y un botón de enviar.
Úselo para id="messagesList" crear una lista que muestre los mensajes recibidos desde el concentrador SignalR.
Incluya una referencia de script a SignalR y cree el código de la aplicación en el siguiente paso chat.js .

En wwwroot/js la carpeta, cree chat.js el archivo usando el siguiente 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();
});

JavaScript anterior:

Crea e inicia la conexión.
Agregue un controlador al botón Enviar que envía un mensaje al centro.
Agrega un controlador al objeto de conexión que recibe mensajes del concentrador y los agrega a la lista.

lograr efecto

pista:

Si la aplicación no funciona, abra las herramientas de desarrollo de su navegador (F12) y vaya a la consola. Encuentra posibles errores relacionados con el código HTML y JavaScript. Por ejemplo, si signalr.js se coloca en una carpeta diferente a la indicada, una referencia al archivo no funcionará, lo que generará un error 404 en la consola.

Si ocurre un error en Chrome ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY , ejecute el siguiente comando para actualizar el certificado de desarrollo:

CLI de .NET

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