Seite 3: Websockets aktivieren und überwachen

Für die optimale Kommunikation sollte im Webserver das Websockets-Protokoll aktiviert sein. In Microsofts Webserver Internet Information Services (IIS) gibt es Unterstützung für Websockets (RFC 6455) seit der Version 8.0, das heißt ab Windows 8 und Windows Server 2012. Das Feature ist im Server Manager beziehungsweise auf einem Windows-Client unter "Turn Windows Features on" im Ast "Internet Information Services/World Wide Web Services|Application Development Features" zu aktivieren (s. Abb. 2).

Auch in einem Azure Web App Service sind Websockets explizit unter "Configuration/General Settings" zu aktivieren (s. Abb. 3).

Um in Webbrowsern Websocket-Nachrichten nachvollziehen zu können, muss man in den Entwicklerwerkzeugen des Webbrowsers die Websocket-Ansicht (z. B. in Chrome: "WS") wählen (s. Abb. 4).

Benutzer-Benachrichtigungen per Toast

Wer sich nun noch wünscht, dass Benutzer bei eingehenden Benachrichtigungen über Datenänderungen in anderen Browserinstanzen eine sichtbare Nachricht erhalten statt (wie bisher in Listing 2 realisiert) nur in die Entwicklerkonsole des Webbrowsers, soll das haben. Abbildung 5 zeigt zwei solcher Benachrichtigungen innerhalb des Browserfensters:

Benachrichtigungen kann man als Desktop-Benachrichtigungen im Betriebssystem (NuGet-Komponente Blazor.Extensions.Notification oder als Toast innerhalb des Browserfensters (NuGet-Komponente Blazored.Toast) realisieren. Für die Desktop-Benachrichtigung braucht man das Einverständnis der jeweiligen Browser-Benutzer. Zudem erwies sich die Komponente Blazor.Extensions.Notification als fehlerbehaftet: Das GitHub-Projekt ist zwar recht aktuell gewartet, aber das NuGet-Paket wurde zuletzt im Mai 2019 aktualisiert und hat noch einige Fehler. Die Wahl fiel daher auf Blazored.Toast.

Diese NuGet-Komponente lädt man per

Install-Package Blazored.Toast

In der Index.html ist die passende CSS-Datei anzufügen, die Teil dieser gelieferten DLL ist:

<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />

Kurzer Exkurs, wie das funktioniert: Entwickler können eine DLL als sogenannte "Razor Class Library" gestalten, um dort nicht nur Razor Components, sondern auch andere Webinhalte wie HTML, CSS, JavaScript und Grafiken zur Wiederverwendung zu kapseln. Ab Blazor 5.0 ist es auch möglich, solche DLLs erst bei Bedarf nachzuladen (Lazy Loading), um die Anzahl beim Start der Anwendung zu ladenden Dateien zu verringern, was bei Blazor WebAssembly ein großes Problem darstellt.

In Program.cs ergänzt man:

using Blazored.Toast;
...
services.AddBlazoredToast();

In _Imports.razor fügt man an:

@using Blazored.Toast
@using Blazored.Toast.Services

Außerdem ist noch ein Zusatz in der MainLayout.razor notwendig, damit die Toast-Benachrichtigungen auf allen Seiten sichtbar werden können:

<BlazoredToasts />

Schließlich müssen Entwickler in Index.razor.cs noch den Blazor-Toast-Service injizieren:

[Inject] Blazored.Toast.Services.IToastService toastService { get; set; }

Danach können sie in Listing 2 die Befehle

Console.WriteLine(s);

jeweils durch ein

toastService.ShowSuccess(s, "Daten geändert");

ersetzen. Voila!