Fermer

juillet 24, 2025

Tirant l’extraction de CircUithandler dans Blazor Server

Tirant l’extraction de CircUithandler dans Blazor Server


Nous apprenons à utiliser le circuithandler pour gérer les connexions client / serveur dans Blazor Server.

Les applications de serveur Blazor tirent parti d’une connexion WebSocket persistante entre les clients et les serveurs.

Chaque fois que l’utilisateur interagit avec l’application, le serveur met à jour en interne le modèle d’objet de document (DOM) et renvoie les modifications requises à l’interface utilisateur du client.

Cette architecture nécessite une connexion Internet stable. Si la connexion est instable, les applications du serveur Blazor deviennent lentes et cessent parfois de répondre.

Dans cet article, nous apprendrons le Circuit Handlers. UN CircuitHandler nous permet d’écrire du code personnalisé pour les événements déclenchés lorsqu’un utilisateur établit ou perd sa connexion avec une application Web Blazor Server.

Vous découvrirez quels scénarios bénéficient d’une coutume CircuitHandler mise en œuvre.

Tu peux accéder au code utilisé dans cet exemple sur github.

Qu’est-ce qu’un circuit en blazor?

Dans Blazor Server, un circuit fait référence à la durée de vie de la session d’un utilisateur. La session démarre lorsque l’utilisateur se connecte d’abord au serveur et se termine lorsque le client ferme le navigateur Web ou quitte le site Web.

Indice: Il est essentiel de comprendre que les circuits ne comptent que dans Blazor Server, car nous avons une connexion WebSocket persistante entre un client et le serveur.

Qu’est-ce qu’un circuithandler?

UN CircuitHandler est la mise en œuvre d’une classe héritée du Microsoft.AspNetCore.Components.Server.Circuits.CircuitHandler taper. La classe de base nous permet de remplacer quatre méthodes:

  • OnCircuitOpenedAsync est appelé lorsqu’un nouveau circuit est établi, ce qui est généralement lorsqu’un nouvel utilisateur se connecte au serveur et démarre une session.
  • OnCircuitClosedAsync est appelé lorsqu’un circuit se termine, ce qui est généralement lorsqu’un utilisateur met fin à la session en quittant le site Web.
  • OnConnectionUpAsync est appelé lorsqu’une connexion devient disponible, généralement dans un scénario de reconnexion.
  • OnConnectionDownAsync est appelé lorsqu’une connexion est perdue.

Affichage du nombre d’utilisateurs connectés à l’aide d’un circuithandler

Implémentons un circuithandler personnalisé qui compte le nombre d’utilisateurs simultanés. Nous rendrons également les informations sur le site Web.

Tout d’abord, dans un nouveau Application Web Blazor avec Serveur de blazor En tant que mode d’interactivité, nous créons une nouvelle classe nommée DemoCircuitHandlerhériter du CircuitHandler type de base et remplacer le OnCircuitOpenedAsync et le OnCircuitClosedAsync Méthodes.

using Microsoft.AspNetCore.Components.Server.Circuits;

namespace CircuitHandlerDemo;

public class DemoCircuitHandler : CircuitHandler
{
    public override Task OnCircuitOpenedAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        
        return base.OnCircuitOpenedAsync(circuit, cancellationToken);
    }

    public override Task OnCircuitClosedAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        
        return base.OnCircuitClosedAsync(circuit, cancellationToken);
    }
}

Avant d’implémenter les deux méthodes remplacées, nous enregistrons le DemoCircuitHandler classe avec le système d’injection de dépendance dans le Program.cs déposer.

using Microsoft.AspNetCore.Components.Server.Circuits;
builder.Services.AddSingleton<CircuitHandler, DemoCircuitHandler>();

Ensuite, nous mettons en œuvre un service simpliste pour stocker la valeur du nombre d’utilisateurs simultanés visitez le site Web.

namespace CircuitHandlerDemo;

