Tutorial: Chatten in Echtzeit mit SignalR 2Tutorial: Real-time chat with SignalR 2

In diesem Tutorial erfahren Sie, wie mit SignalR eine chatanwendung mit Echtzeitfunktionalität erstellen können.This tutorial shows you how to use SignalR to create a real-time chat application. Sie SignalR eine leere ASP.NET-Webanwendung hinzufügen und erstellen Sie eine HTML-Seite zum Senden und Meldungen angezeigt werden.You add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

In diesem Tutorial:In this tutorial, you:

  • Einrichten des ProjektsSet up the project
  • Ausführen des BeispielsRun the sample
  • Überprüfen Sie den codeExamine the code

Warning

Diese Dokumentation ist nicht für die neueste Version von SignalR.This documentation isn't for the latest version of SignalR. Sehen Sie sich ASP.NET Core SignalR.Take a look at ASP.NET Core SignalR.

VorraussetzungenPrerequisites

Einrichten des ProjektsSet up the Project

Fügen Sie in diesem Abschnitt zeigt, wie Sie Visual Studio 2017 und SignalR 2 verwenden, um eine leere ASP.NET-Webanwendung erstellen SignalR hinzu, und erstellen Sie die chatanwendung.This section shows how to use Visual Studio 2017 and SignalR 2 to create an empty ASP.NET web application, add SignalR, and create the chat application.

  1. Erstellen Sie eine ASP.NET-Webanwendung in Visual Studio.In Visual Studio, create an ASP.NET Web Application.

    Erstellen Sie web

  2. In der neues ASP.NET-Projekt – SignalRChat Fenster verlassen leere ausgewählt, und wählen Sie OK.In the New ASP.NET Project - SignalRChat window, leave Empty selected and select OK.

  3. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie hinzufügen > neues Element.In Solution Explorer, right-click the project and select Add > New Item.

  4. In neues Element hinzufügen - SignalRChatOption installiert > Visual C# > Web > SignalR und wählen Sie dann SignalR-Hubklasse (v2).In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

  5. Nennen Sie die Klasse ChatHub und fügen sie dem Projekt hinzu.Name the class ChatHub and add it to the project.

    Dieser Schritt erstellt der ChatHub.cs Klassendatei, und fügt einen Satz von Skriptdateien und Assemblyverweise, die dem Projekt SignalR unterstützen.This step creates the ChatHub.cs class file and adds a set of script files and assembly references that support SignalR to the project.

  6. Ersetzen Sie den Code in der neuen ChatHub.cs Klassendatei mit dem folgenden Code:Replace the code in the new ChatHub.cs class file with this 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. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie hinzufügen > neues Element.In Solution Explorer, right-click the project and select Add > New Item.

  8. In neues Element hinzufügen - SignalRChat wählen installiert > Visual C# > Web und klicken Sie dann Wählen Sie OWIN-Startklasse.In Add New Item - SignalRChat select Installed > Visual C# > Web and then select OWIN Startup Class.

  9. Nennen Sie die Klasse Start und fügen sie dem Projekt hinzu.Name the class Startup and add it to the project.

  10. Ersetzen Sie den Standardcode in Start Klasse durch den folgenden Code:Replace the default code in Startup class with this 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. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie hinzufügen > HTML-Seite.In Solution Explorer, right-click the project and select Add > HTML Page.

  12. Nennen Sie die neue Seite Index , und wählen Sie OK.Name the new page index and select OK.

  13. In Projektmappen-Explorermit der rechten Maustaste auf die HTML-Seite, die Sie erstellt haben, und wählen Sie als Startseite festlegen.In Solution Explorer, right-click the HTML page you created and select Set as Start Page.

  14. Ersetzen Sie den Standardcode in der HTML-Seite mit dem folgenden Code:Replace the default code in the HTML page with this 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. In Projektmappen-Explorer, erweitern Sie Skripts.In Solution Explorer, expand Scripts.

    Skriptbibliotheken für jQuery und SignalR werden in das Projekt angezeigt.Script libraries for jQuery and SignalR are visible in the project.

    Important

    Der Paket-Manager möglicherweise eine höhere Version von SignalR-Skripts installiert.The package manager may have installed a later version of the SignalR scripts.

  16. Überprüfen Sie, dass die Skriptverweise im Codeblock auf die Versionen der Skriptdateien im Projekt entsprechen.Check that the script references in the code block correspond to the versions of the script files in the project.

    Die Skriptverweise aus der ursprünglichen Codeblock:Script references from the original code block:

    <!--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.If they don't match, update the .html file.

  18. Wählen Sie in der Menüleiste Datei > Alles speichern.From the menu bar, select File > Save All.

