Freigeben über


Praktische Übungseinheiten: Echtzeit-Webanwendungen mit SignalR

von Web Camps Team

Warnung

Diese Dokumentation gilt nicht für die neueste Version von SignalR. Sehen Sie sich ASP.NET Core SignalR an.

Download Web Camps Training Kit, Release vom Oktober 2015

Echtzeit-Webanwendungen bieten die Möglichkeit, serverseitige Inhalte in Echtzeit an die verbundenen Clients zu pushen. Für ASP.NET-Entwickler ist ASP.NET SignalR eine Bibliothek zum Hinzufügen von Echtzeit-Webfunktionen zu ihren Anwendungen. Es nutzt mehrere Transporte und wählt automatisch den besten verfügbaren Transport aufgrund des besten verfügbaren Transports des Clients und Servers aus. Es nutzt WebSocket, eine HTML5-API, die bidirektionale Kommunikation zwischen Browser und Server ermöglicht.

SignalR bietet auch eine einfache, allgemeine API zum Ausführen von Rpc von Server zu Client (Aufrufen von JavaScript-Funktionen in den Browsern Ihrer Clients über serverseitigen .NET-Code) in Ihrer ASP.NET-Anwendung sowie das Hinzufügen nützlicher Hooks für die Verbindungsverwaltung, z. B. Verbindungs-/Trennungsereignisse, Gruppierung von Verbindungen und Autorisierung.

SignalR ist eine Abstraktion über einige der Transporte, die für die Echtzeitarbeit zwischen Client und Server erforderlich sind. Eine SignalR-Verbindung beginnt als HTTP und wird dann zu einer WebSocket-Verbindung heraufgestuft, sofern verfügbar. WebSocket ist der ideale Transport für SignalR, da es den Serverspeicher am effizientesten nutzt, die niedrigste Latenz aufweist und die meisten zugrunde liegenden Features (z. B. die Vollduplexkommunikation zwischen Client und Server) aufweist, aber es hat auch die strengsten Anforderungen: WebSocket erfordert, dass der Server Windows Server 2012 oder Windows 8 verwendet. zusammen mit .NET Framework 4.5. Wenn diese Anforderungen nicht erfüllt sind, versucht SignalR , andere Transporte zu verwenden, um seine Verbindungen herzustellen (z. B. ajax long polling).

Die SignalR-API enthält zwei Modelle für die Kommunikation zwischen Clients und Servern: persistente Verbindungen und Hubs. Eine Verbindung stellt einen einfachen Endpunkt zum Senden von Einzelempfänger-, gruppierten oder Broadcastnachrichten dar. Ein Hub ist eine übergeordnete Pipeline, die auf der Verbindungs-API basiert, die es Ihrem Client und Server ermöglicht, Methoden direkt aufeinander aufzurufen.

SignalR-Architektur

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit vom Oktober 2015 enthalten, das unter https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13bverfügbar ist. Bitte beachten Sie, dass der Installer-Link auf dieser Seite nicht mehr funktioniert. Verwenden Sie stattdessen einen der Links im Abschnitt Assets.

Überblick

Ziele

In diesem praktischen Lab lernen Sie Folgendes:

  • Senden von Benachrichtigungen vom Server an den Client mithilfe von SignalR.
  • Scale Out Ihre SignalR-Anwendung mit SQL Server.

Voraussetzungen

Folgendes ist erforderlich, um dieses praktische Lab abzuschließen:

Einrichten

Um die Übungen in diesem praktischen Lab auszuführen, müssen Sie zuerst Ihre Umgebung einrichten.

  1. Öffnen Sie ein Windows Explorer-Fenster, und navigieren Sie zum Ordner Quelle des Labs.
  2. Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie Als Administrator ausführen aus, um den Setupprozess zu starten, mit dem Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für dieses Lab installiert werden.
  3. Wenn das Dialogfeld Benutzerkontensteuerung angezeigt wird, bestätigen Sie, dass die Aktion fortgesetzt werden soll.

Hinweis

Stellen Sie sicher, dass Sie alle Abhängigkeiten für dieses Lab überprüft haben, bevor Sie das Setup ausführen.

Verwenden der Codeausschnitte