public class ConcurrentUsersService
{
    public int Users { get; set; }
}

Pour rester simple, nous n’utilisons pas d’interface et nous n’implémensons pas la gestion des événements. Cependant, nous devons également enregistrer cette classe comme une instance singleton dans le Program.cs déposer:

builder.Services.AddSingleton<ConcurrentUsersService>();

Maintenant, nous sommes prêts à implémenter le code dans le DemoCircuitHandler classe.

using Microsoft.AspNetCore.Components.Server.Circuits;

namespace CircuitHandlerDemo;

public class DemoCircuitHandler(ConcurrentUsersService _concurrentUsersService) : CircuitHandler
{
    public override Task OnCircuitOpenedAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        
        _concurrentUsersService.Users += 1;
        return base.OnCircuitOpenedAsync(circuit, cancellationToken);
    }

    public override Task OnCircuitClosedAsync(Circuit circuit, CancellationToken cancellationToken)
    {
        
        _concurrentUsersService.Users -= 1;
        return base.OnCircuitClosedAsync(circuit, cancellationToken);
    }
}

Nous utilisons Constructeurs primaires (C # 12) pour recevoir une référence au ConcurrentUsersService exemple.

Ensuite, nous accédons au ConcurrentUsersService instance et augmenter le nombre d’utilisateurs simultanés lorsque OnCircuitOpenedAsync la méthode est appelée.

Nous implémentons le même code mais diminuer le nombre par 1 dans le OnCircuitClosedAsync méthode.

Maintenant, nous voulons afficher le nombre d’utilisateurs simultanés sur l’interface utilisateur. Nous ouvrons le NavMenu Composant car il est rendu sur toutes les pages.

Nous injectons une référence au ConcurrentUsersService en utilisant le @inject directif:

@inject ConcurrentUsersService ConcurrentUsersService

Ensuite, nous ajoutons un autre élément sous le troisième NavLink composant:

<div class="nav-item px-3">
    <div style="color: white;">Active Users: @ConcurrentUsersService.Users</div>
</div>

Ce code accède au Users propriété sur l’injection ConcurrentUsersService instance et rend la valeur à l’écran.

Maintenant, testons l’application. Lorsque vous démarrez l’application, vous devriez voir le texte Utilisateurs actifs: 1 au bas du menu de navigation à gauche.

Un navigateur affichant l'application avec le texte «Utilisateurs actifs: 1»

Ouvrez un autre navigateur et accédez à la même URL où l’exécution de votre application Blazor Server. Le texte devrait désormais indiquer qu’il y a deux utilisateurs actifs.

Deux fenêtres du navigateur affichant l'application avec le texte «Utilisateurs actifs: 1» et «Utilisateurs actifs: 2»

Avis: Avec la simple implémentation du ConcurrentUsersServicenous n’obtenons pas les mises à jour automatiques de l’interface utilisateur lorsqu’un utilisateur se connecte ou déconnecte.

Fixons cela.

Nous remplacons l’implémentation simpliste de la ConcurrentUsersService classe avec une implémentation plus sophistiquée qui définit et licencie un événement.

namespace CircuitHandlerDemo;

public class ConcurrentUsersService
{
    private int users;

    public event Action<int>? OnUsersChanged;

    public int Users
    {
        get => users;
        set
        {
            users = value;
            OnUsersChanged?.Invoke(value);
        }
    }
}

Remarquez le OnUsersChanged Événement défini sous le domaine privé qui contient le nombre d’utilisateurs.

Nous invoquons / licencions l’événement chaque fois que le passeur du Users La propriété est exécutée et fournit la valeur actuelle au gestionnaire d’événements.

Ce changement nous oblige à modifier le code dans le NavMenu composant qui consomme ce service.

Dans le NavMenu.razor Fichier, nous ajoutons une section de code avec l’implémentation suivante:

@code {
    public int Users { get; set; }

    protected override void OnInitialized()
    {
        ConcurrentUsersService.OnUsersChanged += UpdateState;
        UpdateState(ConcurrentUsersService.Users);
    }

    public void UpdateState(int users)
    {
        InvokeAsync(() =>
        {
            Users = users;
            StateHasChanged();
        });
    }

    public void Dispose()
    {
        ConcurrentUsersService.OnUsersChanged -= UpdateState;
    }
}

Tout d’abord, nous introduisons un Users propriété qui contient l’état du composant. Nous modifions également le code qui rend l’interface utilisateur pour utiliser le Users propriété.

<div class="nav-item px-3">
    <div style="color: white;">Active Users: @Users</div>
</div>

À l’intérieur OnInitialized Méthode du cycle de vie, nous enregistrons le UpdateState Méthode avec le OnUsersChanged événement sur le ConcurrentUsersService. Nous exécutons également le UpdateState Méthode avec la valeur actuelle.

N’oubliez pas de mettre en œuvre le Dispose Méthode pour désinscrire le UpdateState Méthode du OnUsersChanged événement pour éviter les fuites de mémoire.

Maintenant, testons à nouveau l’application.

Avec un seul navigateur, l’application se ressemble toujours. Cependant, lors de l’ouverture d’un autre navigateur et de l’accès au site Web, les deux Windows du navigateur affichent la valeur à jour du nombre d’utilisateurs connectés à l’application.

Trois fenêtres du navigateur affichant l'application avec le texte à jour «Utilisateurs actifs: 3».

Lorsque vous fermez l’un des navigateurs, la valeur doit être mise à jour (diminuée de 1) dans les fenêtres du navigateur restantes.

Cas d’utilisation pour les gestionnaires de circuits

En plus de suivre le nombre d’utilisateurs actifs, il existe de nombreux autres scénarios où l’implémentation de code personnalisé dans un gestionnaire de circuits est logique.

Les scénarios typiques impliquent enregistrement Lorsqu’un utilisateur se connecte ou déconnecte, Gestion des ressources lié à la session d’un utilisateur (par exemple, nettoyer les objets en mémoire coûteux) ou économiser le état de demande Lorsqu’un utilisateur se déconnecte.

Supposons que vous ayez un processus de longue durée où l’utilisateur est tenu de saisir des informations. Si l’utilisateur se déconnecte soudainement, les données sont perdues.

Cependant, à l’intérieur du OnConnectionDownAsync Méthode, vous avez la possibilité de persister cet état et de le restaurer dans le OnConnectionUpAsync méthode. Ou vous pouvez même aller plus loin et persister l’état et demander à l’utilisateur s’il veut continuer à travailler là où il est à gauche pour la dernière fois.

Scénario avancé: en utilisant le circuithandler pour évoluer

Il est intéressant que vous puissiez tirer parti du CircuitHandler Classe pour obtenir des informations sur le nombre d’utilisateurs connectés à un serveur et émettez ces informations aux informations d’application ou à d’autres outils de métriques.

Lorsque vous exécutez dans le cloud, vous pouvez utiliser ces informations pour évoluer / sortir (ou vers le bas) en fonction du nombre d’utilisateurs connectés à votre application.

Cependant, la mise en œuvre d’un tel cas d’utilisation spécialisé dépasse cet article. Pourtant, il montre à quel point les différents cas d’utilisation peuvent être polyvalents pour implémenter un CircuitHandler dans Blazor Server peut l’être.

Conclusion

Avec une coutume CircuitHandlervous pouvez ajouter des fonctionnalités supplémentaires pour persister l’état d’intermédiaire de l’application lorsqu’un utilisateur perd la connexion à une application de serveur Blazor.

Il existe différents scénarios, tels que la journalisation, l’enregistrement / restauration de l’état d’application ou la gestion des ressources coûteuses.

Si vous voulez en savoir plus sur le développement du blazor, vous pouvez regarder mon Cours crash gratuit du blazor sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Bases du blazor.




Source link