Hostingmodellkonfiguration für ASP.NET Core BlazorASP.NET Core Blazor hosting model configuration

Von Daniel Roth und Luke LathamBy Daniel Roth and Luke Latham

Dieser Artikel behandelt die Hostingmodellkonfiguration.This article covers hosting model configuration.

Ursprungsübergreifende SignalR-Aushandlung für die AuthentifizierungSignalR cross-origin negotiation for authentication

Dieser Abschnitt gilt für Blazor WebAssembly.This section applies to Blazor WebAssembly.

So konfigurieren Sie den zugrunde liegenden SignalR-Client zum Senden von Anmeldeinformationen (z. B. Cookies oder HTTP-Authentifizierungsheader):To configure SignalR's underlying client to send credentials, such as cookies or HTTP authentication headers:

  • Verwenden Sie SetBrowserRequestCredentials, um Include auf ursprungsübergreifende fetch-Anforderungen festzulegen:Use SetBrowserRequestCredentials to set Include on cross-origin fetch requests:

    public class IncludeRequestCredentialsMessageHandler : DelegatingHandler
    {
        protected override Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
        {
            request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
            return base.SendAsync(request, cancellationToken);
        }
    }
    
  • Weisen Sie der HttpMessageHandlerFactory-Eigenschaft die HttpMessageHandler-Klasse hinzu:Assign the HttpMessageHandler to the HttpMessageHandlerFactory option:

    var connection = new HubConnectionBuilder()
        .WithUrl(new Uri("http://signalr.example.com"), options =>
        {
            options.HttpMessageHandlerFactory = innerHandler => 
                new IncludeRequestCredentialsMessageHandler { InnerHandler = innerHandler };
        }).Build();
    

Weitere Informationen finden Sie unter SignalR-Konfiguration in ASP.NET Core.For more information, see SignalR-Konfiguration in ASP.NET Core.

Reflektieren des Verbindungszustands auf der BenutzeroberflächeReflect the connection state in the UI

Dieser Abschnitt gilt für Blazor Server.This section applies to Blazor Server.

Wenn der Client erkennt, dass keine Verbindung mehr besteht, wird dem Benutzer eine Standardbenutzeroberfläche angezeigt, während der Client versucht, eine neue Verbindung herzustellen.When the client detects that the connection has been lost, a default UI is displayed to the user while the client attempts to reconnect. Wenn die Wiederherstellung der Verbindung fehlschlägt, wird dem Benutzer die Option angezeigt, es noch mal zu versuchen.If reconnection fails, the user is provided the option to retry.

Wenn Sie die Benutzeroberfläche anpassen möchten, definieren Sie ein Element mit einer id von components-reconnect-modal im <body> auf der Razor-Seite von _Host.cshtml:To customize the UI, define an element with an id of components-reconnect-modal in the <body> of the _Host.cshtml Razor page:

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

Fügen Sie dem Stylesheet (wwwroot/css/app.css oder wwwroot/css/site.css) der App Folgendes hinzu:Add the following to the app's stylesheet (wwwroot/css/app.css or wwwroot/css/site.css):

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

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

In der folgenden Tabelle werden die CSS-Klassen beschrieben, die auf das components-reconnect-modal-Element angewendet werden.The following table describes the CSS classes applied to the components-reconnect-modal element.

