Tutorial: Erste Schritte mit SignalR 2Tutorial: Getting Started with SignalR 2

durch Patrick Fletcherby Patrick Fletcher

Abgeschlossenes Projekt herunterladenDownload Completed Project

Dieses Tutorial zeigt, wie Sie mithilfe von SignalR eine Chatanwendung mit Echtzeitfunktionalität erstellen.This tutorial shows how to use SignalR to create a real-time chat application. Sie werden eine leere ASP.NET-Webanwendung SignalR hinzu, und erstellen Sie eine HTML-Seite zum Senden und Meldungen angezeigt werden.You will add SignalR to an empty ASP.NET web application and create an HTML page to send and display messages.

Softwareversionen, die in diesem Tutorial verwendet werden.Software versions used in the tutorial

In diesem Tutorial mithilfe von Visual Studio 2012Using Visual Studio 2012 with this tutorial

Um Visual Studio 2012 mit diesem Tutorial verwenden möchten, führen Sie folgende Schritte aus:To use Visual Studio 2012 with this tutorial, do the following:

  • Aktualisieren Ihrer -Paket-Manager auf die neueste Version.Update your Package Manager to the latest version.
  • Installieren Sie die Webplattform-Installer.Install the Web Platform Installer.
  • Suchen Sie in den Webplattform-Installer, und installieren Sie ASP.NET und Web Tools 2013.1 für Visual Studio 2012.In the Web Platform Installer, search for and install ASP.NET and Web Tools 2013.1 for Visual Studio 2012. Dadurch wird Visual Studio-Vorlagen für SignalR-Klassen wie z. B. installiert Hub.This will install Visual Studio templates for SignalR classes such as Hub.
  • Einige Vorlagen (z. B. OWIN-Startklasse) nicht zur Verfügung; verwenden Sie für diese stattdessen eine Klassendatei.Some templates (such as OWIN Startup Class) will not be available; for these, use a Class file instead.

Lernprogramm-VersionenTutorial versions

Weitere Informationen zu früheren Versionen von SignalR, finden Sie unter ältere Versionen von SignalR.For information about earlier versions of SignalR, see SignalR Older Versions.

Fragen und KommentareQuestions and comments

Lassen Sie Feedback, auf wie Ihnen in diesem Tutorial gefallen hat und was wir in den Kommentaren am unteren Rand der Seite verbessern können.Please leave feedback on how you liked this tutorial and what we could improve in the comments at the bottom of the page. Wenn Sie Fragen, die nicht direkt mit dem Tutorial verknüpft sind haben, können Sie sie veröffentlichen das ASP.NET SignalR-Forum oder StackOverflow.com.If you have questions that are not directly related to the tutorial, you can post them to the ASP.NET SignalR forum or StackOverflow.com.

ÜbersichtOverview

In diesem Tutorial wird SignalR-Entwicklung eingeführt, wie eine einfache browserbasierte Chat-Anwendung zu erstellen.This tutorial introduces SignalR development by showing how to build a simple browser-based chat application. Sie werden die SignalR-Bibliothek mit einer leeren ASP.NET-Webanwendung hinzufügen, erstellen Sie eine hubklasse für das Senden von Nachrichten für Clients und erstellen Sie eine HTML-Seite, mit dem Benutzer, senden und Empfangen von Chatnachrichten.You will add the SignalR library to an empty ASP.NET web application, create a hub class for sending messages to clients, and create an HTML page that lets users send and receive chat messages. Ein ähnliches Tutorial, das Erstellen eine chatanwendung in MVC 5 zeigt die Verwendung einer MVC-Ansicht, finden Sie unter erste Schritte mit SignalR 2 und MVC 5.For a similar tutorial that shows how to create a chat application in MVC 5 using an MVC view, see Getting Started with SignalR 2 and MVC 5.

Hinweis

Dieses Tutorial veranschaulicht das Erstellen von SignalR-Anwendungen in Version 2.This tutorial demonstrates how to create SignalR applications in version 2. Weitere Informationen zu Änderungen zwischen SignalR 1.x und 2 finden Sie unter aktualisieren SignalR 1.x-Projekte und Versionsanmerkungen von Visual Studio 2013.For details on changes between SignalR 1.x and 2, see Upgrading SignalR 1.x Projects and Visual Studio 2013 Release Notes.

