Tutorial: Echt Zeit Chat mit signalr 2

In diesem Tutorial wird gezeigt, wie Sie signalr verwenden, um eine echt Zeit Chat-Anwendung zu erstellen. Sie fügen signalr einer leeren ASP.NET-Webanwendung hinzu und erstellen eine HTML-Seite, um Nachrichten zu senden und anzuzeigen.

In diesem Tutorial führen Sie Folgendes durch:

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

Warning

Diese Dokumentation ist nicht für die neueste Version von signalr vorgesehen. Sehen Sie sich ASP.net Core signalran.

Voraussetzungen

Einrichten des Projekts

In diesem Abschnitt wird gezeigt, wie Sie mit Visual Studio 2017 und signalr 2 eine leere ASP.NET-Webanwendung erstellen, signalr hinzufügen und die Chat-Anwendung erstellen.

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

    Web erstellen

  2. Lassen Sie im Fenster New ASP.net Project-signalrchat den Eintrag leer , und wählen Sie OKaus.

  3. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie > Neues Element Hinzufügen aus.

  4. Wählen Sie unter Neues Element hinzufügen-signalrchatdie Option installiert > Visual C# > Web > signalr aus, und wählen Sie dann signalr Hub-Klasse (v2) aus.

  5. Benennen Sie die Klasse chathub , und fügen Sie Sie dem Projekt hinzu.

    In diesem Schritt wird die ChatHub.cs -Klassendatei erstellt, und dem Projekt wird ein Satz von Skriptdateien und Assemblyverweisen hinzugefügt, die signalr unterstützen.

  6. Ersetzen Sie den Code in der neuen ChatHub.cs -Klassendatei durch den folgenden 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-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie > Neues Element Hinzufügen aus.

  8. Wählen Sie in Neues Element hinzufügen-signalrchat die Option installiert > Visual C# > Web aus, und wählen Sie dann owin-Startklasse

  9. Benennen Sie die Klasse Startup , und fügen Sie Sie dem Projekt hinzu.

  10. Ersetzen Sie den Standard Code in der Startup -Klasse durch den folgenden 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-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie > HTML-Seite Hinzufügen .

  12. Benennen Sie den neuen Seiten Index , und wählen Sie OKaus.

  13. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf die erstellte HTML-Seite, und wählen Sie als Start Seite festlegenaus.

  14. Ersetzen Sie den Standard Code in der HTML-Seite durch folgenden 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-Explorerden Eintrag Skripts.

    Skript Bibliotheken für jQuery und signalr sind im Projekt sichtbar.

    Important

    Der Paket-Manager hat möglicherweise eine neuere Version der signalr-Skripts installiert.

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

    Skript Verweise 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 keine Entsprechung gefunden wird, aktualisieren Sie die HTML -Datei.

  18. Wählen Sie in der Menüleiste Datei > Alle speichernaus.

Ausführen des Beispiels

  1. Aktivieren Sie auf der Symbolleiste das Skript Debugging , und wählen Sie dann die Schaltfläche wiedergeben aus, um das Beispiel im Debugmodus auszuführen.

    Benutzername eingeben

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

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

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

  5. Fügen Sie nun einen Kommentar hinzu, und wählen Sie sendenaus. Wiederholen Sie diesen Vorgang in den anderen Browsern. Die Kommentare werden in Echtzeit angezeigt.

    Note

    Diese einfache Chat-Anwendung behält den Diskussions Kontext auf dem Server nicht bei. Der Hub überträgt Kommentare an alle aktuellen Benutzer. Benutzer, die später dem Chat beitreten, sehen die Nachrichten, die ab dem Zeitpunkt der Verknüpfung hinzugefügt werden.

    Sehen Sie, wie die Chat-Anwendung in drei verschiedenen Browsern ausgeführt wird. Wenn Tom, Anand und Susan Nachrichten senden, werden alle Browser in Echtzeit aktualisiert:

    Alle drei Browser zeigen denselben Chatverlauf an.

  6. Überprüfen Sie in Projektmappen-Explorerden Knoten Skript Dokumente für die Anwendung, die ausgeführt wird. Es gibt eine Skriptdatei mit dem Namen Hubs , die die signalr-Bibliothek zur Laufzeit generiert. Diese Datei verwaltet die Kommunikation zwischen dem jQuery-Skript und dem serverseitigen Code.

    automatisch generiertes Hubs-Skript im Knoten "Skript Dokumente"