CSS-KlasseCSS class Steht für…Indicates…
components-reconnect-show Die Verbindung wurde getrennt.A lost connection. Der Client versucht, die Verbindung wiederherzustellen.The client is attempting to reconnect. Die modale Seite wird angezeigt.Show the modal.
components-reconnect-hide Auf dem Server wird eine aktive Verbindung wiederhergestellt.An active connection is re-established to the server. Die modale Seite wird ausgeblendet.Hide the modal.
components-reconnect-failed Die Wiederherstellung der Verbindung ist wahrscheinlich aufgrund eines Netzwerkfehlers fehlgeschlagen.Reconnection failed, probably due to a network failure. Rufen Sie window.Blazor.reconnect() auf, um einen neuen Verbindungsversuch zu unternehmen.To attempt reconnection, call window.Blazor.reconnect().
components-reconnect-rejected Die Wiederherstellung der Verbindung wurde abgelehnt.Reconnection rejected. Der Server wurde zwar erreicht, jedoch hat dieser die Verbindung verweigert. Der Status des Benutzers auf dem Server wurde verworfen.The server was reached but refused the connection, and the user's state on the server is lost. Rufen Sie location.reload() auf, um die App neu zu laden.To reload the app, call location.reload(). Dieser Verbindungszustand kann aus folgenden Gründen auftreten:This connection state may result when:
  • Aufgetretener Absturz auf der serverseitigen Verbindung.A crash in the server-side circuit occurs.
  • Der Client war lange nicht verbunden, sodass der Server den Benutzerstatus verworfen hat.The client is disconnected long enough for the server to drop the user's state. Komponenteninstanzen, mit denen der Benutzer interagiert, werden verworfen.Instances of the components that the user is interacting with are disposed.
  • Der Server wird neu gestartet, oder der Workerprozess der App wird wiederverwendet.The server is restarted, or the app's worker process is recycled.

RendermodusRender mode

Dieser Abschnitt gilt für Blazor Server.This section applies to Blazor Server.

Blazor Server-Apps werden standardmäßig eingerichtet, um die Benutzeroberfläche auf dem Server schon vor der Einrichtung der Clientverbindung auf dem Server zu rendern. apps are set up by default to prerender the UI on the server before the client connection to the server is established. Diese Einrichtung erfolgt auf der Razor-Seite von _Host.cshtml:This is set up in the _Host.cshtml Razor page:

<body>
    <app>
      <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <script src="_framework/blazor.server.js"></script>
</body>

RenderMode konfiguriert folgende Einstellungen für die Komponente:RenderMode configures whether the component:

  • Ob die Komponente zuvor für die Seite gerendert wirdIs prerendered into the page.
  • Ob die Komponente als statische HTML auf der Seite gerendert wird oder ob sie die nötigen Informationen für das Bootstrapping einer Blazor-App über den Benutzer-Agent enthält.Is rendered as static HTML on the page or if it includes the necessary information to bootstrap a Blazor app from the user agent.
RendermodusRender mode BeschreibungDescription
ServerPrerendered Rendert die Komponente in statisches HTML und fügt einen Marker für eine Blazor Server-App hinzu.Renders the component into static HTML and includes a marker for a Blazor Server app. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
Server Rendert einen Marker für eine Blazor Server-App.Renders a marker for a Blazor Server app. Die Ausgabe der Komponente ist nicht enthalten.Output from the component isn't included. Wenn der Benutzer-Agent gestartet wird, wird der Marker zum Bootstrapping einer Blazor-App verwendet.When the user-agent starts, this marker is used to bootstrap a Blazor app.
Static Rendert die Komponente in statischen HTML-Code.Renders the component into static HTML.

Das Rendern von Serverkomponenten über eine statische HTML-Seite wird nicht unterstützt.Rendering server components from a static HTML page isn't supported.

Konfigurieren Sie den SignalR-Client für Blazor Server-Apps.Configure the SignalR client for Blazor Server apps

Dieser Abschnitt gilt für Blazor Server.This section applies to Blazor Server.

Konfigurieren Sie den SignalR-Client, der von Blazor Server-Apps verwendet wird, in der Datei Pages/_Host.cshtml.Configure the SignalR client used by Blazor Server apps in the Pages/_Host.cshtml file. Platzieren Sie ein Skript, das Blazor.start aufruft, nach dem Skript _framework/blazor.server.js und innerhalb des Tags </body>.Place a script that calls Blazor.start after the _framework/blazor.server.js script and inside the </body> tag.

