ASP.NET Core Blazor SignalRdoprovodné materiály

  • Článek
  • 11 min ke čtení

Tento článek vysvětluje, jak nakonfigurovat a spravovat SignalR připojení v Blazor aplikacích.

obecné pokyny týkající SignalR se konfigurace ASP.NET Core najdete v tématech v Úvod do ASP.NET Core SignalR oblasti dokumentace. Chcete-li nakonfigurovat SignalR přidání do hostovaného Blazor WebAssembly řešení, přečtěte si téma ASP.NET Core SignalR rozšířeného .

SignalR vyjednávání mezi zdroji pro ověřování ( Blazor WebAssembly )

Pro konfiguraci SignalR základního klienta pro odesílání přihlašovacích údajů, jako jsou například cookie s nebo HLAVIČKY ověřování http:

  • Použijte SetBrowserRequestCredentials k nastavení Include u požadavků mezi zdroji fetch .

    IncludeRequestCredentialsMessageHandler.cs:

    using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Http;

public class IncludeRequestCredentialsMessageHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

  • V případě, že je vytvořeno připojení k rozbočovači, přiřaďte HttpMessageHandler k HttpMessageHandlerFactory Možnosti:

    HubConnectionBuilder hubConnecton;

...

hubConnecton = new HubConnectionBuilder()
    .WithUrl(new Uri(NavigationManager.ToAbsoluteUri("/chathub")), options =>
    {
        options.HttpMessageHandlerFactory = innerHandler => 
            new IncludeRequestCredentialsMessageHandler { InnerHandler = innerHandler };
    }).Build();

    Předchozí příklad nakonfiguruje adresu URL připojení centra na absolutní adresu URI na adrese /chathub , což je adresa URL, která se používá v SignalR Blazor kurzu with v Index komponentě ( Pages/Index.razor ). Identifikátor URI lze také nastavit pomocí řetězce, například https://signalr.example.com nebo prostřednictvím Konfigurace.

Další informace naleznete v tématu ASP.NET Core SignalR rozšířeného.

Režim vykreslování ( Blazor WebAssembly )

Pokud je Blazor WebAssembly aplikace, která používá SignalR nástroj, nakonfigurovaná na provedení operace PreRender na serveru, před navázáním připojení klienta k serveru dojde k předběžnému vygenerování. Další informace najdete v následujících článcích:

Další zdroje informací pro Blazor WebAssembly aplikace

Možnosti obslužné rutiny okruhu pro Blazor Server aplikace

Nakonfigurujte Blazor Server okruh pomocí CircuitOptions uvedeného v následující tabulce.

Možnost Výchozí Description
DetailedErrors false Pokud dojde k neošetřené výjimce na okruhu nebo pokud volání metody .NET prostřednictvím interoperability JS vede k výjimce, odešlete do JavaScriptu podrobné zprávy o výjimce.
DisconnectedCircuitMaxRetained 100 Maximální počet odpojených okruhů, které server udržuje v paměti.
DisconnectedCircuitRetentionPeriod 3 minuty Maximální doba, po kterou je odpojený okruh uložený v paměti předtím, než se rozpustí.
JSInteropDefaultCallTimeout 1 min. Maximální doba, po kterou Server počká, než vyprší časový limit asynchronního vyvolání funkce JavaScriptu.
MaxBufferedUnacknowledgedRenderBatches 10 Maximální počet nepotvrzených vykreslících vykreslování: Server udržuje paměť na okruh v daném čase pro zajištění podpory robustního opětovného připojení. Po dosažení limitu Server přestane vytvářet nové dávky vykreslování, dokud klient nepotvrdí jednu nebo více dávek.

Nakonfigurujte možnosti v Program.cs nástroji pomocí možností delegáta AddServerSideBlazor . Následující příklad přiřadí výchozí hodnoty možností uvedené v předchozí tabulce. Potvrďte, že Program.cs používá System obor názvů ( using System; ).

V Program.cs:

builder.Services.AddServerSideBlazor(options =>
{
    options.DetailedErrors = false;
    options.DisconnectedCircuitMaxRetained = 100;
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(3);
    options.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(1);
    options.MaxBufferedUnacknowledgedRenderBatches = 10;
});

Pro konfiguraci HubConnectionContext použijte HubConnectionContextOptions s AddHubOptions . Popisy možností najdete v tématu ASP.NET Core SignalR rozšířeného . Následující příklad přiřadí výchozí hodnoty možností. Potvrďte, že Program.cs používá System obor názvů ( using System; ).

V Program.cs:

builder.Services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
        options.EnableDetailedErrors = false;
        options.HandshakeTimeout = TimeSpan.FromSeconds(15);
        options.KeepAliveInterval = TimeSpan.FromSeconds(15);
        options.MaximumParallelInvocationsPerClient = 1;
        options.MaximumReceiveMessageSize = 32 * 1024;
        options.StreamBufferCapacity = 10;
    });

Blazor Konfigurace směrování koncových bodů centra ( Blazor Server )

V Program.cs aplikaci Blazor Server volají aplikace, MapBlazorHub aby namapovaly na Blazor Hub výchozí cestu aplikace. Blazor ServerSkript ( blazor.server.js ) automaticky odkazuje na koncový bod vytvořený pomocí MapBlazorHub .

