Lernprogramm: Echtzeit-Chat mit SignalR 2

In diesem Lernprogramm wird gezeigt, wie Sie SignalR verwenden, um eine Echtzeit-Chatanwendung zu erstellen. Sie fügen SignalR zu einer leeren ASP.NET-Webanwendung hinzu und erstellen eine HTML-Seite zum Senden und Anzeigen von Nachrichten.

In diesem Tutorial:

  • Einrichten des Projekts
  • Ausführen des Beispiels
  • Untersuchen des Codes

Warnung

Diese Dokumentation ist nicht für die neueste Version von SignalR vorgesehen. Schauen Sie sich ASP.NET Core SignalR an.

Voraussetzungen

Einrichten des Projekts

In diesem Abschnitt wird gezeigt, wie Sie Visual Studio 2017 und SignalR 2 verwenden, um eine leere ASP.NET-Webanwendung zu erstellen, SignalR hinzuzufügen und die Chatanwendung zu erstellen.

  1. Erstellen Sie in Visual Studio eine ASP.NET Webanwendung.

    Web erstellen

  2. Lassen Sie im Fenster "Neues ASP.NET Projekt – SignalRChat" leer und wählen Sie "OK" aus.

  3. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie "Neues Elementhinzufügen>" aus.

  4. Wählen Sie in "Neues Element hinzufügen – SignalRChat" die Option "Installierte>Visual C#>Web>SignalR" aus, und wählen Sie dann " SignalR Hub-Klasse " (v2) aus.

  5. Benennen Sie den Kurs ChatHub , und fügen Sie es dem Projekt hinzu.

    Dieser Schritt erstellt die ChatHub.cs-Klassendatei und fügt einen Satz von Skriptdateien und Assemblybezügen hinzu, die SignalR für das Projekt unterstützen.

  6. Ersetzen Sie den Code in der neuen ChatHub.cs-Klassendatei durch diesen Code:

    using System;
    using System.Web;
    using Microsoft.AspNet.SignalR;
    namespace SignalRChat
    {
        public class ChatHub : Hub
        {
            public void Send(string name, string message)
            {
                // Call the broadcastMessage method to update clients.
                Clients.All.broadcastMessage(name, message);
            }
        }
    }
    
  7. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie "Neues Elementhinzufügen>" aus.

  8. Wählen Sie in "Neues Element hinzufügen" – SignalRChat " Installierte>Visual C#>Web " aus, und wählen Sie dann OWIN-Startklasse aus.

  9. Benennen Sie den Kursstart , und fügen Sie es dem Projekt hinzu.

  10. Ersetzen Sie den Standardcode in der Startklasse durch diesen Code:

    using Microsoft.Owin;
    using Owin;
    [assembly: OwinStartup(typeof(SignalRChat.Startup))]
    namespace SignalRChat
    {
        public class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                // Any connection or hub wire up and configuration should go here
                app.MapSignalR();
            }
        }
    }
    
  11. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie"HTML-Seitehinzufügen>" aus.

  12. Benennen Sie den neuen Seitenindex , und wählen Sie "OK" aus.

  13. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die von Ihnen erstellte HTML-Seite, und wählen Sie "Als Startseite festlegen" aus.

  14. Ersetzen Sie den Standardcode auf der HTML-Seite durch diesen Code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>SignalR Simple Chat</title>
        <style type="text/css">
            .container {
                background-color: #99CCFF;
                border: thick solid #808080;
                padding: 20px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <input type="text" id="message" />
            <input type="button" id="sendmessage" value="Send" />
            <input type="hidden" id="displayname" />
            <ul id="discussion">
            </ul>
        </div>
        <!--Script references. -->
        <!--Reference the jQuery library. -->
        <script src="Scripts/jquery-3.1.1.min.js" ></script>
        <!--Reference the SignalR library. -->
        <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="signalr/hubs"></script>
        <!--Add script to update the page and send messages.--> 
        <script type="text/javascript">
            $(function () {
                // Declare a proxy to reference the hub. 
                var chat = $.connection.chatHub;
                // Create a function that the hub can call to broadcast messages.
                chat.client.broadcastMessage = function (name, message) {
                    // Html encode display name and message. 
                    var encodedName = $('<div />').text(name).html();
                    var encodedMsg = $('<div />').text(message).html();
                    // Add the message to the page. 
                    $('#discussion').append('<li><strong>' + encodedName
                        + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
                };
                // Get the user name and store it to prepend to messages.
                $('#displayname').val(prompt('Enter your name:', ''));
                // Set initial focus to message input box.  
                $('#message').focus();
                // Start the connection.
                $.connection.hub.start().done(function () {
                    $('#sendmessage').click(function () {
                        // Call the Send method on the hub. 
                        chat.server.send($('#displayname').val(), $('#message').val());
                        // Clear text box and reset focus for next comment. 
                        $('#message').val('').focus();
                    });
                });
            });
        </script>
    </body>
    </html>
    
  15. Erweitern Sie in Projektmappen-ExplorerSkripts.

    Skriptbibliotheken für jQuery und SignalR sind im Projekt sichtbar.

    Wichtig

    Der Paket-Manager hat möglicherweise eine spätere Version der SignalR-Skripts installiert.

  16. Überprüfen Sie, ob die Skriptbezüge im Codeblock den Versionen der Skriptdateien im Projekt entsprechen.

    Skriptbezüge aus dem ursprünglichen Codeblock:

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js" ></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    
  17. Wenn sie nicht übereinstimmen, aktualisieren Sie die .html Datei.

  18. Wählen Sie in der Menüleiste " Alle speichern>" aus.

Ausführen des Beispiels

  1. Aktivieren Sie in der Symbolleiste das Skriptdebugging , und wählen Sie dann die Wiedergabeschaltfläche aus, um das Beispiel im Debugmodus auszuführen.

    Geben Sie den Benutzernamen ein.

  2. Wenn der Browser geöffnet wird, geben Sie einen Namen für Ihre Chatidentität ein.

  3. Kopieren Sie die URL aus dem Browser, öffnen Sie zwei andere Browser, und fügen Sie die URLs in die Adressleisten ein.

  4. Geben Sie in jedem Browser einen eindeutigen Namen ein.

  5. Fügen Sie nun einen Kommentar hinzu, und wählen Sie "Senden" aus. Wiederholen Sie dies in den anderen Browsern. Die Kommentare werden in Echtzeit angezeigt.

    Hinweis

    Diese einfache Chatanwendung behält den Diskussionskontext auf dem Server nicht auf. Der Hub sendet Kommentare an alle aktuellen Benutzer. Benutzer, die später an dem Chat teilnehmen, werden Nachrichten angezeigt, die von der Teilnahme an nachrichten hinzugefügt werden.

    Erfahren Sie, wie die Chatanwendung in drei verschiedenen Browsern ausgeführt wird. Wenn Tom, Anand und Susan Nachrichten senden, aktualisieren alle Browser in Echtzeit:

    Alle drei Browser zeigen den gleichen Chatverlauf an

  6. Überprüfen Sie in Projektmappen-Explorer den Knoten "Skriptdokumente" für die ausgeführte Anwendung. Es gibt eine Skriptdatei namens Hubs , die die SignalR-Bibliothek zur Laufzeit generiert. Diese Datei verwaltet die Kommunikation zwischen jQuery-Skript und serverseitigem Code.

    Automatisch generiertes Hubskript im Knoten

Überprüfen des Codes

Die SignalRChat-Anwendung veranschaulicht zwei grundlegende SignalR-Entwicklungsaufgaben. Es zeigt Ihnen, wie Sie einen Hub erstellen. Der Server verwendet diesen Hub als Hauptkoordinationsobjekt. Der Hub verwendet die SignalR jQuery-Bibliothek, um Nachrichten zu senden und zu empfangen.

SignalR Hubs im ChatHub.cs

Im obigen Codebeispiel wird die ChatHub Klasse von der Microsoft.AspNet.SignalR.Hub Klasse abgeleitet. Die Ableitung von der Hub Klasse ist eine nützliche Möglichkeit zum Erstellen einer SignalR-Anwendung. Sie können öffentliche Methoden in Ihrer Hubklasse erstellen und dann diese Methoden verwenden, indem Sie sie aus Skripts in einer Webseite aufrufen.

Im Chatcode rufen Clients die ChatHub.Send Methode auf, um eine neue Nachricht zu senden. Der Hub sendet dann die Nachricht an alle Clients, indem sie aufrufen Clients.All.broadcastMessage.

Die Send Methode veranschaulicht mehrere Hubkonzepte:

  • Deklarieren Sie öffentliche Methoden auf einem Hub, sodass Clients sie aufrufen können.

  • Verwenden Sie die dynamische Eigenschaft, um mit allen Clients zu kommunizieren, die Microsoft.AspNet.SignalR.Hub.Clients mit diesem Hub verbunden sind.

  • Rufen Sie eine Funktion auf dem Client (wie die broadcastMessage Funktion) auf, um Clients zu aktualisieren.

    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcastMessage method to update clients.
            Clients.All.broadcastMessage(name, message);
        }
    }
    