Ausführen des BeispielsRun the Sample

  1. In der Symbolleiste aktivieren Skriptdebugging und wählen Sie dann auf die entsprechende Schaltfläche, um das Beispiel im Debugmodus auszuführen.In the toolbar, turn on Script Debugging and then select the play button to run the sample in Debug mode.

    Benutzername eingeben

  2. Wenn der Browser geöffnet wird, geben Sie einen Namen für Ihre Chat-Identität aus.When the browser opens, enter a name for your chat identity.

  3. Kopieren Sie die URL aus dem Browser, öffnen Sie zwei andere Browser, und fügen Sie die URLs in die Adresse leisten.Copy the URL from the browser, open two other browsers, and paste the URLs into the address bars.

  4. Geben Sie in jedem Browser einen eindeutigen Namen ein.In each browser, enter a unique name.

  5. Fügen Sie nun einen Kommentar, und wählen senden.Now, add a comment and select Send. Wiederholen Sie, die in den anderen Browsern.Repeat that in the other browsers. Die Kommentare werden in Echtzeit angezeigt.The comments appear in real-time.

    Note

    Diese einfache chatanwendung werden den Kontext der Diskussion auf dem Server nicht verwaltet werden.This simple chat application does not maintain the discussion context on the server. Der Hub sendet, Kommentare, um alle aktuellen Benutzer.The hub broadcasts comments to all current users. Benutzer, die im Chat später zusammenfügen sehen, dass Nachrichten ab dem Zeitpunkt hinzugefügt werden, dass sie aufgenommen werden.Users who join the chat later will see messages added from the time they join.

    Sehen Sie, wie der Chat-Anwendung in drei verschiedenen Browsern ausgeführt wird.See how the chat application runs in three different browsers. Beim Tom, Anand und Susan Senden von Nachrichten von allen Browsern, die in Echtzeit aktualisiert werden:When Tom, Anand, and Susan send messages, all browsers update in real time:

    Alle drei in Browsern angezeigt, den gleichen Chatverlauf

  6. In Projektmappen-Explorer, überprüfen Sie die Skriptdokumente Knoten für die ausgeführte Anwendung.In Solution Explorer, inspect the Script Documents node for the running application. Es gibt eine Skriptdatei namens Hubs , die den SignalR-Bibliothek zur Laufzeit generiert.There's a script file named hubs that the SignalR library generates at runtime. Diese Datei, verwaltet die Kommunikation zwischen der jQuery-Skripts und serverseitigen Code.This file manages the communication between jQuery script and server-side code.

    automatisch generierte-Hubs-Skript im Knoten "Skriptdokumente"

Überprüfen Sie den CodeExamine the Code

Die Anwendung SignalRChat veranschaulicht zwei grundlegende Aufgaben für die SignalR-Entwicklung.The SignalRChat application demonstrates two basic SignalR development tasks. Es veranschaulicht einen Hub erstellen.It shows you how to create a hub. Der Server verwendet den Hub als Haupt-Coordination-Objekt.The server uses that hub as the main coordination object. Der Hub verwendet die SignalR-jQuery-Bibliothek zum Senden und Empfangen von Nachrichten an.The hub uses the SignalR jQuery library to send and receive messages.

SignalR-Hubs in der ChatHub.csSignalR Hubs in the ChatHub.cs