Reflexe stav připojení v uživatelském rozhraní ( Blazor Server )

Když klient zjistí, že došlo ke ztrátě připojení, zobrazí se uživateli výchozí uživatelské rozhraní, zatímco se klient pokusí znovu připojit. Pokud se opětovné připojení nepovede, uživateli se zobrazí možnost opakovat akci.

Chcete-li přizpůsobit uživatelské rozhraní, definujte element s prvkem id z components-reconnect-modal na <body> _Layout.cshtml Razor stránce.

Pages/_Layout.cshtml:

<div id="components-reconnect-modal">
    ...
</div>

Přidejte následující styly CSS do šablony stylů webu.

wwwroot/css/site.css:

#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    display: block;
}

Následující tabulka popisuje třídy CSS použité pro components-reconnect-modal element Blazor rozhraním Framework.

CSS – třída Označující…
components-reconnect-show Ztracené připojení. Klient se pokouší znovu připojit. Zobrazit modální okno.
components-reconnect-hide K serveru se znovu naváže aktivní připojení. Skryje modální okno.
components-reconnect-failed Opětovné připojení se nezdařilo, pravděpodobně kvůli selhání sítě. Chcete-li se pokusit o opětovné připojení, zavolejte window.Blazor.reconnect() v JavaScriptu.
components-reconnect-rejected Opětovné připojení bylo zamítnuto. Server byl dosažen, ale odmítl připojení a stav uživatele na serveru je ztracen. Chcete-li znovu načíst aplikaci, zavolejte location.reload() v JavaScriptu. Tento stav připojení může mít za následek:
  • Dojde k chybě okruhu na straně serveru.
  • Klient je dostatečně odpojený, aby server vynechal stav uživatele. Instance součástí uživatele jsou vyřazeny.
  • Server se restartuje nebo se pracovní proces aplikace recykluje.

Režim vykreslování ( Blazor Server )

Ve výchozím nastavení Blazor Server aplikace prochází uživatelské rozhraní na serveru před tím, než se naváže připojení klienta k serveru. Další informace naleznete v tématu Pomocná značka komponenty v ASP.NET Core.

Blazor Startup ( Blazor Server )

Konfigurace ručního spuštění Blazor Server SignalR okruhu aplikace v Pages/_Layout.cshtml souboru:

  • Přidejte autostart="false" atribut ke <script> značce pro blazor.server.js skript.
  • Umístěte skript, který volá Blazor.start za blazor.server.js <script> značku skriptu a uvnitř uzavírací </body> značky.

Pokud autostart je zakázaný, všechny aspekty aplikace, které nezávisí na okruhu, fungují normálně. Například směrování na straně klienta je funkční. Nicméně jakýkoliv aspekt, který závisí na okruhu, není funkční, dokud Blazor.start se nevolá. Chování aplikace je nepředvídatelné bez vytvořeného okruhu. Například metody komponenty se nedaří spustit, pokud je okruh odpojen.

Další informace, včetně postupu Blazor při inicializaci po přípravě dokumentu a o tom, jak zřetězit na příslib js, najdete v tématu ASP.NET Core Blazor Úvod .

Konfigurovat SignalR protokolování klienta ( Blazor Server )

V nástroji pro sestavovatele klienta předejte configureSignalR objekt konfigurace, který volá configureLogging úroveň protokolu.

Pages/_Layout.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        configureSignalR: function (builder) {
          builder.configureLogging("information");
        }
      });
    </script>
</body>

V předchozím příkladu information je ekvivalentem úrovně protokolu LogLevel.Information .

Další informace o Blazor spuštění najdete v tématu ASP.NET Core Blazor Úvod .

Úprava obslužné rutiny opětovného připojení ( Blazor Server )

Události připojení okruhu obslužné rutiny opětovného připojení lze upravit pro vlastní chování, například:

  • Upozorní uživatele, pokud bylo připojení vyřazeno.
  • K provedení protokolování (z klienta) při připojení okruhu.

Chcete-li upravit události připojení, zaregistrujte zpětná volání pro následující změny připojení:

  • Byla přerušena použití připojení onConnectionDown .
  • Navázalo se opakované použití připojení onConnectionUp .

onConnectionDown onConnectionUp Musí být zadány oba a.

Pages/_Layout.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionHandler: {
          onConnectionDown: (options, error) => console.error(error),
          onConnectionUp: () => console.log("Up, up, and away!")
        }
      });
    </script>
</body>

Další informace o Blazor spuštění najdete v tématu ASP.NET Core Blazor Úvod .

Úprava počtu opakování připojení a intervalu ( Blazor Server )

Pokud chcete upravit počet a interval opakování připojení, nastavte počet opakování ( maxRetries ) a dobu v milisekundách povolenou pro každý pokus o opakování ( retryIntervalMilliseconds ).

Pages/_Layout.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionOptions: {
          maxRetries: 3,
          retryIntervalMilliseconds: 2000
        }
      });
    </script>
</body>

Další informace o Blazor spuštění najdete v tématu ASP.NET Core Blazor Úvod .

Skrýt nebo nahradit zobrazení opětovného připojení ( Blazor Server )

Chcete-li skrýt zobrazení opětovného připojení, nastavte popisovač opětovného připojení _reconnectionDisplay na prázdný objekt ( {} nebo new Object() ).

Pages/_Layout.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      window.addEventListener('beforeunload', function () {
        Blazor.defaultReconnectionHandler._reconnectionDisplay = {};
      });

      Blazor.start();
    </script>
</body>

Chcete-li nahradit zobrazení opětovného připojení, nastavte _reconnectionDisplay v předchozím příkladu na prvek pro zobrazení:

Blazor.defaultReconnectionHandler._reconnectionDisplay = 
  document.getElementById("{ELEMENT ID}");

Zástupný symbol {ELEMENT ID} je ID prvku HTML, který se má zobrazit.

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Upravte zpoždění před zobrazením opětovného připojení nastavením vlastnosti v šabloně stylů CSS webu transition-delay pro modální prvek. Následující příklad nastaví zpoždění přechodu z 500 ms (výchozí) na 1 000 ms (1 sekunda).

wwwroot/css/site.css:

#components-reconnect-modal {
    transition: visibility 0s linear 1000ms;
}

Odpojení Blazor okruhu od klienta ( Blazor Server )

Ve výchozím nastavení se okruh při aktivaci události Blazor unload stránky odpojí. Pokud chcete odpojit okruh pro jiné scénáře na klientovi, táhněte ho Blazor.disconnect v příslušné obslužné rutině události. V následujícím příkladu se okruh odpojí, když je stránka skrytá ( pagehide událost):

window.addEventListener('pagehide', () => {
  Blazor.disconnect();
});

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Blazor Server obslužná rutina okruhu

Blazor Server umožňuje kódu definovat obslužnou rutinu okruhu, která umožňuje spuštění kódu při změnách stavu okruhu uživatele. Obslužná rutina okruhu je implementována odvozením z třídy a registrací třídy CircuitHandler v kontejneru služby aplikace. Následující příklad obslužné rutiny okruhu sleduje otevřená SignalR připojení.

TrackingCircuitHandler.cs:

using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Server.Circuits;

public class TrackingCircuitHandler : CircuitHandler
{
    private HashSet<Circuit> circuits = new();

    public override Task OnConnectionUpAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Add(circuit);

        return Task.CompletedTask;
    }

    public override Task OnConnectionDownAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Remove(circuit);

        return Task.CompletedTask;
    }

    public int ConnectedCircuits => circuits.Count;
}

Obslužné rutiny okruhu se zaregistrovaly pomocí diody. Vymezené instance se vytvářejí pro každou instanci okruhu. Pomocí v předchozím příkladu je vytvořena jednosedměnná služba, protože stav všech okruhů TrackingCircuitHandler musí být sledován.

Program.cs:

builder.Services.AddSingleton<CircuitHandler, TrackingCircuitHandler>();

Pokud metody vlastní obslužné rutiny okruhu vyvolá neošetřenou výjimku, výjimka je pro okruh Blazor Server závažná. Pokud chcete tolerovat výjimky v kódu obslužné rutiny nebo volání metod, zabalte kód do jednoho nebo více příkazů se zpracováním chyb a try-catch protokolováním.

Když okruh skončí, protože se uživatel odpojil a rozhraní čistí stav okruhu, rozhraní vyhodí rozsah DI okruhu. Disposing the scope disposes any circuit-scoped DI services that System.IDisposable implement . Pokud kterákoli služba dilací vyvolá neošetřenou výjimku během vyřazení, rozhraní výjimku zahlásí.

Služba SignalR Azure ( Blazor Server )

Službu Azure doporučujeme používat SignalR pro aplikace hostované v Blazor Server Microsoft Azure. Služba funguje ve spojení s centrem aplikace pro škálování aplikace na velký počet Blazor Blazor Server souběžných SignalR připojení. Kromě toho globální dosah služby a vysoce výkonná datová centra výrazně pomáhá snížení SignalR latence kvůli zeměpisné oblasti. Pokud chcete předem vykreslovat podporu služby Azure, nakonfigurujte aplikaci tak, aby SignalR přichycené relace . Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor Server.

Další zdroje informací pro Blazor Server aplikace

Tento článek vysvětluje, jak nakonfigurovat a spravovat SignalR připojení v Blazor aplikacích.

Obecné pokyny ke ASP.NET Core najdete v tématech SignalR Úvod do ASP.NET Core SignalR v oblasti dokumentace. Informace o SignalR konfiguraci přidané do hostovaného Blazor WebAssembly řešení najdetev tématu ASP.NET Core SignalR rozšířeného .

SignalR vyjednávání mezi zdroji pro ověřování ( Blazor WebAssembly )

Konfigurace SignalR základního klienta pro odesílání přihlašovacích údajů, jako jsou cookie hlavičky s nebo hlavičky ověřování HTTP:

  • Slouží SetBrowserRequestCredentials k nastavení u žádostí mezi Include fetch zdroji.

    IncludeRequestCredentialsMessageHandler.cs:

    using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Http;

public class IncludeRequestCredentialsMessageHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

  • Pokud je vytvořeno připojení rozbočovače, HttpMessageHandler přiřaďte k HttpMessageHandlerFactory možnosti :

    HubConnectionBuilder hubConnecton;

...

