Tutorial: Echt Zeit Chat mit signalr 2Tutorial: Real-time chat with SignalR 2

In diesem Tutorial wird gezeigt, wie Sie signalr verwenden, um eine echt Zeit Chat-Anwendung zu erstellen.This tutorial shows you how to use SignalR to create a real-time chat application. Sie fügen signalr einer leeren ASP.NET-Webanwendung hinzu und erstellen eine HTML-Seite, um Nachrichten zu senden und anzuzeigen.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
  • BeispielausführungRun the sample
  • Untersuchen des CodesExamine 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.

Erforderliche VoraussetzungenPrerequisites

Einrichten des ProjektsSet up the Project

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.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 in Visual Studio eine ASP.NET-Webanwendung.In Visual Studio, create an ASP.NET Web Application.

    Web erstellen

  2. Lassen Sie im Fenster New ASP.net Project-signalrchat den Eintrag leer , und wählen Sie OKaus.In the New ASP.NET Project - SignalRChat window, leave Empty selected and select OK.

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

  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.In Add New Item - SignalRChat, select Installed > Visual C# > Web > SignalR and then select SignalR Hub Class (v2).

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

    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.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 durch den 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. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie > Neues Element Hinzufügen aus.In Solution Explorer, right-click the project and select Add > New Item.

  8. Wählen Sie in Neues Element hinzufügen-signalrchat die Option installiert > Visual C# > Web aus, und wählen Sie dann owin-StartklasseIn Add New Item - SignalRChat select Installed > Visual C# > Web and then select OWIN Startup Class.

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

  10. Ersetzen Sie den Standard Code in der Startup -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. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und wählen Sie > HTML-Seite Hinzufügen .In Solution Explorer, right-click the project and select Add > HTML Page.

  12. Benennen Sie den neuen Seiten Index , und wählen Sie OKaus.Name the new page index and select OK.

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

  14. Ersetzen Sie den Standard Code in der HTML-Seite durch 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. Erweitern Sie in Projektmappen-Explorerden Eintrag Skripts.In Solution Explorer, expand Scripts.

    Skript Bibliotheken für jQuery und signalr sind im Projekt sichtbar.Script libraries for jQuery and SignalR are visible in the project.

    Important

    Der Paket-Manager hat möglicherweise eine neuere Version der signalr-Skripts installiert.The package manager may have installed a later version of the SignalR scripts.

  16. Überprüfen Sie, ob die Skript Verweise im Codeblock den 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.

    Skript Verweise aus dem 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 keine Entsprechung gefunden wird, aktualisieren Sie die HTML -Datei.If they don't match, update the .html file.

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

Ausführen des BeispielsRun the Sample

  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.In the toolbar, turn on Script Debugging and then select the play button to run the sample in Debug mode.

    Benutzernamen eingeben

  2. Wenn der Browser geöffnet wird, geben Sie einen Namen für Ihre Chat Identität ein.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 Adressleiste ein.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 hinzu, und wählen Sie sendenaus.Now, add a comment and select Send. Wiederholen Sie diesen Vorgang 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 Chat-Anwendung behält den Diskussions Kontext auf dem Server nicht bei.This simple chat application does not maintain the discussion context on the server. Der Hub überträgt Kommentare an alle aktuellen Benutzer.The hub broadcasts comments to all current users. Benutzer, die später dem Chat beitreten, sehen die Nachrichten, die ab dem Zeitpunkt der Verknüpfung hinzugefügt werden.Users who join the chat later will see messages added from the time they join.

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

    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.In Solution Explorer, inspect the Script Documents node for the running application. Es gibt eine Skriptdatei mit dem Namen Hubs , die die 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 dem jQuery-Skript und dem serverseitigen Code.This file manages the communication between jQuery script and server-side code.

    automatisch generiertes Hubs-Skript im Knoten "Skript Dokumente"

Untersuchen des CodesExamine the Code

In der signalrchat-Anwendung werden zwei grundlegende signalr-Entwicklungsaufgaben veranschaulicht.The SignalRChat application demonstrates two basic SignalR development tasks. Es zeigt, wie Sie einen Hub erstellen.It shows you how to create a hub. Der Server verwendet diesen Hub als hauptkoordinations Objekt.The server uses that hub as the main coordination object. Der Hub verwendet die signalr jQuery-Bibliothek, um Nachrichten zu senden und zu empfangen.The hub uses the SignalR jQuery library to send and receive messages.

Signalr Hubs in ChatHub.csSignalR Hubs in the ChatHub.cs

Im obigen Codebeispiel wird die ChatHub-Klasse von der Microsoft.AspNet.SignalR.Hub-Klasse abgeleitet.In the code sample above, the ChatHub class derives from the Microsoft.AspNet.SignalR.Hub class. Das Ableiten von der Hub-Klasse ist eine nützliche Möglichkeit zum Erstellen einer signalr-Anwendung.Deriving from the Hub class is a useful way to build a SignalR application. Sie können öffentliche Methoden für Ihre hubklasse erstellen und dann diese Methoden verwenden, indem Sie Sie aus Skripts auf einer Webseite aufrufen.You can create public methods on your hub class and then use those methods by calling them from scripts in a web page.

Im chatcode wird die ChatHub.Send-Methode aufgerufen, um eine neue Nachricht zu senden.In the chat code, clients call the ChatHub.Send method to send a new message. Der Hub sendet die Nachricht dann an alle Clients, indem Clients.All.broadcastMessageaufgerufen wird.The hub then sends the message to all clients by calling Clients.All.broadcastMessage.

Die Send-Methode veranschaulicht verschiedene Hub-Konzepte:The Send method demonstrates several hub concepts:

  • Deklarieren Sie öffentliche Methoden auf einem Hub, damit Sie von Clients aufgerufen werden können.Declare public methods on a hub so that clients can call them.

  • Verwenden Sie die dynamische Microsoft.AspNet.SignalR.Hub.Clients-Eigenschaft, um mit allen Clients zu kommunizieren, die mit diesem Hub verbunden sind.Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to communicate with all clients connected to this hub.

  • Es wird eine Funktion auf dem Client aufgerufen (z. b. die broadcastMessage Funktion), um Clients zu aktualisieren.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 Datei "index. html"SignalR and jQuery in the index.html

Die Seite " Index. html " im Codebeispiel zeigt, wie die signalr jQuery-Bibliothek für die Kommunikation mit einem signalr-Hub verwendet wird.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 aus.The code carries out many important tasks. 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.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 Serverklasse und deren Member "CamelCase" lauten.In JavaScript the reference to the server class and its members has to be camelCase. Das Codebeispiel verweist auf C# die chathub -Klasse in JavaScript, wie chatHub.The code sample references the C# ChatHub class in JavaScript as chatHub.

In diesem Codeblock erstellen Sie eine Rückruffunktion 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 Hub-Klasse auf dem Server ruft diese Funktion auf, um Inhalts Aktualisierungen an jeden Client zu übernehmen.The hub class on the server calls this function to push content updates to each client. 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.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

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

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.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

Herunterladen des abgeschlossenen ProjektsDownload Completed Project

Weitere 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 erfahren Sie Folgendes:In this tutorial you:

  • Einrichten des ProjektsSet up the project
  • Das Beispiel ausgeführtRan the sample
  • Untersuchen des CodesExamined the code

Fahren Sie mit dem nächsten Artikel fort, um zu erfahren, wie Sie signalr und MVC 5 verwenden.Advance to the next article to learn how to use SignalR and MVC 5.