Im obigen Codebeispiel die ChatHub Klasse leitet sich von der Microsoft.AspNet.SignalR.Hub Klasse.In the code sample above, the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Ableiten von der Hub Klasse ist eine gute Möglichkeit, eine SignalR-Anwendung zu erstellen.Deriving from the Hub class is a useful way to build a SignalR application. Sie können öffentliche Methoden auf Ihrem Hub-Klasse erstellen und dann diese Methoden durch einen Aufruf über Skripts auf einer Webseite.You can create public methods on your hub class and then use those methods by calling them from scripts in a web page.

Im Code Chat Clients rufen die ChatHub.Send Methode, um eine neue Nachricht zu senden.In the chat code, clients call the ChatHub.Send method to send a new message. Der Hub sendet dann die Nachricht an alle Clients durch den Aufruf Clients.All.broadcastMessage.The hub then sends the message to all clients by calling Clients.All.broadcastMessage.

Die Send -Methode demonstriert, mehrere Hub-Konzepte:The Send method demonstrates several hub concepts:

  • Deklarieren Sie öffentliche Methoden für einen Hub, damit Clients, die sie aufrufen können.Declare public methods on a hub so that clients can call them.

  • Verwenden der Microsoft.AspNet.SignalR.Hub.Clients dynamische Eigenschaft für die Kommunikation mit allen Clients, die mit diesem Hub verbunden sind.Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to communicate with all clients connected to this hub.

  • Aufrufen einer Funktion auf dem Client (z. B. die broadcastMessage Funktion) zum Aktualisieren von Clients.Call a function on the client (like the broadcastMessage function) to update clients.

    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 "Index.HTML"SignalR and jQuery in the index.html

Die "Index.HTML" Seite im Codebeispiel zeigt, wie die SignalR-jQuery-Bibliothek, die zur Kommunikation mit einer SignalR-Hub verwenden.The index.html page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. Der Code führt viele wichtige Aufgaben.The code carries out many important tasks. Er deklariert einen Proxy für den Hub zu verweisen, deklariert eine Funktion, dass der Server, das Sie, um die pushübertragung von Inhalten an Clients aufrufen kann, und sie eine Verbindung zum Senden von Nachrichten an den Hub beginnt.It declares a proxy to reference the hub, declares a function that the server can call to push content to clients, and it starts a connection to send messages to the hub.

var chat = $.connection.chatHub;

Note

In JavaScript muss der Verweis auf die Server-Klasse und ihre Member CamelCase sein.In JavaScript the reference to the server class and its members has to be camelCase. Das Beispiel verweist auf die C# ChatHub Klasse in JavaScript als chatHub.The code sample references the C# ChatHub class in JavaScript as chatHub.

In diesem Codeblock erstellen Sie eine Callback-Funktion im Skript.In this code block, you create a callback function in the script.

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, um Inhaltsupdates per Pushvorgang an jeden Client übertragen.The hub class on the server calls this function to push content updates to each client. Die beiden Linien, HTML-Codierung der Inhalt vor der Anzeige sind optional, und zeigen eine gute Möglichkeit, Script-Injection verhindern.The two lines that HTML-encode the content before displaying it are optional and show a good way to prevent script injection.

Dieser Code öffnet eine Verbindung mit dem Hub.This code opens a connection with the 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

Dieser Ansatz wird sichergestellt, dass der Code eine Verbindung hergestellt wird, bevor der Ereignishandler ausgeführt wird.This approach ensures that the code establishes a connection before the event handler executes.

Der Code wird die Verbindung gestartet und leitet diese dann in eine Funktion zum Behandeln der Click-Ereignis auf der senden auf der HTML-Seite.The code starts the connection and then passes it a function to handle the click event on the Send button in the HTML page.

Abrufen des CodesGet the code

Abgeschlossenes Projekt herunterladenDownload Completed Project

Zusätzliche RessourcenAdditional resources

Weitere Informationen zu SignalR finden Sie in den folgenden Ressourcen:For more about SignalR, see the following resources:

Nächste SchritteNext steps

In diesem Tutorial Sie:In this tutorial you:

  • Einrichten des ProjektsSet up the project
  • Das Beispiel ausgeführtRan the sample
  • Überprüft den codeExamined the code

Wechseln Sie zum nächsten Artikel erfahren, wie SignalR und MVC 5 verwendet.Advance to the next article to learn how to use SignalR and MVC 5.