hubConnecton = new HubConnectionBuilder()
    .WithUrl(new Uri(NavigationManager.ToAbsoluteUri("/chathub")), options =>
    {
        options.HttpMessageHandlerFactory = innerHandler => 
            new IncludeRequestCredentialsMessageHandler { InnerHandler = innerHandler };
    }).Build();

    Předchozí příklad nakonfiguruje adresu URL připojení k centru na absolutní adresu URI na adrese , což je adresa URL použitá v kurzu v /chathub SignalR Blazor Index komponentě ( Pages/Index.razor ). Identifikátor URI lze nastavit také prostřednictvím řetězce, například https://signalr.example.com , nebo prostřednictvím konfigurace.

Další informace naleznete v tématu ASP.NET Core SignalR rozšířeného.

Režim vykreslování ( Blazor WebAssembly )

Pokud je aplikace, která používá , nakonfigurovaná pro předběžné vykreslení na serveru, k předběžnému vykreslení dojde před tím, než se nastane připojení Blazor WebAssembly SignalR klienta k serveru. Další informace najdete v následujících článcích:

Další zdroje informací pro Blazor WebAssembly aplikace

Možnosti obslužné rutiny okruhu pro Blazor Server aplikace

Nakonfigurujte Blazor Server okruh pomocí položky uvedené v následující CircuitOptions tabulce.

Možnost Výchozí Description
DetailedErrors false Odesílání podrobných zpráv o výjimce do JavaScriptu, když dojde k neošetřené výjimce v okruhu nebo když volání metody .NET prostřednictvím zprostředkovatele komunikace JS vede k výjimce.
DisconnectedCircuitMaxRetained 100 Maximální počet odpojených okruhů, které server obsahuje v paměti najednou.
DisconnectedCircuitRetentionPeriod 3 minuty Maximální doba, po kterou se odpojený okruh uchová v paměti, než se odpojí.
JSInteropDefaultCallTimeout 1 min. Maximální doba, po kterou server čeká před časovým limitem asynchronního vyvolání funkce JavaScriptu.
MaxBufferedUnacknowledgedRenderBatches 10 Maximální počet nepovědomých dávek vykreslování, které server v daném okamžiku udržuje v paměti pro každý okruh, aby se podporovalo robustní opětovné připojení. Po dosažení limitu server přestane produkci nových dávek vykreslování, dokud klient nepotvrzuje jednu nebo více dávek.

Nakonfigurujte možnosti v Startup.ConfigureServices nástroji pomocí delegáta možností na AddServerSideBlazor . Následující příklad přiřadí výchozí hodnoty možností uvedené v předchozí tabulce. Ověřte, Startup.cs že se používá obor názvů ( System using System; ).

Startup.ConfigureServices:

services.AddServerSideBlazor(options =>
{
    options.DetailedErrors = false;
    options.DisconnectedCircuitMaxRetained = 100;
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(3);
    options.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(1);
    options.MaxBufferedUnacknowledgedRenderBatches = 10;
});

Ke konfiguraci HubConnectionContext použijte s HubConnectionContextOptions AddHubOptions . Popisy možností najdete v tématu ASP.NET Core SignalR rozšířeného . Následující příklad přiřadí výchozí hodnoty možností. Ověřte, Startup.cs že se používá obor názvů ( System using System; ).

Startup.ConfigureServices:

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
        options.EnableDetailedErrors = false;
        options.HandshakeTimeout = TimeSpan.FromSeconds(15);
        options.KeepAliveInterval = TimeSpan.FromSeconds(15);
        options.MaximumParallelInvocationsPerClient = 1;
        options.MaximumReceiveMessageSize = 32 * 1024;
        options.StreamBufferCapacity = 10;
    });

Blazor Konfigurace trasy koncového bodu centra ( Blazor Server )

V Startup.Configure Blazor Server aplikaci MapBlazorHub volají v IEndpointRouteBuilder , aby se UseEndpoints namapování Blazor aplikace na Hub výchozí cestu aplikace. Skript Blazor Server ( ) automaticky odkazuje na koncový bod vytvořený pomocí blazor.server.js MapBlazorHub .

Reflexe stavu připojení v uživatelském rozhraní ( Blazor Server )

Když klient zjistí, že došlo ke ztrátě připojení, zobrazí se uživateli při pokusu o opětovné připojení výchozí uživatelské rozhraní. Pokud se opětovné připojení nezdaří, uživateli se poskytuje možnost opakování.

Pokud chcete přizpůsobit uživatelské rozhraní, definujte element s v id components-reconnect-modal části stránky <body> _Host.cshtml Razor .

Pages/_Host.cshtml:

<div id="components-reconnect-modal">
    ...
</div>

Do šablony stylů webu přidejte následující styly CSS.

wwwroot/css/site.css:

#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    display: block;
}

Následující tabulka popisuje třídy CSS použité na components-reconnect-modal prvek Blazor architekturou.

CSS – třída Označuje…
components-reconnect-show Ztracené připojení. Klient se pokouší znovu připojit. Zobrazte modální.
components-reconnect-hide K serveru se znovu na navázat aktivní připojení. Skryjte modální.
components-reconnect-failed Opětovné připojení selhalo, pravděpodobně kvůli chybě sítě. Pokud se chcete pokusit o opětovné připojení, zavolejte window.Blazor.reconnect() v JavaScriptu.
components-reconnect-rejected Opětovné připojení se zamítne. Server byl dosažen, ale připojení se zamítl a stav uživatele na serveru se ztratí. Pokud chcete aplikaci znovu načíst, volejte location.reload() v JavaScriptu. Tento stav připojení může mít tyto důsledky:
  • Dojde k chybě v okruhu na straně serveru.
  • Klient je odpojený dostatečně dlouho, aby server zahodil stav uživatele. Instance komponent uživatele jsou odstraněny.
  • Server se restartuje nebo se recykluje pracovní proces aplikace.

Režim vykreslování ( Blazor Server )

Ve výchozím nastavení aplikace předem vykreslujte uživatelské rozhraní na serveru před tím, Blazor Server než se nasadí připojení klienta k serveru. Další informace naleznete v tématu Pomocná značka komponenty v ASP.NET Core.

Blazor startup ( Blazor Server )

Nakonfigurujte ruční spuštění Blazor Server okruhu SignalR aplikace v Pages/_Host.cshtml souboru :

  • Přidejte autostart="false" atribut ke <script> značce pro blazor.server.js skript.
  • Umístěte skript, který volá za značku skriptu a Blazor.start blazor.server.js za uzavírací <script> </body> značku.

Pokud je tato možnost zakázaná, všechny aspekty aplikace, které nezávisí autostart na okruhu, fungují normálně. Například směrování na straně klienta je funkční. Jakýkoli aspekt, který závisí na okruhu, ale nebude funkční, dokud se Blazor.start nezačlení. Chování aplikace je nepředvídatelné bez zavedeného okruhu. Například metody komponent se nedaří spustit, když je okruh odpojený.

Další informace, včetně toho, jak inicializovat, když je dokument připravený a jak zřetězovat s Blazor JS Promise,najdete v tématu ASP.NET Core Blazor Úvod .

Konfigurace SignalR protokolování klienta ( Blazor Server )

V tvůrci klientů předejte objekt configureSignalR konfigurace, který volá configureLogging s úrovní protokolu.

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        configureSignalR: function (builder) {
          builder.configureLogging("information");
        }
      });
    </script>
</body>

V předchozím příkladu je information ekvivalentem úrovně protokolu LogLevel.Information .

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Úprava obslužné rutiny opětovného připojení ( Blazor Server )

Události připojení okruhu obslužné rutiny opětovného připojení je možné upravit pro vlastní chování, například:

  • Upozorní uživatele, pokud dojde k vyřazení připojení.
  • Protokolování (z klienta) při připojení okruhu.

Pokud chcete upravit události připojení, zaregistrujte zpětná volání pro následující změny připojení:

  • Vyřazená připojení používají onConnectionDown .
  • Vytvořená nebo znovu vytvořená připojení používají onConnectionUp .

Je onConnectionDown nutné zadat i onConnectionUp .

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionHandler: {
          onConnectionDown: (options, error) => console.error(error),
          onConnectionUp: () => console.log("Up, up, and away!")
        }
      });
    </script>
</body>

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Upravte počet opakování opětovného připojení a interval ( Blazor Server ).

Pokud chcete upravit počet a interval opakování opětovného připojení, nastavte počet opakování ( ) a dobu v milisekundách povolenou pro každý pokus o maxRetries opakování ( retryIntervalMilliseconds ).

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionOptions: {
          maxRetries: 3,
          retryIntervalMilliseconds: 2000
        }
      });
    </script>
</body>

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Skrytí nebo nahrazení zobrazení opětovného připojení ( Blazor Server )

Pokud chcete skrýt zobrazení opětovného připojení, nastavte obslužnou rutinu opětovného připojení _reconnectionDisplay na prázdný objekt ( nebo {} new Object() ).

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      window.addEventListener('beforeunload', function () {
        Blazor.defaultReconnectionHandler._reconnectionDisplay = {};
      });

      Blazor.start();
    </script>
</body>

Pokud chcete nahradit zobrazení opětovného připojení, nastavte _reconnectionDisplay v předchozím příkladu element pro display:

Blazor.defaultReconnectionHandler._reconnectionDisplay = 
  document.getElementById("{ELEMENT ID}");

Zástupný symbol {ELEMENT ID} je ID elementu HTML, který se má zobrazit.

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Upravte zpoždění před zobrazením opětovného připojení nastavením vlastnosti v šabloně stylů CSS webu transition-delay pro modální prvek. Následující příklad nastaví zpoždění přechodu z 500 ms (výchozí) na 1 000 ms (1 sekunda).

wwwroot/css/site.css:

#components-reconnect-modal {
    transition: visibility 0s linear 1000ms;
}

Odpojení Blazor okruhu od klienta ( Blazor Server )

Ve výchozím nastavení se okruh při aktivaci události Blazor unload stránky odpojí. Pokud chcete odpojit okruh pro jiné scénáře na klientovi, táhněte ho Blazor.disconnect v příslušné obslužné rutině události. V následujícím příkladu se okruh odpojí, když je stránka skrytá ( pagehide událost):

window.addEventListener('pagehide', () => {
  Blazor.disconnect();
});

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Blazor Server obslužná rutina okruhu

Blazor Server umožňuje kódu definovat obslužnou rutinu okruhu, která umožňuje spuštění kódu při změnách stavu okruhu uživatele. Obslužná rutina okruhu je implementována odvozením z třídy a registrací třídy CircuitHandler v kontejneru služby aplikace. Následující příklad obslužné rutiny okruhu sleduje otevřená SignalR připojení.

TrackingCircuitHandler.cs:

using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Server.Circuits;

public class TrackingCircuitHandler : CircuitHandler
{
    private HashSet<Circuit> circuits = new();

    public override Task OnConnectionUpAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Add(circuit);

        return Task.CompletedTask;
    }

    public override Task OnConnectionDownAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Remove(circuit);

        return Task.CompletedTask;
    }

    public int ConnectedCircuits => circuits.Count;
}

Obslužné rutiny okruhu se zaregistrovaly pomocí diody. Vymezené instance se vytvářejí pro každou instanci okruhu. Pomocí v předchozím příkladu je vytvořena jednosedměnná služba, protože stav všech okruhů TrackingCircuitHandler musí být sledován.

Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddSingleton<CircuitHandler, TrackingCircuitHandler>();
}

Pokud metody vlastní obslužné rutiny okruhu vyvolá neošetřenou výjimku, výjimka je pro okruh Blazor Server závažná. Pokud chcete tolerovat výjimky v kódu obslužné rutiny nebo volání metod, zabalte kód do jednoho nebo více příkazů se zpracováním chyb a try-catch protokolováním.

Když okruh skončí, protože se uživatel odpojil a rozhraní čistí stav okruhu, rozhraní vyhodí rozsah DI okruhu. Disposing the scope disposes any circuit-scoped DI services that System.IDisposable implement . Pokud kterákoli služba dilací vyvolá neošetřenou výjimku během vyřazení, rozhraní výjimku zahlásí.

Služba SignalR Azure ( Blazor Server )

Službu Azure doporučujeme používat SignalR pro aplikace hostované v Blazor Server Microsoft Azure. Služba funguje ve spojení s centrem aplikace pro škálování aplikace na velký počet Blazor Blazor Server souběžných SignalR připojení. Kromě toho globální dosah služby a vysoce výkonná datová centra výrazně pomáhá snížení SignalR latence kvůli zeměpisné oblasti. Pokud chcete předem vykreslovat podporu služby Azure, nakonfigurujte aplikaci tak, aby SignalR přichycené relace . Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor Server.

Další zdroje informací pro Blazor Server aplikace

Tento článek vysvětluje, jak nakonfigurovat a spravovat SignalR připojení v Blazor aplikacích.

Obecné pokyny k ASP.NET Core najdete v tématech SignalR Úvod do ASP.NET Core SignalR v oblasti dokumentace. Informace o SignalR konfiguraci přidané do hostovaného Blazor WebAssembly řešení najdetev tématu ASP.NET Core SignalR rozšířeného .

SignalR vyjednávání mezi zdroji pro ověřování ( Blazor WebAssembly )

Konfigurace SignalR základního klienta pro odesílání přihlašovacích údajů, jako jsou cookie hlavičky s nebo hlavičky ověřování HTTP:

  • Slouží SetBrowserRequestCredentials k nastavení u žádostí mezi Include fetch zdroji.

    IncludeRequestCredentialsMessageHandler.cs:

    using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.WebAssembly.Http;

public class IncludeRequestCredentialsMessageHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        return base.SendAsync(request, cancellationToken);
    }
}

  • Pokud je vytvořeno připojení rozbočovače, HttpMessageHandler přiřaďte k HttpMessageHandlerFactory možnosti :

    HubConnectionBuilder hubConnecton;

...

hubConnecton = new HubConnectionBuilder()
    .WithUrl(new Uri(NavigationManager.ToAbsoluteUri("/chathub")), options =>
    {
        options.HttpMessageHandlerFactory = innerHandler => 
            new IncludeRequestCredentialsMessageHandler { InnerHandler = innerHandler };
    }).Build();

    Předchozí příklad nakonfiguruje adresu URL připojení k centru na absolutní adresu URI na adrese , což je adresa URL použitá v kurzu v /chathub SignalR Blazor Index komponentě ( Pages/Index.razor ). Identifikátor URI lze nastavit také prostřednictvím řetězce, například https://signalr.example.com , nebo prostřednictvím konfigurace.

Další informace naleznete v tématu ASP.NET Core SignalR rozšířeného.

Další zdroje informací pro Blazor WebAssembly aplikace

Možnosti obslužné rutiny okruhu pro Blazor Server aplikace

Nakonfigurujte Blazor Server okruh pomocí položky uvedené v následující CircuitOptions tabulce.

Možnost Výchozí Description
DetailedErrors false Odesílání podrobných zpráv o výjimce do JavaScriptu, když dojde k neošetřené výjimce v okruhu nebo když volání metody .NET prostřednictvím zprostředkovatele komunikace JS vede k výjimce.
DisconnectedCircuitMaxRetained 100 Maximální počet odpojených okruhů, které server obsahuje v paměti najednou.
DisconnectedCircuitRetentionPeriod 3 minuty Maximální doba, po kterou se odpojený okruh uchová v paměti, než se odpojí.
JSInteropDefaultCallTimeout 1 min. Maximální doba, po kterou server čeká před časovým limitem asynchronního vyvolání funkce JavaScriptu.
MaxBufferedUnacknowledgedRenderBatches 10 Maximální počet nepovědomých dávek vykreslování, které server udržuje v paměti pro každý okruh v daném okamžiku, aby se podporovalo robustní opětovné připojení. Po dosažení limitu server přestane produkci nových dávek vykreslování, dokud klient nepotvrzuje jednu nebo více dávek.

Nakonfigurujte možnosti v Startup.ConfigureServices nástroji pomocí delegáta možností na AddServerSideBlazor . Následující příklad přiřadí výchozí hodnoty možností uvedené v předchozí tabulce. Ověřte, Startup.cs že se používá obor názvů ( System using System; ).

Startup.ConfigureServices:

services.AddServerSideBlazor(options =>
{
    options.DetailedErrors = false;
    options.DisconnectedCircuitMaxRetained = 100;
    options.DisconnectedCircuitRetentionPeriod = TimeSpan.FromMinutes(3);
    options.JSInteropDefaultCallTimeout = TimeSpan.FromMinutes(1);
    options.MaxBufferedUnacknowledgedRenderBatches = 10;
});

Ke konfiguraci HubConnectionContext použijte s HubConnectionContextOptions AddHubOptions . Popisy možností najdete v tématu ASP.NET Core SignalR rozšířeného . Následující příklad přiřadí výchozí hodnoty možností. Ověřte, Startup.cs že se používá obor názvů ( System using System; ).

Startup.ConfigureServices:

services.AddServerSideBlazor()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromSeconds(30);
        options.EnableDetailedErrors = false;
        options.HandshakeTimeout = TimeSpan.FromSeconds(15);
        options.KeepAliveInterval = TimeSpan.FromSeconds(15);
        options.MaximumParallelInvocationsPerClient = 1;
        options.MaximumReceiveMessageSize = 32 * 1024;
        options.StreamBufferCapacity = 10;
    });

Blazor Konfigurace trasy koncového bodu centra ( Blazor Server )

V Startup.Configure Blazor Server aplikaci MapBlazorHub volají v IEndpointRouteBuilder , aby se UseEndpoints namapovat na výchozí cestu Blazor Hub aplikace. Skript Blazor Server ( ) automaticky odkazuje na koncový bod vytvořený pomocí blazor.server.js MapBlazorHub .

Reflexe stavu připojení v uživatelském rozhraní ( Blazor Server )

Když klient zjistí, že došlo ke ztrátě připojení, zobrazí se uživateli při pokusu o opětovné připojení výchozí uživatelské rozhraní. Pokud se opětovné připojení nezdaří, uživateli se poskytuje možnost opakování.

Pokud chcete přizpůsobit uživatelské rozhraní, definujte element s v id components-reconnect-modal části stránky <body> _Host.cshtml Razor .

Pages/_Host.cshtml:

<div id="components-reconnect-modal">
    ...
</div>

Do šablony stylů webu přidejte následující styly CSS.

wwwroot/css/site.css:

#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    display: block;
}

Následující tabulka popisuje třídy CSS použité na components-reconnect-modal prvek Blazor architekturou.

CSS – třída Označuje…
components-reconnect-show Ztracené připojení. Klient se pokouší znovu připojit. Zobrazte modální.
components-reconnect-hide K serveru se znovu na navázat aktivní připojení. Skryjte modální.
components-reconnect-failed Opětovné připojení selhalo, pravděpodobně kvůli chybě sítě. Pokud se chcete pokusit o opětovné připojení, zavolejte window.Blazor.reconnect() v JavaScriptu.
components-reconnect-rejected Opětovné připojení se zamítne. Server byl dosažen, ale připojení se zamítl a stav uživatele na serveru se ztratí. Pokud chcete aplikaci znovu načíst, volejte location.reload() v JavaScriptu. Tento stav připojení může mít tyto důsledky:
  • Dojde k chybě v okruhu na straně serveru.
  • Klient je odpojený dostatečně dlouho, aby server zahodil stav uživatele. Instance komponent uživatele jsou odstraněny.
  • Server se restartuje nebo se recykluje pracovní proces aplikace.

Režim vykreslování ( Blazor Server )

Ve výchozím nastavení aplikace předem vykreslujte uživatelské rozhraní na serveru před tím, Blazor Server než se nasadí připojení klienta k serveru. Další informace naleznete v tématu Pomocná značka komponenty v ASP.NET Core.

Blazor startup ( Blazor Server )

Nakonfigurujte ruční spuštění Blazor Server okruhu SignalR aplikace v Pages/_Host.cshtml souboru :

  • Přidejte autostart="false" atribut ke <script> značce pro blazor.server.js skript.
  • Umístěte skript, který volá za značku skriptu a Blazor.start blazor.server.js za uzavírací <script> </body> značku.

Pokud je tato možnost zakázaná, všechny aspekty aplikace, které nezávisí autostart na okruhu, fungují normálně. Například směrování na straně klienta je funkční. Jakýkoli aspekt, který závisí na okruhu, ale nebude funkční, dokud se Blazor.start nezačlení. Chování aplikace je nepředvídatelné bez zavedeného okruhu. Například metody komponent se nedaří spustit, když je okruh odpojený.

Další informace, včetně toho, jak inicializovat, když je dokument připravený a jak zřetězovat s Blazor JS Promise,najdete v tématu ASP.NET Core Blazor Úvod .

Konfigurace SignalR protokolování klienta ( Blazor Server )

V tvůrci klientů předejte objekt configureSignalR konfigurace, který volá configureLogging s úrovní protokolu.

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        configureSignalR: function (builder) {
          builder.configureLogging("information");
        }
      });
    </script>
</body>

V předchozím příkladu je information ekvivalentem úrovně protokolu LogLevel.Information .

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Úprava obslužné rutiny opětovného připojení ( Blazor Server )

Události připojení okruhu obslužné rutiny opětovného připojení je možné upravit pro vlastní chování, například:

  • Upozorní uživatele, pokud dojde k vyřazení připojení.
  • Protokolování (z klienta) při připojení okruhu.

Pokud chcete upravit události připojení, zaregistrujte zpětná volání pro následující změny připojení:

  • Vyřazená připojení používají onConnectionDown .
  • Vytvořená nebo znovu vytvořená připojení používají onConnectionUp .

Je onConnectionDown nutné zadat i onConnectionUp .

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionHandler: {
          onConnectionDown: (options, error) => console.error(error),
          onConnectionUp: () => console.log("Up, up, and away!")
        }
      });
    </script>
</body>

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Upravte počet opakování opětovného připojení a interval ( Blazor Server ).

Pokud chcete upravit počet a interval opakování opětovného připojení, nastavte počet opakování ( ) a dobu v milisekundách povolenou pro každý pokus o maxRetries opakování ( retryIntervalMilliseconds ).

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      Blazor.start({
        reconnectionOptions: {
          maxRetries: 3,
          retryIntervalMilliseconds: 2000
        }
      });
    </script>
</body>

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Skrytí nebo nahrazení zobrazení opětovného připojení ( Blazor Server )

Pokud chcete skrýt zobrazení opětovného připojení, nastavte obslužnou rutinu opětovného připojení _reconnectionDisplay na prázdný objekt ( nebo {} new Object() ).

Pages/_Host.cshtml:

<body>
    ...

    <script src="_framework/blazor.server.js" autostart="false"></script>
    <script>
      window.addEventListener('beforeunload', function () {
        Blazor.defaultReconnectionHandler._reconnectionDisplay = {};
      });

      Blazor.start();
    </script>
</body>

Pokud chcete nahradit zobrazení opětovného připojení, nastavte _reconnectionDisplay v předchozím příkladu element pro zobrazení:

Blazor.defaultReconnectionHandler._reconnectionDisplay = 
  document.getElementById("{ELEMENT ID}");

Zástupný symbol {ELEMENT ID} je ID prvku HTML, který se má zobrazit.

Další informace o spuštění Blazor najdete v tématu ASP.NET Core Blazor Úvod .

Blazor Server obslužná rutina okruhu

Blazor Server umožňuje kódu definovat obslužnou rutinu okruhu, která umožňuje spuštění kódu při změnách stavu okruhu uživatele. Obslužná rutina okruhu je implementována odvozením z třídy a registrací třídy CircuitHandler v kontejneru služby aplikace. Následující příklad obslužné rutiny okruhu sleduje otevřená SignalR připojení.

TrackingCircuitHandler.cs:

using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Server.Circuits;

public class TrackingCircuitHandler : CircuitHandler
{
    private HashSet<Circuit> circuits = new HashSet<Circuit>();

    public override Task OnConnectionUpAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Add(circuit);

        return Task.CompletedTask;
    }

    public override Task OnConnectionDownAsync(Circuit circuit, 
        CancellationToken cancellationToken)
    {
        circuits.Remove(circuit);

        return Task.CompletedTask;
    }

    public int ConnectedCircuits => circuits.Count;
}

Obslužné rutiny okruhu se zaregistrovaly pomocí diody. Vymezené instance se vytvářejí pro každou instanci okruhu. Pomocí v předchozím příkladu je vytvořena jednosedměnná služba, protože stav všech okruhů TrackingCircuitHandler musí být sledován.

Startup.cs:

public void ConfigureServices(IServiceCollection services)
{
    ...
    services.AddSingleton<CircuitHandler, TrackingCircuitHandler>();
}

Pokud metody vlastní obslužné rutiny okruhu vyvolá neošetřenou výjimku, výjimka je pro okruh Blazor Server závažná. Pokud chcete tolerovat výjimky v kódu obslužné rutiny nebo volání metod, zabalte kód do jednoho nebo více příkazů se zpracováním chyb a try-catch protokolováním.

Když okruh skončí, protože se uživatel odpojil a rozhraní čistí stav okruhu, rozhraní vyhodí rozsah DI okruhu. Disposing the scope disposes any circuit-scoped DI services that System.IDisposable implement . Pokud kterákoli služba dilací vyvolá neošetřenou výjimku během vyřazení, rozhraní výjimku zahlásí.

Služba SignalR Azure ( Blazor Server )

Službu Azure doporučujeme používat SignalR pro aplikace hostované v Blazor Server Microsoft Azure. Služba funguje ve spojení s centrem aplikace pro škálování aplikace na velký počet Blazor Blazor Server souběžných SignalR připojení. Kromě toho globální dosah služby a vysoce výkonná datová centra výrazně pomáhá snížení SignalR latence kvůli zeměpisné oblasti. Pokud chcete předem vykreslovat podporu služby Azure, nakonfigurujte aplikaci tak, aby SignalR přichycené relace . Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor Server.

Další zdroje informací pro Blazor Server aplikace