ProtokollierungLogging

So konfigurieren Sie die SignalR-Clientprotokollierung:To configure SignalR client logging:

  • Fügen Sie ein autostart="false"-Attribut zum <script>-Tag für das blazor.server.js-Skript hinzu.Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • Übergeben Sie ein Konfigurationsobjekt (configureSignalR), das configureLogging mit der Protokollebene im Clientgenerator aufruft.Pass in a configuration object (configureSignalR) that calls configureLogging with the log level on the client builder.
    ...

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

Im vorherigen Beispiel entspricht information der Protokollebene LogLevel.Information.In the preceding example, information is equivalent to a log level of LogLevel.Information.

Ändern des Handlers für die Wiederherstellung einer VerbindungModify the reconnection handler

Die Verbindungsereignisse des Handlers für die Wiederherstellung einer Verbindung können geändert werden, um benutzerdefinierte Verhaltensweisen zu erzeugen, z. B. für Folgendes:The reconnection handler's circuit connection events can be modified for custom behaviors, such as:

  • Benachrichtigung an einen Benutzer, wenn die Verbindung unterbrochen wirdTo notify the user if the connection is dropped.
  • Ausführen der Protokollierung (vom Client), wenn eine Verbindung bestehtTo perform logging (from the client) when a circuit is connected.

So ändern Sie die Verbindungsereignisse:To modify the connection events:

  • Fügen Sie ein autostart="false"-Attribut zum <script>-Tag für das blazor.server.js-Skript hinzu.Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • Registrieren Sie Rückrufe für Verbindungsänderungen für unterbrochene Verbindungen (onConnectionDown) und hergestellte bzw. wiederhergestellte Verbindungen (onConnectionUp).Register callbacks for connection changes for dropped connections (onConnectionDown) and established/re-established connections (onConnectionUp). onConnectionDown und onConnectionUp sind obligatorisch.Both onConnectionDown and onConnectionUp must be specified.
    ...

    <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>

Passen Sie die Anzahl und das Intervall der Wiederholungsversuche zum erneuten Herstellen einer Verbindung an.Adjust the reconnection retry count and interval

So passen Sie die Anzahl und das Intervall für die Wiederholungsversuche an:To adjust the reconnection retry count and interval:

  • Fügen Sie ein autostart="false"-Attribut zum <script>-Tag für das blazor.server.js-Skript hinzu.Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • Legen Sie die zulässige Anzahl von Wiederholungsversuchen (maxRetries) und den zulässigen Zeitraum in Millisekunden (retryIntervalMilliseconds) für jeden Versuch fest.Set the number of retries (maxRetries) and period in milliseconds permitted for each retry attempt (retryIntervalMilliseconds).
    ...

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

Ausblenden oder Ersetzen der Anzeige einer erneuten VerbindungHide or replace the reconnection display

So blenden Sie die Anzeige einer erneuten Verbindung aus:To hide the reconnection display:

  • Fügen Sie ein autostart="false"-Attribut zum <script>-Tag für das blazor.server.js-Skript hinzu.Add an autostart="false" attribute to the <script> tag for the blazor.server.js script.
  • Legen Sie das _reconnectionDisplay des Handlers für die erneuten Verbindung auf ein leeres Objekt fest ({} oder new Object()).Set the reconnection handler's _reconnectionDisplay to an empty object ({} or new Object()).
    ...

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

Um die Anzeige einer erneuten Verbindung zu ersetzen, legen Sie im vorherigen Beispiel _reconnectionDisplay auf das anzuzeigende Element fest:To replace the reconnection display, set _reconnectionDisplay in the preceding example to the element for display:

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

Der Platzhalter {ELEMENT ID} ist die ID des HTML-Elements, das angezeigt werden soll.The placeholder {ELEMENT ID} is the ID of the HTML element to display.

Zusätzliche RessourcenAdditional resources