Module 8 — Le temps réel avec WebSockets

Changelog

• Passage d'un mode requête/réponse à un mode événementiel.
• Création d'un repository temps réel.
• Introduction de Dispatcher.UIThread pour sécuriser le rendu.
• V0.0.12 : clarification de la bibliothèque WebSocket utilisée et de l'origine de _socketClient.

Objectif du module

• Recevoir les mises à jour poussées par le serveur.
• Diffuser les ajouts à tous les clients.
• Mettre à jour la liste sans polling.
• Comprendre le modèle Push vs Pull.

REST ne suffit plus

• REST synchronise sur demande.
• Le temps réel exige une connexion durable.
• Le serveur signale lui-même qu'une donnée change.
• L'expérience utilisateur devient collaborative.

Le concept clé: programmation événementielle

• Un message entrant déclenche une réaction.
• Le réseau travaille sur un thread différent.
• L'UI doit être mise à jour sur le thread graphique.
• Dispatcher.UIThread.Post(...) évite les erreurs d'accès concurrent.

Bibliothèque et contrat utilisés

On utilise ClientWebSocket natif .NET — aucun NuGet externe n'est requis.

// IRealtimeClient.cs — interface du service temps réel
public interface IRealtimeClient : IAsyncDisposable
{
    Task ConnectAsync(Uri serverUri, CancellationToken ct = default);
    IAsyncEnumerable<TodoItem> ListenAsync(CancellationToken ct = default);
}

// Implémenté par WebSocketRealtimeClient qui encapsule ClientWebSocket
public sealed class WebSocketRealtimeClient : IRealtimeClient { ... }

Le ViewModel reçoit IRealtimeClient par injection et l'appelle via _socketClient.

Vue métier du temps réel

Diffusion Mermaid multi-clients

Client A envoie une tache, le serveur diffuse l'evenement, puis Client B rafraichit son interface.

Squelette côté client

_socketClient est l'IRealtimeClient injecté dans le ViewModel :

public partial class TodoListViewModel : ObservableObject
{
    private readonly IRealtimeClient _socketClient;

    public TodoListViewModel(IRealtimeClient socketClient) =>
        _socketClient = socketClient;

    public async Task EcouterAsync(CancellationToken ct)
    {
        await _socketClient.ConnectAsync(new Uri("ws://localhost:5000/hub"), ct);
        await foreach (var message in _socketClient.ListenAsync(ct))
        {
            Dispatcher.UIThread.Post(() => Taches.Add(message));
        }
    }
}

Problèmes réels à discuter

• Reconnexion automatique.
• Gestion des doublons de messages.
• Ordonnancement des événements.
• Conflits si plusieurs utilisateurs modifient la même tâche.

Livrable du module

• Deux clients affichent la même liste.
• Un ajout sur A apparaît sur B.
• L'équipe comprend la différence entre HTTP et WebSocket.

Repo de référence

https://gitlab.bzctoons.net/ynov/b3-dev-tasklis

• Branche module-08-websockets → état du projet à la fin de cette séance.
• En cas de blocage: git checkout module-08-websockets pour repartir d'une base saine.
• Le repo est votre filet de sécurité pendant l'atelier.