Im gesamten Labdokument werden Sie angewiesen, Codeblöcke einzufügen. Zur Vereinfachung wird der größte Teil dieses Codes als Visual Studio Code-Codeausschnitte bereitgestellt, auf die Sie von Visual Studio 2013 aus zugreifen können, um zu vermeiden, dass er manuell hinzugefügt werden muss.

Hinweis

Jede Übung wird von einer Startlösung begleitet, die sich im Ordner Begin der Übung befindet, mit der Sie jede Übung unabhängig von den anderen verfolgen können. Beachten Sie, dass die Codeausschnitte, die während einer Übung hinzugefügt werden, in diesen Startlösungen fehlen und möglicherweise erst funktionieren, wenn Sie die Übung abgeschlossen haben. Im Quellcode für eine Übung finden Sie auch einen Ordner End , der eine Visual Studio-Projektmappe mit dem Code enthält, der sich aus dem Ausführen der Schritte in der entsprechenden Übung ergibt. Sie können diese Lösungen als Leitfaden verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie dieses praktische Lab durchlaufen.


Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

  1. Arbeiten mit Real-Time Daten mithilfe von SignalR
  2. Horizontales Hochskalieren mithilfe von SQL Server

Geschätzte Zeit für die Durchführung dieses Labs: 60 Minuten

Hinweis

Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine der vordefinierten Einstellungssammlungen auswählen. Jede vordefinierte Sammlung ist so konzipiert, dass sie einem bestimmten Entwicklungsstil entspricht, und bestimmt Fensterlayouts, Editorverhalten, IntelliSense-Codeausschnitte und Dialogfeldoptionen. Die Prozeduren in diesem Lab beschreiben die Aktionen, die zum Ausführen einer bestimmten Aufgabe in Visual Studio bei Verwendung der Sammlung Allgemeine Entwicklungseinstellungen erforderlich sind. Wenn Sie eine andere Einstellungssammlung für Ihre Entwicklungsumgebung auswählen, gibt es möglicherweise Unterschiede in den Schritten, die Sie berücksichtigen sollten.

Übung 1: Arbeiten mit Real-Time Daten mithilfe von SignalR

Während Chat häufig als Beispiel verwendet wird, können Sie mit Echtzeit-Webfunktionen noch viel mehr tun. Jedes Mal, wenn ein Benutzer eine Webseite aktualisiert, um neue Daten anzuzeigen oder die Seite ajax long polling implementiert, um neue Daten abzurufen, können Sie SignalR verwenden.

SignalR unterstützt Server-Push- oder Broadcastfunktionen. Die Verbindungsverwaltung erfolgt automatisch. Bei klassischen HTTP-Verbindungen für die Client-Server-Kommunikation wird die Verbindung für jede Anforderung wiederhergestellt, aber SignalR stellt eine dauerhafte Verbindung zwischen dem Client und dem Server bereit. In SignalR ruft der Servercode einen Clientcode im Browser mithilfe von Remoteprozeduraufrufen (RPC) und nicht mit dem heute bekannten Anforderungs-Antwort-Modell auf.

In dieser Übung konfigurieren Sie die Geek Quiz-Anwendung so, dass SignalR verwendet wird, um die Statistik-Dashboard mit den aktualisierten Metriken anzuzeigen, ohne dass die gesamte Seite aktualisiert werden muss.

Aufgabe 1 – Erkunden der Seite "Geek Quiz Statistics"

