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

durch Patrick Fletcherby Patrick Fletcher

Herunterladen des abgeschlossenen ProjektsDownload 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 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.

In diesem Lernprogramm verwendeten Versionen der SoftwareSoftware versions used in the tutorial

Verwenden von Visual Studio 2012 mit diesem LernprogrammUsing Visual Studio 2012 with this tutorial

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

  • Update der Package Manager auf die neueste Version.Update your Package Manager to the latest version.
  • Installieren der Web Platform Installer.Install the Web Platform Installer.
  • Suchen Sie in den Webplattform-Installer, und installieren Sie ASP.NET und 2013.1 von Web Tools 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. Hierbei werden z. B. Visual Studio-Vorlagen für SignalR-Klassen installiert Hub.This will install Visual Studio templates for SignalR classes such as Hub.
  • Einige Vorlagen (z. B. OWIN-Startklasse) ist nicht verfügbar; 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

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 Sie Feedback auf wie in diesem Lernprogramm mögen 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 Lernprogramm verknüpft sind haben, bereitstellen können, die 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

Dieses Lernprogramm führt SignalR Entwicklung erfahren, wie eine einfache browserbasierte chatanwendung erstellt.This tutorial introduces SignalR development by showing how to build a simple browser-based chat application. Sie werden eine leere ASP.NET-Webanwendung SignalR-Bibliothek hinzugefügt, erstellen Sie eine hubklasse zum Senden von Nachrichten für Clients und erstellen eine HTML-Seite, mit dem Benutzer, senden und Empfangen von Nachrichten.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 Lernprogramm, das zum Erstellen einer chatanwendung in MVC 5 veranschaulicht eine MVC-Ansicht verwenden, 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 Lernprogramm 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 Versionshinweisen zu 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 Daten in Echtzeit-Updates erfordern.SignalR is an open-source .NET library for building web applications that require live user interaction or real-time data updates. Beispiele sind soziale Anwendungen, mehrere Benutzer Spiele, Business-Zusammenarbeit und Neuigkeiten, Wetter oder finanzielle Aktualisierung von Anwendungen.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 Anwendungen in Echtzeit.SignalR simplifies the process of building real-time applications. Er enthält eine ASP.NET-Serverbibliothek und eine JavaScript-Client-Bibliothek, damit sie leichter verwalten von Client / Server-Verbindungen und Inhaltsupdates an Clients übertragen.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 nach Echtzeit-Funktionen nutzen zu können die SignalR-Bibliothek hinzufügen.You can add the SignalR library to an existing ASP.NET application to gain real-time functionality.

Im Lernprogramm wird die folgenden SignalR Entwicklungsaufgaben veranschaulicht:The tutorial demonstrates the following SignalR development tasks:

  • Eine ASP.NET-Webanwendung hinzugefügt SignalR-Bibliothek.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-Start-Klasse 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. Jeder neuer Benutzer kann senden Kommentare und Kommentare hinzugefügt, nachdem der Benutzer über den Chat verknüpft.Each new user can post comments and see comments added after the user joins the chat.

Chatinstanzen

Abschnitte:Sections:

Richten Sie das ProjektSet up the Project

Fügen Sie in diesem Abschnitt wird gezeigt, wie Visual Studio 2013 und SignalR Version 2 Erstellen Sie eine leere ASP.NET-Webanwendung mit 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 das kostenlose Visual Studio 2013 Express Entwicklungstool abgerufen.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 der 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 in Visual Studio eine ASP.NET-Webanwendung.In Visual Studio, create an ASP.NET Web Application.

    Erstellen von web

  2. In der neues ASP.NET-Projekt Fenster verlassen leere ausgewählt, und klicken Sie auf Projekt erstellen.In the New ASP.NET Project window, leave Empty selected and click Create Project.

    Erstellen Sie leeres web

  3. In Projektmappen-Explorermit der rechten Maustaste auf das Projekt, wählen Sie hinzufügen | SignalR-Hub-Klasse (v2).In Solution Explorer, right-click the project, select Add | SignalR Hub Class (v2). Benennen Sie die Klasse ChatHub.cs und dem Projekt hinzugefügt.Name the class ChatHub.cs and add it to the project. In diesem Schritt wird die ChatHub -Klasse und fügt Sie dem Projekt eine Reihe von Skriptdateien und Assemblyverweisen, 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 | Bibliothek-Paket-Manager | Paket-Manager-Konsole und einen Befehl ausführen:You can also add SignalR to a project by opening the Tools | Library 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-Hub-Klasse 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

    Bei Verwendung von Visual Studio 2012 die SignalR-Hub-Klasse (v2) Vorlage ist nicht verfügbar.If you are using Visual Studio 2012, the SignalR Hub Class (v2) template will not be available. Sie können ein einfachen hinzufügen Klasse aufgerufen 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-ExplorerSie mit der rechten Maustaste des Projekts, und klicken Sie auf hinzufügen | OWIN-Startklasse.In Solution Explorer, right-click the project, then click Add | OWIN Startup Class. Benennen Sie die neue Klasse Startup , und klicken Sie auf OK.Name the new class Startup and click OK.

    Hinweis

    Bei Verwendung von Visual Studio 2012 die OWIN-Startklasse Vorlage ist nicht verfügbar.If you are using Visual Studio 2012, the OWIN Startup Class template will not be available. Sie können ein einfachen hinzufügen Klasse aufgerufen Startup stattdessen.You can add a plain Class called Startup instead.

  7. Ändern Sie den Inhalt der neuen Startklasse folgt.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-ExplorerSie mit der rechten Maustaste des Projekts, 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. >[!NOTE] >Sie müssen möglicherweise die Versionsnummern für die Verweise auf Bibliotheken JQuery und SignalR ändernYou might need to change the version numbers for the references to JQuery and SignalR libraries
  9. In Projektmappen-Explorermit der rechten Maustaste auf das 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 der SignalR-Skripts kann von den Paket-Manager installiert werden.A later version of the SignalR scripts may be installed by the package manager. Stellen Sie sicher, dass die Versionen der Skriptdateien im Projekt die folgenden Skriptverweise entsprechen (sie werden anders, wenn Sie SignalR mithilfe von NuGet, anstatt einen Hub hinzugefügt.)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.