SignalR und jQuery im index.html

Die index.html Seite im Codebeispiel zeigt, wie die SignalR jQuery-Bibliothek verwendet wird, um mit einem SignalR-Hub zu kommunizieren. Der Code führt viele wichtige Aufgaben aus. Er deklariert einen Proxy, um auf den Hub zu verweisen, deklariert eine Funktion, die der Server aufrufen kann, um Inhalte an Clients zu pushen, und es startet eine Verbindung zum Senden von Nachrichten an den Hub.

var chat = $.connection.chatHub;

Hinweis

In JavaScript muss der Verweis auf die Serverklasse und deren Mitglieder kamelCase sein. Das Codebeispiel verweist auf die C# ChatHub-Klasse in JavaScript als chatHub.

In diesem Codeblock erstellen Sie eine Rückruffunktion im Skript.

chat.client.broadcastMessage = function (name, message) {
        // Html encode display name and message. 
        var encodedName = $('<div />').text(name).html();
        var encodedMsg = $('<div />').text(message).html();
        // Add the message to the page. 
        $('#discussion').append('<li><strong>' + encodedName
            + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
    };

Die Hubklasse auf dem Server ruft diese Funktion auf, um Inhaltsupdates an jeden Client zu pushen. Die beiden Zeilen, die html-codieren, bevor sie angezeigt werden, sind optional und zeigen eine gute Möglichkeit, die Skripteinführung zu verhindern.

Dieser Code öffnet eine Verbindung mit dem Hub.

$.connection.hub.start().done(function () {
        $('#sendmessage').click(function () {
            // Call the Send method on the hub. 
            chat.server.send($('#displayname').val(), $('#message').val());
            // Clear text box and reset focus for next comment. 
            $('#message').val('').focus();
        });
    });

Hinweis

Dieser Ansatz stellt sicher, dass der Code eine Verbindung erstellt, bevor der Ereignishandler ausgeführt wird.

Der Code startet die Verbindung und übergibt dann eine Funktion, um das Klickereignis auf der SCHALTFLÄCHE "Senden " auf der HTML-Seite zu behandeln.

Beziehen des Codes

Abgeschlossenes Projekt herunterladen

Zusätzliche Ressourcen

Weitere Informationen zu SignalR finden Sie in den folgenden Ressourcen:

Nächste Schritte

In diesem Tutorial führen Sie Folgendes durch:

  • Einrichten des Projekts
  • Führen Sie das Beispiel aus.
  • Untersuchte den Code

Wechseln Sie zum nächsten Artikel, um zu erfahren, wie Sie SignalR und MVC 5 verwenden.