In dieser Aufgabe durchlaufen Sie die Anwendung und überprüfen, wie die Statistikseite angezeigt wird und wie Sie die Aktualisierung der Informationen verbessern können.

  1. Öffnen Sie Visual Studio Express 2013 für Web, und öffnen Sie die Projektmappe GeekQuiz.sln im Ordner Source\Ex1-WorkingWithRealTimeData\Begin.

  2. Drücken Sie F5, um die Projektmappe auszuführen. Die Seite "Anmelden" sollte im Browser angezeigt werden.

    Ausführen der Projektmappe

    Ausführen der Projektmappe

  3. Klicken Sie oben rechts auf der Seite auf Registrieren , um einen neuen Benutzer in der Anwendung zu erstellen.

    Link registrieren

    Link registrieren

  4. Geben Sie auf der Seite Registrieren einen Benutzernamen und ein Kennwort ein, und klicken Sie dann auf Registrieren.

    Registrieren eines Benutzers

    Registrieren eines Benutzers

  5. Die Anwendung registriert das neue Konto, und der Benutzer wird authentifiziert und zurück zur Startseite weitergeleitet, auf der die erste Quizfrage angezeigt wird.

  6. Öffnen Sie die Seite Statistik in einem neuen Fenster, und legen Sie die Seite Startseite und Statistik nebeneinander.

    Nebeneinander fenster nebeneinander

    Parallele Fenster

  7. Beantworten Sie auf der Startseite die Frage, indem Sie auf eine der Optionen klicken.

    Beantworten einer Frage

    Beantworten einer Frage

  8. Nachdem Sie auf eine der Schaltflächen geklickt haben, sollte die Antwort angezeigt werden.

    Frage richtig beantwortet

    Frage richtig beantwortet

  9. Beachten Sie, dass die auf der Seite Statistik bereitgestellten Informationen veraltet sind. Aktualisieren Sie die Seite, um die aktualisierten Ergebnisse anzuzeigen.

    Seite

    Seite "Statistik"

  10. Zurück zu Visual Studio, und beenden Sie das Debuggen.

Aufgabe 2 – Hinzufügen von SignalR zum Geek-Quiz zum Anzeigen von Onlinediagrammen

In dieser Aufgabe fügen Sie SignalR zur Lösung hinzu und senden Automatisch Updates an die Clients, wenn eine neue Antwort an den Server gesendet wird.

  1. Wählen Sie im Menü Extras in Visual Studio die Option NuGet-Paket-Manager aus, und klicken Sie dann auf Paket-Manager-Konsole.

  2. Führen Sie im Fenster Paket-Manager-Konsole den folgenden Befehl aus:

    Install-Package Microsoft.AspNet.SignalR
    

    SignalR-Paketinstallation

    Installation des SignalR-Pakets

    Hinweis

    Wenn Sie SignalR NuGet-Pakete Version 2.0.2 aus einer brandneuen MVC 5-Anwendung installieren, müssen Sie OWIN-Pakete manuell auf Version 2.0.1 (oder höher) aktualisieren, bevor Sie SignalR installieren. Hierzu können Sie das folgende Skript in der Paket-Manager-Konsole ausführen:

    get-package | where-object { $_.Id -like "Microsoft.Owin*"} | Update-Package
    

    In einer zukünftigen Version von SignalR werden OWIN-Abhängigkeiten automatisch aktualisiert.

  3. Erweitern Sie in Projektmappen-Explorer den Ordner Skripts, und beachten Sie, dass die SignalR js-Dateien der Projektmappe hinzugefügt wurden.

    SignalR JavaScript-Verweise auf

    SignalR-JavaScript-Verweise

  4. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das GeekQuiz-Projekt, wählen SieNeuen Ordnerhinzufügen | aus, und nennen Sie es Hubs.

  5. Klicken Sie mit der rechten Maustaste auf den Ordner Hubs , und wählen Sie Hinzufügen | Neues Element.

    Neues Element hinzufügen

    Neues Element hinzufügen

  6. Wählen Sie im Dialogfeld Neues Element hinzufügen das Visual C# | Web | SignalR-Knoten im linken Bereich, wählen Sie signalR Hub-Klasse (v2) im mittleren Bereich aus, nennen Sie die Datei StatisticsHub.cs , und klicken Sie auf Hinzufügen.

    Dialogfeld

    Dialogfeld "Neues Element hinzufügen"

  7. Ersetzen Sie den Code in der StatisticsHub-Klasse durch den folgenden Code.

    (Codeausschnitt – RealTimeSignalr – Ex1 – StatisticsHubClass)

    namespace GeekQuiz.Hubs
    {
        using Microsoft.AspNet.SignalR;
    
        public class StatisticsHub : Hub
        {
        }
    }
    
  8. Öffnen Sie Startup.cs , und fügen Sie die folgende Zeile am Ende der Configuration-Methode hinzu.

    (Codeausschnitt – RealTimeSignalr – Ex1 – MapSignalr)

    public void Configuration(IAppBuilder app)
    {
        this.ConfigureAuth(app);
        app.MapSignalR();
    }
    
  9. Öffnen Sie die Seite StatisticsService.cs im Ordner Services, und fügen Sie die folgenden using-Anweisungen hinzu.

    (Codeausschnitt – RealTimeSignalR – Ex1 – UsingDirectives)

    using Microsoft.AspNet.SignalR;
    using GeekQuiz.Hubs;
    
  10. Um verbundene Clients über Updates zu benachrichtigen, rufen Sie zunächst ein Context-Objekt für die aktuelle Verbindung ab. Das Hub-Objekt enthält Methoden zum Senden von Nachrichten an einen einzelnen Client oder zum Senden an alle verbundenen Clients. Fügen Sie der StatisticsService-Klasse die folgende Methode hinzu, um die Statistikdaten zu übertragen.

    (Codeausschnitt – RealTimeSignalR – Ex1 – NotifyUpdatesMethod)

    public async Task NotifyUpdates()
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<StatisticsHub>();
        if (hubContext != null)
        {
             var stats = await this.GenerateStatistics();
             hubContext.Clients.All.updateStatistics(stats);
        }
    }
    

    Hinweis

    Im obigen Code verwenden Sie einen beliebigen Methodennamen, um eine Funktion auf dem Client aufzurufen (d. h. updateStatistics). Der von Ihnen angegebene Methodenname wird als dynamisches Objekt interpretiert, was bedeutet, dass es keine IntelliSense- oder Kompilierzeitüberprüfung dafür gibt. Der Ausdruck wird zur Laufzeit ausgewertet. Wenn der Methodenaufruf ausgeführt wird, sendet SignalR den Methodennamen und die Parameterwerte an den Client. Wenn der Client über eine Methode verfügt, die dem Namen entspricht, wird diese Methode aufgerufen, und die Parameterwerte werden an sie übergeben. Wenn keine übereinstimmende Methode auf dem Client gefunden wird, wird kein Fehler ausgelöst. Weitere Informationen finden Sie unter ASP.NET SignalR Hubs-API-Leitfaden.

  11. Öffnen Sie die Seite TriviaController.cs im Ordner Controller, und fügen Sie die folgenden using-Anweisungen hinzu.

    using GeekQuiz.Services;
    
  12. Fügen Sie der Post-Aktionsmethode den folgenden hervorgehobenen Code hinzu.

    (Codeausschnitt – RealTimeSignalR – Ex1 – NotifyUpdatesCall)

    public async Task<IHttpActionResult> Post(TriviaAnswer answer)
    {
        if (!ModelState.IsValid)
        {
             return this.BadRequest(this.ModelState);
        }
    
        answer.UserId = User.Identity.Name;
    
        var isCorrect = await this.StoreAsync(answer);
    
        var statisticsService = new StatisticsService(this.db);
        await statisticsService.NotifyUpdates();
    
        return this.Ok<bool>(isCorrect);
    }
    
  13. Öffnen Sie die Seite Statistics.cshtml in den Ansichten | Basisordner . Suchen Sie den Abschnitt Skripts , und fügen Sie am Anfang des Abschnitts die folgenden Skriptverweise hinzu.

    (Codeausschnitt – RealTimeSignalR – Ex1 – SignalRScriptReferences)

    @section Scripts {
        @Scripts.Render("~/Scripts/jquery.signalR-2.0.2.min.js");
        @Scripts.Render("~/signalr/hubs");
        ...
    }
    

    Hinweis

    Wenn Sie SignalR und andere Skriptbibliotheken zu Ihrem Visual Studio-Projekt hinzufügen, installiert der Paket-Manager möglicherweise eine Version der SignalR-Skriptdatei, die aktueller ist als die in diesem Thema gezeigte Version. Stellen Sie sicher, dass der Skriptverweis im Code mit der Version der Skriptbibliothek übereinstimmt, die in Ihrem Projekt installiert ist.

  14. Fügen Sie den folgenden hervorgehobenen Code hinzu, um den Client mit dem SignalR-Hub zu verbinden und die Statistikdaten zu aktualisieren, wenn eine neue Nachricht vom Hub empfangen wird.

    (Codeausschnitt – RealTimeSignalr – Ex1 – SignalRClientCode)

    @section Scripts {
        ...
        <script>
            ...
    
            var connection = $.hubConnection();
            var hub = connection.createHubProxy("StatisticsHub");
            hub.on("updateStatistics", function (statistics) {
                    statisticsData = statistics;
                    $("#correctAnswersCounter").text(statistics.CorrectAnswers);
                    $("#incorrectAnswersCounter").text(statistics.IncorrectAnswers);
    
                    showCharts(statisticsData);
              });
    
            connection.start();
        </script>
    }
    

    In diesem Code erstellen Sie einen Hubproxy und registrieren einen Ereignishandler, um auf vom Server gesendete Nachrichten zu lauschen. In diesem Fall lauschen Sie auf Nachrichten, die über die updateStatistics-Methode gesendet werden.

Aufgabe 3: Ausführen der Lösung

In dieser Aufgabe führen Sie die Lösung aus, um zu überprüfen, ob die Statistikansicht automatisch mithilfe von SignalR aktualisiert wird, nachdem sie eine neue Frage beantwortet haben.

  1. Drücken Sie F5, um die Projektmappe auszuführen.

    Hinweis

    Wenn Sie noch nicht bei der Anwendung angemeldet sind, melden Sie sich mit dem Benutzer an, den Sie in Aufgabe 1 erstellt haben.

  2. Öffnen Sie die Seite Statistik in einem neuen Fenster, und legen Sie die Startseite und die Statistikseite wie in Aufgabe 1 nebeneinander.

  3. Beantworten Sie auf der Startseite die Frage, indem Sie auf eine der Optionen klicken.

    Eine andere Frage

    Antworten auf eine andere Frage

  4. Nachdem Sie auf eine der Schaltflächen geklickt haben, sollte die Antwort angezeigt werden. Beachten Sie, dass die Statistikinformationen auf der Seite automatisch aktualisiert werden, nachdem die Frage mit den aktualisierten Informationen beantwortet wurde, ohne dass die gesamte Seite aktualisiert werden muss.

    Seite

    Statistikseite nach der Antwort aktualisiert

Übung 2: Horizontales Hochskalieren mithilfe von SQL Server

Beim Skalieren einer Webanwendung können Sie in der Regel zwischen Hochskalierungs- und Horizontalskalierungsoptionen wählen. Hochskalieren bedeutet, einen größeren Server mit mehr Ressourcen (CPU, RAM usw.) zu verwenden, während horizontales Hochskalieren bedeutet, dass mehr Server hinzugefügt werden, um die Last zu bewältigen. Das Problem bei Letzterem besteht darin, dass die Clients an verschiedene Server weitergeleitet werden können. Ein Client, der mit einem Server verbunden ist, empfängt keine Nachrichten, die von einem anderen Server gesendet werden.

Sie können diese Probleme beheben, indem Sie eine Komponente namens Backplane verwenden, um Nachrichten zwischen Servern weiterzuleiten. Wenn eine Backplane aktiviert ist, instance jede Anwendung Nachrichten an die Backplane sendet, und die Backplane leitet sie an die anderen Anwendungsinstanzen weiter.

Derzeit gibt es drei Arten von Backplanes für SignalR:

  • Windows Azure Service Bus. Service Bus ist eine Messaginginfrastruktur, die es Komponenten ermöglicht, lose gekoppelte Nachrichten zu senden.
  • SQL Server. Die SQL Server Backplane schreibt Nachrichten in SQL-Tabellen. Die Backplane verwendet Service Broker für effizientes Messaging. Es funktioniert jedoch auch, wenn Service Broker nicht aktiviert ist.
  • Redis. Redis ist ein In-Memory-Schlüssel-Wert-Speicher. Redis unterstützt ein Publish/Subscribe-Muster ("pub/sub") zum Senden von Nachrichten.

Jede Nachricht wird über einen Nachrichtenbus gesendet. Ein Nachrichtenbus implementiert die IMessageBus-Schnittstelle , die eine Abstraktion zum Veröffentlichen/Abonnieren bereitstellt. Die Backplanes funktionieren, indem der Standard-IMessageBus durch einen Bus ersetzt wird, der für diese Backplane entworfen wurde.

Jeder Server instance über den Bus eine Verbindung mit der Backplane herstellt. Wenn eine Nachricht gesendet wird, wird sie an die Backplane gesendet, und die Backplane sendet sie an jeden Server. Wenn ein Server eine Nachricht von der Backplane empfängt, speichert er die Nachricht im lokalen Cache. Der Server sendet dann Nachrichten aus dem lokalen Cache an Clients.

Weitere Informationen zur Funktionsweise der SignalR-Backplane finden Sie in diesem Artikel.

Hinweis

Es gibt einige Szenarien, in denen eine Backplane zu einem Engpass werden kann. Hier sind einige typische SignalR-Szenarien:

  • Serverübertragung (z. B. Aktienticker): Backplanes funktionieren gut für dieses Szenario, da der Server die Geschwindigkeit steuert, mit der Nachrichten gesendet werden.
  • Client-zu-Client ( z. B. Chat): In diesem Szenario kann die Backplane ein Engpass sein, wenn die Anzahl der Nachrichten mit der Anzahl der Clients skaliert wird; das heißt, wenn die Nachrichtenrate proportional zunimmt, wenn mehr Clients beitreten.
  • Hochfrequenz-Echtzeit (z. B. Echtzeitspiele): Eine Backplane wird für dieses Szenario nicht empfohlen.

In dieser Übung verwenden Sie SQL Server, um Nachrichten in der Geek Quiz-Anwendung zu verteilen. Sie führen diese Aufgaben auf einem einzelnen Testcomputer aus, um zu erfahren, wie Sie die Konfiguration einrichten. Um jedoch den vollen Effekt zu erzielen, müssen Sie die SignalR-Anwendung auf zwei oder mehr Servern bereitstellen. Sie müssen auch SQL Server auf einem der Server oder auf einem separaten dedizierten Server installieren.

Scale Out Mit SQL Server Diagramm

Aufgabe 1: Grundlegendes zum Szenario

In dieser Aufgabe führen Sie 2 Instanzen von Geek Quiz aus, die mehrere IIS-Instanzen auf Ihrem lokalen Computer simulieren. In diesem Szenario wird das Update beim Beantworten von Trivia-Fragen für eine Anwendung nicht auf der Statistikseite des zweiten instance benachrichtigt. Diese Simulation ähnelt einer Umgebung, in der Ihre Anwendung in mehreren Instanzen bereitgestellt wird und für die Kommunikation mit ihnen ein Lastenausgleichsmodul verwendet wird.

  1. Öffnen Sie die Projektmappe Begin.sln im Ordner Source/Ex2-ScalingOutWithSQLServer/Begin . Nach dem Laden werden Sie auf dem Server Explorer feststellen, dass die Projektmappe über zwei Projekte mit identischen Strukturen, aber unterschiedlichen Namen verfügt. Dadurch wird die Ausführung von zwei Instanzen derselben Anwendung auf Ihrem lokalen Computer simuliert.

    Startlösung Simulating 2 Instanzen von Geek Quiz

    Starten der Lösung beim Simulieren von 2 Instanzen von Geek-Quiz

  2. Öffnen Sie die Eigenschaftenseite der Projektmappe, indem Sie mit der rechten Maustaste auf den Lösungsknoten klicken und Eigenschaften auswählen. Wählen Sie unter Startprojektdie Option Mehrere Startprojekte aus, und ändern Sie den Wert Aktion für beide Projekte in Start.

    Starten mehrerer Projekte

    Starten mehrerer Projekte

  3. Drücken Sie F5, um die Projektmappe auszuführen. Die Anwendung startet zwei Instanzen von Geek Quiz an verschiedenen Ports und simuliert mehrere Instanzen derselben Anwendung. Heften Sie einen der Browser links und den anderen auf der rechten Seite des Bildschirms an. Melden Sie sich mit Ihren Anmeldeinformationen an, oder registrieren Sie einen neuen Benutzer. Nachdem Sie angemeldet sind, behalten Sie die Trivia-Seite auf der linken Seite bei, und wechseln Sie im Browser auf der rechten Seite zur Seite Statistik .

    Geek-Quiz Nebeneinander

    Geek-Quiz Nebeneinander

    Geek-Quiz in verschiedenen Häfen

    Geek-Quiz in verschiedenen Häfen

  4. Beginnen Sie mit der Beantwortung von Fragen im linken Browser, und Sie werden feststellen, dass die Statistikseite im rechten Browser nicht aktualisiert wird. Dies liegt daran, dass SignalR einen lokalen Cache verwendet, um Nachrichten auf ihre Clients zu verteilen und in diesem Szenario mehrere Instanzen zu simulieren, sodass der Cache nicht für diese freigegeben wird. Sie können überprüfen, ob SignalR funktioniert, indem Sie die gleichen Schritte testen, aber eine einzelne App verwenden. In den folgenden Aufgaben konfigurieren Sie eine Backplane, um die Nachrichten instanzübergreifend zu replizieren.

  5. Zurück zu Visual Studio, und beenden Sie das Debuggen.

Aufgabe 2: Erstellen der SQL Server Backplane

In dieser Aufgabe erstellen Sie eine Datenbank, die als Backplane für die Geek Quiz-Anwendung dient. Sie verwenden SQL Server Objekt-Explorer, um Ihren Server zu durchsuchen und die Datenbank zu initialisieren. Darüber hinaus aktivieren Sie Service Broker.

  1. Öffnen Sie in Visual Studio das Menü Ansicht, und wählen Sie SQL Server Objekt-Explorer aus.

  2. Stellen Sie eine Verbindung mit Ihrem LocalDB-instance her, indem Sie mit der rechten Maustaste auf den Knoten SQL Server klicken und die Option SQL Server hinzufügen... auswählen.

    Hinzufügen einer SQL Server-Instanz

    Hinzufügen einer SQL Server instance zu SQL Server Objekt-Explorer

  3. Legen Sie den Servernamen auf (localdb)\v11.0 fest, und belassen Sie die Windows-Authentifizierung als Authentifizierungsmodus. Klicken Sie auf Verbinden , um den Vorgang fortzusetzen.

    Herstellen einer Verbindung mit LocalDB

    Herstellen einer Verbindung mit LocalDB

  4. Nachdem Sie nun mit Ihrem LocalDB-instance verbunden sind, müssen Sie eine Datenbank erstellen, die die SQL Server Backplane für SignalR darstellt. Klicken Sie hierzu mit der rechten Maustaste auf den Knoten Datenbanken , und wählen Sie Neue Datenbank hinzufügen aus.

    Hinzufügen einer neuen Datenbank

    Hinzufügen einer neuen Datenbank

  5. Legen Sie den Datenbanknamen auf SignalR fest, und klicken Sie auf OK , um ihn zu erstellen.

    Erstellen der SignalR-Datenbank

    Erstellen der SignalR-Datenbank

    Hinweis

    Sie können einen beliebigen Namen für die Datenbank auswählen.

  6. Um Updates effizienter von der Backplane zu empfangen, wird empfohlen, Service Broker für die Datenbank zu aktivieren. Service Broker bietet native Unterstützung für Messaging und Warteschlangen in SQL Server. Die Backplane funktioniert auch ohne Service Broker. Öffnen Sie eine neue Abfrage, indem Sie mit der rechten Maustaste auf die Datenbank klicken, und wählen Sie Neue Abfrage aus.

    Öffnen einer neuen Abfrage

    Öffnen einer neuen Abfrage

  7. Um zu überprüfen, ob Service Broker aktiviert ist, fragen Sie die spalte is_broker_enabled in der sys.databases-Katalogsicht ab. Führen Sie das folgende Skript im kürzlich geöffneten Abfragefenster aus.

    SELECT [name], [service_broker_guid], [is_broker_enabled] FROM [master].[sys].[databases]
    

    Abfragen des Service Broker-Status

    Abfragen des Service Broker-Status

  8. Wenn der Wert der is_broker_enabled Spalte in Ihrer Datenbank "0" ist, verwenden Sie den folgenden Befehl, um ihn zu aktivieren. Ersetzen Sie <YOUR-DATABASE> durch den Namen, den Sie beim Erstellen der Datenbank festgelegt haben (z. B. SignalR).

    ALTER DATABASE <YOUR-DATABASE> SET ENABLE_BROKER
    

    Aktivieren von Service Broker

    Aktivieren von Service Broker

    Hinweis

    Wenn diese Abfrage als Deadlock angezeigt wird, stellen Sie sicher, dass keine Anwendungen mit der Datenbank verbunden sind.

Aufgabe 3: Konfigurieren der SignalR-Anwendung

In dieser Aufgabe konfigurieren Sie Geek Quiz, um eine Verbindung mit der SQL Server Backplane herzustellen. Zuerst fügen Sie das NuGet-Paket SignalR.SqlServer hinzu und legen die Verbindungszeichenfolge auf Ihre Backplane-Datenbank fest.

  1. Öffnen Sie die Paket-Manager-Konsole unter Tools>NuGet-Paket-Manager. Stellen Sie sicher, dass das Projekt GeekQuiz in der Dropdownliste Standardprojekt ausgewählt ist. Geben Sie den folgenden Befehl ein, um das NuGet-Paket Microsoft.AspNet.SignalR.SqlServer zu installieren.

    Install-Package Microsoft.AspNet.SignalR.SqlServer
    
  2. Wiederholen Sie den vorherigen Schritt, aber dieses Mal für Projekt GeekQuiz2.

  3. Öffnen Sie zum Konfigurieren der SQL Server Backplane die Datei Startup.cs des GeekQuiz-Projekts, und fügen Sie der Configure-Methode den folgenden Code hinzu. Ersetzen Sie <YOUR-DATABASE> durch Ihren Datenbanknamen, den Sie beim Erstellen der SQL Server Backplane verwendet haben. Wiederholen Sie diesen Schritt für das GeekQuiz2-Projekt .

    (Codeausschnitt – RealTimeSignalr – Ex2 – StartupConfiguration)

    public class Startup 
    {   
        public void Configuration(IAppBuilder app) 
        {           
            var sqlConnectionString = @"Server=(localdb)\v11.0;Database=<YOUR-DATABASE>;Integrated Security=True;";
            GlobalHost.DependencyResolver.UseSqlServer(sqlConnectionString); 
            this.ConfigureAuth(app);
            app.MapSignalR();
        }
    }
    
  4. Nachdem beide Projekte nun für die Verwendung der SQL Server Backplane konfiguriert sind, drücken Sie F5, um sie gleichzeitig auszuführen.

  5. Auch hier startet Visual Studio zwei Instanzen von Geek Quiz an verschiedenen Ports. Heften Sie einen der Browser links und den anderen auf der rechten Seite des Bildschirms an, und melden Sie sich mit Ihren Anmeldeinformationen an. Behalten Sie die Seite Trivia auf der linken Seite bei, und wechseln Sie im rechten Browser zur Seite Statistik .

  6. Beginnen Sie mit der Beantwortung von Fragen im linken Browser. Dieses Mal wird die Statistikseite dank der Backplane aktualisiert. Wechseln Sie zwischen Anwendungen (Statistiken befindet sich jetzt auf der linken Seite und Trivia auf der rechten Seite), und wiederholen Sie den Test, um zu überprüfen, ob es für beide Instanzen funktioniert. Die Backplane dient als freigegebener Nachrichtencache für jeden verbundenen Server, und jeder Server speichert die Nachrichten in einem eigenen lokalen Cache, um sie an verbundene Clients zu verteilen.

  7. Zurück zu Visual Studio, und beenden Sie das Debuggen.

  8. Die SQL Server Backplane-Komponente generiert automatisch die erforderlichen Tabellen für die angegebene Datenbank. Öffnen Sie im bereich SQL Server Objekt-Explorer die Datenbank, die Sie für die Backplane erstellt haben (z. B. SignalR), und erweitern Sie deren Tabellen. Die folgenden Tabellen sollten angezeigt werden:

    Backplane-generierte Tabellen

    Backplane-generierte Tabellen

  9. Klicken Sie mit der rechten Maustaste auf die SignalR.Messages_0 Tabelle, und wählen Sie Daten anzeigen aus.

    Anzeigen der Tabelle

    Anzeigen der Tabelle "SignalR-Backplane-Nachrichten"

  10. Sie können die verschiedenen Nachrichten sehen, die an den Hub gesendet werden, wenn Sie die Trivia-Fragen beantworten. Die Backplane verteilt diese Nachrichten an alle verbundenen instance.

    Tabelle

    Tabelle "Backplane-Nachrichten"


Zusammenfassung

In diesem praktischen Lab haben Sie gelernt, wie Sie SignalR zu Ihrer Anwendung hinzufügen und Benachrichtigungen vom Server mithilfe von Hubs an Ihre verbundenen Clients senden. Darüber hinaus haben Sie gelernt, wie Sie Ihre Anwendung mithilfe einer Backplanekomponente aufskalieren, wenn Ihre Anwendung in mehreren IIS-Instanzen bereitgestellt wird.