Führen Sie das BeispielRun 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 einen Browserinstanz und fordert Sie auf 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 ein, und verwenden Sie, um zwei weitere Browserinstanzen öffnen.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 aus.In each browser instance, enter a unique user name.
  4. Klicken Sie in den einzelnen Instanzen Browser einen Kommentar hinzufügen, und klicken Sie auf senden.In each browser instance, add a comment and click Send. Die Kommentare sollten in alle Browserinstanzen angezeigt werden.The comments should display in all browser instances.

    Hinweis

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

    Der folgende Screenshot zeigt die chatanwendung, die in drei Browserinstanzen, die aktualisiert werden, wenn eine Instanz eine Nachricht sendet ausgeführt wird: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 wird eine Skriptdatei mit dem Namen Hubs , die die SignalR-Bibliothek wird zur Laufzeit dynamisch generiert.There is a script file named hubs that the SignalR library dynamically generates at runtime. Diese Datei wird die Kommunikation zwischen jQuery-Skripts und serverseitigen Code verwaltet.This file manages the communication between jQuery script and server-side code.

Überprüfen Sie den CodeExamine the Code

Die SignalR-Chat-Anwendung zeigt zwei grundlegende SignalR Entwicklungsaufgaben: Erstellen eines Hubs wie das Hauptfenster Koordinierung-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 den 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 hilfreiche 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 in der hubklasse erstellen und dann Zugriff auf diese Methoden durch Aufruf aus 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.

Rufen Sie in den Code Chat Clients 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 wiederum 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 einige Konzepte der Hub-Methode veranschaulicht:The Send method demonstrates several hub concepts :

  • Öffentliche Methoden für einen Hub deklariert werden, 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 auf alle Clients, 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) so aktualisieren Sie 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 zeigt, wie die SignalR-jQuery-Bibliothek für die Kommunikation mit SignalR-Hubs.The HTML page in the code sample shows how to use the SignalR jQuery library to communicate with a SignalR hub. Die Durchführung wichtiger Aufgaben im Code deklarieren ein Proxys für den Hub, Deklarieren einer Funktion, die der Server auf Push-Inhalte für Clients 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 einen hubproxy.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. Im 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 stammt, wie Sie eine Rückruffunktion in das 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 an jeden Client per Push übertragen.The hub class on the server calls this function to push content updates to each client. Die beiden Zeilen an, dass HTML-Codierung den Inhalt vor der Anzeige 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 übergibt diese eine Funktion, um das Click-Ereignis zu behandeln, auf die senden Schaltfläche in 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 wird, 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 erfahren, dass SignalR ein Framework zur Erstellung von Echtzeit-Webanwendungen.You learned that SignalR is a framework for building real-time web applications. Sie haben auch erfahren, mehrere SignalR Entwicklungsaufgaben: zum Hinzufügen von SignalR an eine ASP.NET-Anwendung zum Erstellen einer hubklasse und zum Senden und Empfangen von Nachrichten über den 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, die SignalR-beispielanwendung in Azure bereitzustellen, finden Sie unter SignalR mit Web-Apps in Azure App Service mithilfe von.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 erstellen eine ASP.NET Web-app in Azure App Service.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 von SignalR-Entwicklungen finden Sie auf 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: