SignalR pour C# (.NET) : guide complet avec exemples

Qu'est-ce que SignalR et pourquoi l'utiliser ?

SignalR est une bibliothèque pour ASP.NET Core qui simplifie l'ajout de fonctionnalités temps réel (real-time) dans vos applications web. Elle permet au serveur d'envoyer instantanément des données aux clients connectés (navigateurs, applications mobiles, applications de bureau) sans nécessiter de requêtes constantes de la part du client.

Pourquoi en avez-vous besoin ? Le protocole HTTP traditionnel fonctionne sur le principe « requête-réponse » : le client envoie une requête, le serveur répond. Pour obtenir des mises à jour, le client doit interroger le serveur en permanence (polling). C'est inefficace et cela crée des latences. SignalR résout ce problème en établissant une connexion bidirectionnelle persistante.

Cas d'utilisation principaux :

• Chats et messageries instantanées (livraison instantanée des messages)
• Tableaux de bord et dashboards (mise à jour des taux de change, cours boursiers)
• Édition collaborative de documents (type Google Docs)
• Notifications en temps réel (nouvelles commandes, alertes)
• Jeux multijoueurs
• Suivi de progression des opérations longues (téléchargement de fichiers, traitement de données)

SignalR choisit automatiquement le meilleur protocole de transport pour la connexion :

• WebSocket — le plus efficace, connexion bidirectionnelle persistante
• Server-Sent Events (SSE) — transmission unidirectionnelle du serveur vers le client
• Long Polling — mécanisme de repli si WebSocket et SSE ne sont pas disponibles

Installation de SignalR

Installation côté serveur (ASP.NET Core)

Pour la partie serveur, utilisez le package NuGet. Exécutez dans le terminal :

dotnet add package Microsoft.AspNetCore.SignalR

Ou via la console du gestionnaire de packages dans Visual Studio :

Install-Package Microsoft.AspNetCore.SignalR

Installation du client JavaScript (navigateur)

Pour la partie cliente (navigateur), utilisez npm :

npm install @microsoft/signalr

Ou incluez-le via CDN :

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>

Installation du client .NET (C#)

Pour un client en C# (par exemple, application console ou WPF) :

dotnet add package Microsoft.AspNetCore.SignalR.Client

Démarrage rapide : exemple "Hello, World!"

Créons un chat simple : le serveur reçoit un message et le diffuse à tous les clients connectés.

Étape 1 : Créer un Hub (côté serveur)

Créez un fichier ChatHub.cs :

using Microsoft.AspNetCore.SignalR;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            // Envoie le message à tous les clients connectés
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Étape 2 : Enregistrer SignalR dans Program.cs

using SignalRChat.Hubs;

var builder = WebApplication.CreateBuilder(args);

// Ajouter SignalR
builder.Services.AddSignalR();

var app = builder.Build();

app.MapGet("/", () => "Hello World!");

// Mapper le hub sur le chemin /chatHub
app.MapHub<ChatHub>("/chatHub");

app.Run();

Étape 3 : Créer le client (HTML + JavaScript)

<!DOCTYPE html>
<html>
<head>
    <title>Chat SignalR</title>
</head>
<body>
    <h2>Chat SignalR</h2>
    <div>
        <input type="text" id="userInput" placeholder="Votre nom" />
        <input type="text" id="messageInput" placeholder="Message" />
        <button onclick="sendMessage()">Envoyer</button>
    </div>
    <ul id="messagesList"></ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/8.0.0/signalr.min.js"></script>
    <script>
        const connection = new signalR.HubConnectionBuilder()
            .withUrl("/chatHub")
            .build();

        connection.on("ReceiveMessage", function (user, message) {
            const li = document.createElement("li");
            li.textContent = `${user} : ${message}`;
            document.getElementById("messagesList").appendChild(li);
        });

        connection.start().catch(function (err) {
            return console.error(err.toString());
        });

        function sendMessage() {
            const user = document.getElementById("userInput").value;
            const message = document.getElementById("messageInput").value;
            connection.invoke("SendMessage", user, message).catch(function (err) {
                return console.error(err.toString());
            });
        }
    </script>
</body>
</html>