SignalR ist eine Open Source-.NET Bibliothek zum Erstellen von Webanwendungen, die live Benutzerinteraktionen oder datenaktualisierungen in Echtzeit erfordern.SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. Beispiele hierfür sind soziale Anwendungen, mehrere Benutzer Spiele, Business-Zusammenarbeit und Neuigkeiten, Wetter oder finanzielle Anwendungsupdates an.Examples include social applications, multiuser games, business collaboration, and news, weather, or financial update applications. Diese werden häufig in Echtzeit Anwendungen bezeichnet.These are often called real-time applications.

SignalR vereinfacht das Erstellen von Echtzeit-Anwendungen.SignalR simplifies the process of building real-time applications. Es enthält eine Server-Bibliothek von ASP.NET und eine JavaScript-Clientbibliothek zum Verwalten von Client / Server-Verbindungen ein, und Übertragen von Inhaltsupdates an Clients zu erleichtern.It includes an ASP.NET server library and a JavaScript client library to make it easier to manage client-server connections and push content updates to clients. Sie können eine vorhandene ASP.NET-Anwendung um Echtzeitfunktionen zu erhalten. die SignalR-Bibliothek hinzufügen.You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

Das Tutorial veranschaulicht die folgenden Entwicklungsaufgaben von SignalR:The tutorial demonstrates the following SignalR development tasks:

  • Eine ASP.NET-Webanwendung wird die SignalR-Bibliothek hinzugefügt.Adding the SignalR library to an ASP.NET web application.
  • Erstellen einer hubklasse, um Inhalt an Clients zu verteilen.Creating a hub class to push content to clients.
  • Erstellen eine OWIN-Startklasse zum Konfigurieren der Anwendung.Creating an OWIN startup class to configure the application.
  • Verwenden die SignalR-jQuery-Bibliothek auf einer Webseite zum Senden von Nachrichten und Updates vom Hub angezeigt.Using the SignalR jQuery library in a web page to send messages and display updates from the hub.

Der folgende Screenshot zeigt die chatanwendung, die in einem Browser ausgeführt.The following screen shot shows the chat application running in a browser. Jeden neuer Benutzer kann Kommentare Posten und Kommentare hinzugefügt, nachdem der Benutzer im Chat verknüpft.Each new user can post comments and see comments added after the user joins the chat.

Chatinstanzen

Abschnitte:Sections:

Einrichten des ProjektsSet up the Project

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

Erforderliche Komponenten:Prerequisites:

  • Visual Studio 2013.Visual Studio 2013. Wenn Sie nicht über Visual Studio verfügen, finden Sie unter ASP.NET-Downloads um die kostenlose Visual Studio 2013 Express Entwicklungstool zu erhalten.If you do not have Visual Studio, see ASP.NET Downloads to get the free Visual Studio 2013 Express Development Tool.