Untersuchen des Codes

In der signalrchat-Anwendung werden zwei grundlegende signalr-Entwicklungsaufgaben veranschaulicht. Es zeigt, wie Sie einen Hub erstellen. Der Server verwendet diesen Hub als hauptkoordinations Objekt. Der Hub verwendet die signalr jQuery-Bibliothek, um Nachrichten zu senden und zu empfangen.

Signalr Hubs in ChatHub.cs

Im obigen Codebeispiel wird die ChatHub-Klasse von der Microsoft.AspNet.SignalR.Hub-Klasse abgeleitet. Das Ableiten von der Hub-Klasse ist eine nützliche Möglichkeit zum Erstellen einer signalr-Anwendung. Sie können öffentliche Methoden für Ihre hubklasse erstellen und dann diese Methoden verwenden, indem Sie Sie aus Skripts auf einer Webseite aufrufen.

Im chatcode wird die ChatHub.Send-Methode aufgerufen, um eine neue Nachricht zu senden. Der Hub sendet die Nachricht dann an alle Clients, indem Clients.All.broadcastMessageaufgerufen wird.

Die Send-Methode veranschaulicht verschiedene Hub-Konzepte:

  • Deklarieren Sie öffentliche Methoden auf einem Hub, damit Sie von Clients aufgerufen werden können.

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

  • Es wird eine Funktion auf dem Client aufgerufen (z. b. die broadcastMessage Funktion), 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 in der Datei "index. html"

Die Seite " Index. html " im Codebeispiel zeigt, wie die signalr jQuery-Bibliothek für die Kommunikation mit einem signalr-Hub verwendet wird. Der Code führt viele wichtige Aufgaben aus. Er deklariert einen Proxy, der auf den Hub verweist, deklariert eine Funktion, die der Server zum Übertragen von Inhalten an Clients senden kann, und startet eine Verbindung, um Nachrichten an den Hub zu senden.

var chat = $.connection.chatHub;

Note

In JavaScript muss der Verweis auf die Serverklasse und deren Member "CamelCase" lauten. Das Codebeispiel verweist auf C# die chathub -Klasse in JavaScript, wie 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 Hub-Klasse auf dem Server ruft diese Funktion auf, um Inhalts Aktualisierungen an jeden Client zu übernehmen. Die beiden Zeilen, in denen der Inhalt vor der Anzeige HTML-codiert wird, sind optional und weisen eine gute Möglichkeit zum Verhindern von Skript Einschleusungen auf.

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();
        });
    });

Note

Mit diesem Ansatz wird sichergestellt, dass der Code eine Verbindung herstellt, bevor der Ereignishandler ausgeführt wird.

Der Code startet die Verbindung und übergibt dann eine Funktion, um das Click-Ereignis in der Schaltfläche " senden " auf der HTML-Seite zu verarbeiten.

Abrufen des Codes

Herunterladen des abgeschlossenen Projekts

Zusätzliche Ressourcen

Weitere Informationen zu signalr finden Sie in den folgenden Ressourcen:

Nächste Schritte

In diesem Tutorial erfahren Sie Folgendes:

  • Einrichten des Projekts
  • Das Beispiel ausgeführt
  • Untersuchen des Codes

Fahren Sie mit dem nächsten Artikel fort, um zu erfahren, wie Sie signalr und MVC 5 verwenden.