Entroducción a SignalR

SignalR es una biblioteca de comunicación en tiempo real para aplicaciones web que permite interacción bidireccional entre servidor y cliente. Facilita la transmisión instantánea de datos mediante notificaciones push, siendo útil para aplicaciones como chats, monitoreo y juegos en línea. Ofrece integración multiplataforma y escalabilidad.

Tecnologías de comunicación compatibles

• WebSocket: Protocolo preferido para conexiones persistentes de baja latencia
• Server-Sent Events (SSE): Alternativa HTTP para flujo unidireccional cuando WebSocket no está disponible
• Long Polling: Técnica de emulación para entornos con soporte limitado
• Otras opciones: Incluye Forever Frame y AJAX Polling para compatibilidad extendida

Funcionamiento de los Hubs

Los hubs son componentes centrales que gestionan la lógica de comunicación:

• Invocación bidireccional de métodos entre cliente-servidor
• Administración de grupos para difusión selectiva
• Control de ciclo de vida de conexiones
• Gestión de estado entre sesiones

Se implementan heredando de la clase base Hub:

public class ComunicacionHub : Hub
{
    public async Task TransmitirMensaje(string usuario, string contenido)
    {
        await Clients.All.Enviar("MensajeRecibido", usuario, contenido);
    }
}

Implementación práctica

Configuración en Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddSignalR();

var app = builder.Build();
app.MapHub<ComunicacionHub>("/hubComunicacion");

Cliente JavaScript

<div>
  <input id="entradaUsuario" placeholder="Usuario"/>
  <input id="entradaContenido" placeholder="Mensaje"/>
  <button id="botonEnviar">Enviar</button>
  <ul id="listaMensajes"></ul>
</div>

<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script>
  const conexion = new signalR.HubConnectionBuilder()
    .withUrl("/hubComunicacion")
    .build();

  conexion.on("MensajeRecibido", (usuario, contenido) => {
    const elemento = document.createElement("li");
    elemento.textContent = `${usuario}: ${contenido}`;
    document.getElementById("listaMensajes").appendChild(elemento);
  });

  document.getElementById("botonEnviar").addEventListener("click", () => {
    conexion.invoke("TransmitirMensaje", 
      document.getElementById("entradaUsuario").value,
      document.getElementById("entradaContenido").value
    );
  });

  conexion.start();
</script>

Explicación de métodos

conexion.on: Escucha eventos desde el servidor usando el nombre especificado ("MensajeRecibido")

conexion.invoke: Ejecuta métodos en el servidor ("TransmitirMensaje") con parámetros

Recursos adicionales

Documentación oficial: ASP.NET SignalR
SignalR en ASP.NET Core