Verwenden Sie die folgenden Schritte aus Visual Studio 2013 erstellen eine leere ASP.NET-Webanwendung und Hinzufügen von SignalR-Bibliothek:The following steps use Visual Studio 2013 to create an ASP.NET Empty Web Application and add the SignalR library:

  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 Fenster verlassen leere ausgewählt, und klicken Sie auf Erstellen eines Projekts.In the New ASP.NET Project window, leave Empty selected and click Create Project.

    Leeres Web erstellen

  3. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, wählen Sie hinzufügen | SignalR-Hubklasse (v2).In Solution Explorer, right-click the project, select Add | SignalR Hub Class (v2). Nennen Sie die Klasse ChatHub.cs und fügen sie dem Projekt hinzu.Name the class ChatHub.cs and add it to the project. Dieser Schritt erstellt der ChatHub -Klasse und fügt Sie dem Projekt einen Satz von Skriptdateien und Assemblyverweise, die SignalR unterstützen.This step creates the ChatHub class and adds to the project a set of script files and assembly references that support SignalR.

    Hinweis

    Sie können auch SignalR zu einem Projekt hinzufügen, indem Sie öffnen die Tools > NuGet-Paket-Manager > Paket-Manager-Konsole und einen Befehl ausführen:You can also add SignalR to a project by opening the Tools > NuGet Package Manager > Package Manager Console and running a command:

    install-package Microsoft.AspNet.SignalR

    Wenn Sie die Konsole verwenden, um SignalR hinzuzufügen, erstellen Sie die SignalR-hubklasse als separater Schritt nach dem Hinzufügen von SignalR.If you use the console to add SignalR, create the SignalR hub class as a separate step after you add SignalR.

    Hinweis

    Wenn Sie Visual Studio 2012, verwenden die SignalR-Hubklasse (v2) Vorlage nicht zur Verfügung.If you are using Visual Studio 2012, the SignalR Hub Class (v2) template will not be available. Sie können ein einfacher hinzufügen Klasse namens ChatHub stattdessen.You can add a plain Class called ChatHub instead.

  4. In Projektmappen-Explorer, erweitern Sie den Knoten des Skripts.In Solution Explorer, expand the Scripts node. Skriptbibliotheken für jQuery und SignalR werden in das Projekt angezeigt.Script libraries for jQuery and SignalR are visible in the project.

  5. Ersetzen Sie den Code in der neuen ChatHub Klasse durch den folgenden Code.Replace the code in the new ChatHub class with the following 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);
            }
        }
    }
    
  6. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und klicken Sie auf hinzufügen | OWIN-Startklasse.In Solution Explorer, right-click the project, then click Add | OWIN Startup Class. Nennen Sie die neue Klasse Startup , und klicken Sie auf OK.Name the new class Startup and click OK.

    Hinweis

    Wenn Sie Visual Studio 2012, verwenden die OWIN-Startklasse Vorlage nicht zur Verfügung.If you are using Visual Studio 2012, the OWIN Startup Class template will not be available. Sie können ein einfacher hinzufügen Klasse namens Startup stattdessen.You can add a plain Class called Startup instead.

  7. Ändern Sie den Inhalt der neuen Startup-Klasse, die der folgenden.Change the contents of the new Startup class to the following.

    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();
            }
        }
    }
    
  8. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, und klicken Sie auf hinzufügen | HTML-Seite.In Solution Explorer, right-click the project, then click Add | HTML Page. Nennen Sie die neue Seite index.html.Name the new page index.html.

    Hinweis

    Sie müssen möglicherweise die Versionsnummern für die Verweise auf JQuery und SignalR-Bibliotheken zu ändernYou might need to change the version numbers for the references to JQuery and SignalR libraries

  9. In Projektmappen-Explorermit der rechten Maustaste auf die HTML-Seite, die Sie gerade erstellt haben, und klicken Sie auf als Startseite festlegen.In Solution Explorer, right-click the HTML page you just created and click Set as Start Page.

  10. Ersetzen Sie den Standardcode in der HTML-Seite mit den folgenden Code ein.Replace the default code in the HTML page with the following code.

    Hinweis

    Eine höhere Version von SignalR-Skripts kann durch den Paket-Manager installiert werden.A later version of the SignalR scripts may be installed by the package manager. Stellen Sie sicher, dass die folgenden Skriptverweise zu den Versionen der Skriptdateien im Projekt entsprechen (sie werden anders, wenn Sie SignalR, einen Hub hinzufügen, sondern mithilfe von NuGet hinzugefügt haben.)Verify that the script references below correspond to the versions of the script files in the project (they will be different if you added SignalR using NuGet rather than adding a hub.)

    <!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>
    
  11. Speichern Sie alle für das Projekt.Save All for the project.

Ausführen des BeispielsRun the Sample

  1. Drücken Sie F5, um das Projekt im Debugmodus auszuführen.Press F5 to run the project in debug mode. Die HTML-Seite lädt in eine Instanz eines Webbrowsers und aufforderungen für einen Benutzernamen ein.The HTML page loads in a browser instance and prompts for a user name.

    Benutzername eingeben

  2. Geben Sie einen Benutzernamen ein.Enter a user name.

  3. Kopieren Sie die URL aus der Adresszeile des Browsers, und öffnen Sie zwei Browserinstanzen für weitere.Copy the URL from the address line of the browser and use it to open two more browser instances. Geben Sie in den einzelnen Instanzen Browser einen eindeutigen Benutzernamen ein.In each browser instance, enter a unique user name.

  4. Klicken Sie in den einzelnen Instanzen Browser Fügt einen Kommentar hinzu, und klicken Sie auf senden.In each browser instance, add a comment and click Send. Die Kommentare sollte in alle Browserinstanzen angezeigt werden.The comments should display in all browser instances.

    Hinweis

    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.

    Der folgende Screenshot zeigt die Chat-Anwendung, die auf drei Browserinstanzen, die aktualisiert werden, wenn eine Instanz eine Nachricht sendet:The following screen shot shows the chat application running in three browser instances, all of which are updated when one instance sends a message:

    Chat-Browser

  5. 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 wird zur Laufzeit dynamisch generiert.There is a script file named hubs that the SignalR library dynamically 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.

Überprüfen Sie den CodeExamine the Code

Der SignalR Chat-Anwendung zeigt zwei grundlegende Aufgaben für die SignalR-Entwicklung: Erstellen eines Hubs wie das wichtigste Coordination-Objekt, auf dem Server, und mithilfe der SignalR-jQuery-Bibliothek zum Senden und Empfangen von Nachrichten.The SignalR chat application demonstrates two basic SignalR development tasks: creating a hub as the main coordination object on the server, and using the SignalR jQuery library to send and receive messages.

SignalR-HubsSignalR Hubs

Im Codebeispiel enthält die ChatHub Klasse leitet sich von der Microsoft.AspNet.SignalR.Hub Klasse.In the code sample 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 Zugriff auf diese Methoden durch einen Aufruf über Skripts auf einer Webseite.You can create public methods on your hub class and then access 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 wiederum sendet die Nachricht an alle Clients durch den Aufruf Clients.All.broadcastMessage.The hub in turn sends the message to all clients by calling Clients.All.broadcastMessage.

Die senden -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 alle Clients den Zugriff auf, die mit diesem Hub verbunden sind.Use the Microsoft.AspNet.SignalR.Hub.Clients dynamic property to access 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 (such as 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 jQuerySignalR and jQuery

Die HTML-Seite im Codebeispiel veranschaulicht, wie die SignalR-jQuery-Bibliothek für die Kommunikation mit einer SignalR-Hub.The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. Die wesentlichen Aufgaben in den Code deklarieren einen Proxy für den Hub, Deklarieren einer Funktion, die Inhalt per Pushvorgang an Clients der Server aufrufen können, und starten eine Verbindung zum Senden von Nachrichten an den Hub zu verweisen.The essential tasks in the code are declaring a proxy to reference the hub, declaring a function that the server can call to push content to clients, and starting a connection to send messages to the hub.

Der folgende Code deklariert einen Verweis auf eine hubproxy-Klasse.The following code declares a reference to a hub proxy.

var chat = $.connection.chatHub;

Hinweis

In JavaScript wird der Verweis auf die Server-Klasse und ihre Member in Camel-Case.In JavaScript the reference to the server class and its members is in camel case. Das Codebeispiel verweist auf die C#- ChatHub Klasse in JavaScript als ChatHub.The code sample references the C# ChatHub class in JavaScript as chatHub.

Der folgende Code ist, wie Sie eine Callback-Funktion im Skript erstellen.The following code is how you create a callback function in the script. 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 Zeilen an, dass die HTML-Codierung vor der Anzeige des Inhalts sind optional, und zeigen eine einfache Möglichkeit zum Skript-Injection verhindern.The two lines that HTML encode the content before displaying it are optional and show a simple way to prevent script injection.

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

Der folgende Code zeigt, wie Sie eine Verbindung mit dem Hub zu öffnen.The following code shows how to open a connection with the hub. 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.

Hinweis

Dieser Ansatz wird sichergestellt, dass die Verbindung hergestellt wurde, bevor der Ereignishandler ausgeführt wird.This approach ensures that the connection is established before the event handler executes.

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

Nächste SchritteNext Steps

Sie haben gelernt, dass es sich bei SignalR handelt es sich ein Framework zum Erstellen von Echtzeit-Webanwendungen.You learned that SignalR is a framework for building real-time web applications. Sie erfahren auch mehrere Aufgaben bei der Entwicklung von SignalR: wie eine ASP.NET-Anwendung SignalR hinzugefügt, wie zum Erstellen einer hubklasse und das Senden und Empfangen von Nachrichten aus dem Hub.You also learned several SignalR development tasks: how to add SignalR to an ASP.NET application, how to create a hub class, and how to send and receive messages from the hub.

Eine exemplarische Vorgehensweise, um die SignalR-beispielanwendung in Azure bereitstellen, finden Sie unter mithilfe von SignalR mit Web-Apps in Azure App Service.For a walkthrough on how to deploy the sample SignalR application to Azure, see Using SignalR with Web Apps in Azure App Service. Ausführliche Informationen dazu, wie Sie ein Visual Studio-Webprojekt auf einer Windows Azure-Website bereitstellen, finden Sie unter ASP.NET Web-app in Azure App Service erstellen.For detailed information about how to deploy a Visual Studio web project to a Windows Azure Web Site, see Create an ASP.NET web app in Azure App Service.

Erweiterte Konzepte der SignalR-Entwicklungen finden Sie unter den folgenden Websites für SignalR-Quellcode und Ressourcen:To learn more advanced SignalR developments concepts, visit the following sites for SignalR source code and resources: