Tutorial: Erste Schritte mit ASP.NET Core SignalRTutorial: Get started with ASP.NET Core SignalR

In diesem Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR beschrieben.This tutorial teaches the basics of building a real-time app using SignalR. Sie lernen Folgendes:You learn how to:

  • Erstellen Sie ein Webprojekt.Create a web project.
  • Fügen Sie die SignalR-Clientbibliothek hinzu.Add the SignalR client library.
  • Erstellen Sie einen SignalR-Hub.Create a SignalR hub.
  • Konfigurieren Sie das Projekt für die Verwendung von SignalR.Configure the project to use SignalR.
  • Hinzufügen von Code, mit dem Nachrichten von jedem Client an alle verbundene Clients gesendet werden.Add code that sends messages from any client to all connected clients.

Am Ende verfügen Sie über eine funktionierende Chat-App:At the end, you'll have a working chat app:

SignalRBeispiel-AppSignalR sample app

VoraussetzungenPrerequisites

Erstellen Sie ein Web-App-Projekt.Create a web app project

  • Klicken Sie im Menü auf Datei > Neues Projekt.From the menu, select File > New Project.

  • Wählen Sie im Dialogfeld Neues Projekt erstellen die Option ASP.NET Core-Webanwendung aus, und klicken Sie dann auf Weiter.In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

  • Geben Sie im Dialogfeld Neues Projekt konfigurieren dem Projekt den Namen SignalRChat, und wählen Sie dann Erstellen aus.In the Configure your new project dialog, name the project SignalRChat, and then select Create.

  • Wählen Sie im Dialogfeld Neue ASP.NET Core-Webanwendung erstellen die Optionen .NET Core und ASP.NET Core 3.0 aus.In the Create a new ASP.NET Core web Application dialog, select .NET Core and ASP.NET Core 3.0.

  • Klicken Sie auf Webanwendung, um ein Projekt zu erstellen, das Razor Pages verwendet, und wählen Sie dann Erstellen aus.Select Web Application to create a project that uses Razor Pages, and then select Create.

    Dialogfeld „Neues Projekt“ in Visual Studio

Hinzufügen der SignalR-ClientbibliothekAdd the SignalR client library

Die SignalR-Serverbibliothek ist im freigegebenen ASP.NET Core 3.0-Framework enthalten.The SignalR server library is included in the ASP.NET Core 3.0 shared framework. Die JavaScript-Clientbibliothek ist nicht automatisch im Projekt enthalten.The JavaScript client library isn't automatically included in the project. In diesem Tutorial verwenden Sie den Bibliotheks-Manager (LibMan), um die Clientbibliothek von unpkg abzurufen.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg ist ein CDN (Content Delivery Network), mit dem Sie alles bereitstellen können, was im npm (Node.js-Paket-Manager) zu finden ist.unpkg is a content delivery network (CDN) that can deliver anything found in npm, the Node.js package manager.

  • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf Hinzufügen > Clientseitige Bibliothek.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Wählen Sie unpkg im Dialogfeld Add Client-Side Library (Clientseitige Bibliothek hinzufügen) als Anbieter aus.In the Add Client-Side Library dialog, for Provider select unpkg.

  • Geben Sie für Bibliothek@microsoft/signalr@latest ein.For Library, enter @microsoft/signalr@latest.

  • Klicken Sie auf Choose specific files (Spezifische Dateien auswählen), erweitern Sie den Ordner dist/browser, und wählen Sie signalr.js und signalr.min.js aus.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Legen Sie wwwroot/js/signalr/ als Zielspeicherort fest, und klicken Sie auf Installieren.Set Target Location to wwwroot/js/signalr/, and select Install.

    Dialogfeld „Clientseitige Bibliothek hinzufügen“: Auswählen der Bibliothek

    Der Ordner wwwroot/js/signalr wird von LibMan erstellt, und die ausgewählten Dateien werden in ihn hineinkopiert.LibMan creates a wwwroot/js/signalr folder and copies the selected files to it.

Erstellen eines SignalR-HubsCreate a SignalR hub

Ein Hub ist eine Klasse, die als grundlegende Pipeline verwendet wird, mit der Client/Server-Kommunikation verarbeitet wird.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Erstellen Sie im SignalRChat-Projektordner einen Hubs-Ordner.In the SignalRChat project folder, create a Hubs folder.

  • Erstellen Sie im Hubs-Ordner eine ChatHub.cs-Datei mit folgendem Code:In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    Die ChatHub-Klasse erbt von der Hub-Klasse von SignalR.The ChatHub class inherits from the SignalR Hub class. Die Hub-Klasse verwaltet Verbindungen, Gruppen und Messaging.The Hub class manages connections, groups, and messaging.

    Die SendMessage-Methode kann von einem verbundenen Client aufgerufen werden, um eine Nachricht an alle Clients zu senden.The SendMessage method can be called by a connected client to send a message to all clients. JavaScript-Clientcode, in dem die Methode aufgerufen wird, wird später in diesem Tutorial vorgestellt.JavaScript client code that calls the method is shown later in the tutorial. SignalR-Code ist asynchron, damit die maximale Skalierbarkeit gewährleistet werden kann. code is asynchronous to provide maximum scalability.

Konfigurieren von SignalRConfigure SignalR

Der SignalR-Server muss so konfiguriert werden, dass er SignalR-Anforderungen an SignalR weiterleitet.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Fügen Sie der Startup.cs-Datei den folgenden hervorgehobenen Code zu.Add the following highlighted code to the Startup.cs file.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.HttpsPolicy;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.Extensions.Hosting;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.AddRazorPages();
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
    
                app.UseRouting();
    
                app.UseAuthorization();
    
                app.UseEndpoints(endpoints =>
                {
                    endpoints.MapRazorPages();
                    endpoints.MapHub<ChatHub>("/chathub");
                });
            }
        }
    }
    

    Durch diese Änderungen wird der ASP.NET Core-Abhängigkeitsinjektion und den Routingsystemen SignalR hinzugefügt.These changes add SignalR to the ASP.NET Core dependency injection and routing systems.

Hinzufügen von SignalR-ClientcodeAdd SignalR client code

  • Ersetzen Sie den Inhalt in Pages\Index.cshtml durch den folgenden Code:Replace the content in Pages\Index.cshtml with the following code:

    @page
        <div class="container">
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-2">User</div>
                <div class="col-4"><input type="text" id="userInput" /></div>
            </div>
            <div class="row">
                <div class="col-2">Message</div>
                <div class="col-4"><input type="text" id="messageInput" /></div>
            </div>
            <div class="row">&nbsp;</div>
            <div class="row">
                <div class="col-6">
                    <input type="button" id="sendButton" value="Send Message" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    <script src="~/js/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Der vorangehende Code:The preceding code:

    • erstellt Textfelder für den Namen und den Nachrichtentext sowie eine Senden-SchaltflächeCreates text boxes for name and message text, and a submit button.
    • erstellt eine Liste mit id="messagesList" zum Anzeigen von Nachrichten, die vom SignalR-Hub empfangen werdenCreates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • schließt Skriptverweise auf SignalR sowie den chat.js-Anwendungscode ein, den Sie im folgenden Schritt erstellenIncludes script references to SignalR and the chat.js application code that you create in the next step.
  • Erstellen Sie im wwwroot/js-Ordner eine chat.js-Datei mit folgendem Code:In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function () {
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Der vorangehende Code:The preceding code:

    • erstellt und startet eine VerbindungCreates and starts a connection.
    • fügt einen Handler zur Senden-Schaltfläche hinzu, der Nachrichten an den Hub sendetAdds to the submit button a handler that sends messages to the hub.
    • fügt einen Handler zum Verbindungsobjekt hinzu, der Nachrichten vom Hub empfängt und diese der Liste hinzufügtAdds to the connection object a handler that receives messages from the hub and adds them to the list.

Ausführen der AppRun the app

  • Drücken Sie STRG+F5, um die App ohne Debugging zu starten.Press CTRL+F5 to run the app without debugging.
  • Kopieren Sie die URL aus der Adressleiste, öffnen Sie eine neue Browserinstanz oder Registerkarte, und fügen Sie die URL in die Adressleiste ein.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Geben Sie in einem der beiden Browser einen Namen und eine Nachricht ein, und klicken sie auf Nachricht senden.Choose either browser, enter a name and message, and select the Send Message button.

    Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt.The name and message are displayed on both pages instantly.

    SignalRBeispiel-AppSignalR sample app

Tipp

  • Wenn die App nicht funktioniert, öffnen Sie die Browser-Entwicklungstools (F12), und wechseln Sie zur Konsole.If the app doesn't work, open your browser developer tools (F12) and go to the console. Möglicherweise werden Fehler in Bezug auf Ihren HTML- und JavaScript-Code angezeigt.You might see errors related to your HTML and JavaScript code. Nehmen wir an, dass Sie z.B. signalr.js in einen anderen Ordner als vorgeschrieben platziert haben.For example, suppose you put signalr.js in a different folder than directed. In diesem Fall funktioniert der Verweis auf diese Datei nicht, und Ihnen wird der Fehler 404 in der Konsole angezeigt.In that case the reference to that file won't work and you'll see a 404 error in the console. Fehler „signalr.js nicht gefunden“signalr.js not found error

  • Wenn Sie den Fehler ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome erhalten, führen Sie folgende Befehle aus, um das Entwicklungszertifikat zu aktualisieren:If you get the error ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY in Chrome, run these commands to update your development certificate:

    dotnet dev-certs https --clean
    dotnet dev-certs https --trust
    

In diesem Tutorial werden die Grundlagen zur Erstellung einer Echtzeit-App mit SignalR beschrieben.This tutorial teaches the basics of building a real-time app using SignalR. Sie lernen Folgendes:You learn how to:

  • Erstellen Sie ein Webprojekt.Create a web project.
  • Fügen Sie die SignalR-Clientbibliothek hinzu.Add the SignalR client library.
  • Erstellen Sie einen SignalR-Hub.Create a SignalR hub.
  • Konfigurieren Sie das Projekt für die Verwendung von SignalR.Configure the project to use SignalR.
  • Hinzufügen von Code, mit dem Nachrichten von jedem Client an alle verbundene Clients gesendet werden.Add code that sends messages from any client to all connected clients.
    Am Ende verfügen Sie über eine funktionierende Chat-App: SignalRBeispiel-AppAt the end, you'll have a working chat app: SignalR sample app

VoraussetzungenPrerequisites

Warnung

Wenn Sie Visual Studio 2017 verwenden, finden Sie unter dotnet/sdk issue #3124 Informationen zu .NET Core SDK-Versionen, die nicht mit Visual Studio verwendet werden können.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Erstellen eines WebprojektsCreate a web project

  • Klicken Sie im Menü auf Datei > Neues Projekt.From the menu, select File > New Project.

  • Wählen Sie im Dialogfeld Neues Projekt Installiert > Visual C# > Web > ASP.NET Core-Webanwendung aus.In the New Project dialog, select Installed > Visual C# > Web > ASP.NET Core Web Application. Geben Sie als Projektname SignalRChat ein.Name the project SignalRChat.

    Dialogfeld „Neues Projekt“ in Visual Studio

  • Klicken Sie auf Webanwendung, um ein Projekt zu erstellen, das Razor Pages verwendet.Select Web Application to create a project that uses Razor Pages.

  • Wählen Sie .NET Core als Zielframework sowie ASP.NET Core 2.2 aus, und klicken Sie auf OK.Select a target framework of .NET Core, select ASP.NET Core 2.2, and click OK.

    Dialogfeld „Neues Projekt“ in Visual Studio

Hinzufügen der SignalR-ClientbibliothekAdd the SignalR client library

Die SignalR-Serverbibliothek ist im Metapaket Microsoft.AspNetCore.App enthalten.The SignalR server library is included in the Microsoft.AspNetCore.App metapackage. Die JavaScript-Clientbibliothek ist nicht automatisch im Projekt enthalten.The JavaScript client library isn't automatically included in the project. In diesem Tutorial verwenden Sie den Bibliotheks-Manager (LibMan), um die Clientbibliothek von unpkg abzurufen.For this tutorial, you use Library Manager (LibMan) to get the client library from unpkg. unpkg ist ein CDN (Content Delivery Network), mit dem Sie alles bereitstellen können, was im npm (Node.js-Paket-Manager) zu finden ist.unpkg is a content delivery network (CDN) that can deliver anything found in npm, the Node.js package manager.

  • Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und klicken Sie dann auf Hinzufügen > Clientseitige Bibliothek.In Solution Explorer, right-click the project, and select Add > Client-Side Library.

  • Wählen Sie unpkg im Dialogfeld Add Client-Side Library (Clientseitige Bibliothek hinzufügen) als Anbieter aus.In the Add Client-Side Library dialog, for Provider select unpkg.

  • Geben Sie @microsoft/signalr@3 für die Bibliothek ein, und wählen Sie die neueste Version aus, die keine Vorschauversion ist.For Library, enter @microsoft/signalr@3, and select the latest version that isn't preview.

    Dialogfeld „Clientseitige Bibliothek hinzufügen“: Auswählen der Bibliothek

  • Klicken Sie auf Choose specific files (Spezifische Dateien auswählen), erweitern Sie den Ordner dist/browser, und wählen Sie signalr.js und signalr.min.js aus.Select Choose specific files, expand the dist/browser folder, and select signalr.js and signalr.min.js.

  • Legen Sie wwwroot/lib/signalr/ als Zielspeicherort fest, und klicken Sie auf Installieren.Set Target Location to wwwroot/lib/signalr/, and select Install.

    Dialogfeld „Clientseitige Bibliothek hinzufügen“: Auswählen der Dateien und des Zielspeicherorts

    Der Ordner wwwroot/lib/signalr wird von LibMan erstellt, und die ausgewählten Dateien werden in ihn hineinkopiert.LibMan creates a wwwroot/lib/signalr folder and copies the selected files to it.

Erstellen eines SignalR-HubsCreate a SignalR hub

Ein Hub ist eine Klasse, die als grundlegende Pipeline verwendet wird, mit der Client/Server-Kommunikation verarbeitet wird.A hub is a class that serves as a high-level pipeline that handles client-server communication.

  • Erstellen Sie im SignalRChat-Projektordner einen Hubs-Ordner.In the SignalRChat project folder, create a Hubs folder.

  • Erstellen Sie im Hubs-Ordner eine ChatHub.cs-Datei mit folgendem Code:In the Hubs folder, create a ChatHub.cs file with the following code:

    using Microsoft.AspNetCore.SignalR;
    using System.Threading.Tasks;
    
    namespace SignalRChat.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    

    Die ChatHub-Klasse erbt von der Hub-Klasse von SignalR.The ChatHub class inherits from the SignalR Hub class. Die Hub-Klasse verwaltet Verbindungen, Gruppen und Messaging.The Hub class manages connections, groups, and messaging.

    Die SendMessage-Methode kann von einem verbundenen Client aufgerufen werden, um eine Nachricht an alle Clients zu senden.The SendMessage method can be called by a connected client to send a message to all clients. JavaScript-Clientcode, in dem die Methode aufgerufen wird, wird später in diesem Tutorial vorgestellt.JavaScript client code that calls the method is shown later in the tutorial. SignalR-Code ist asynchron, damit die maximale Skalierbarkeit gewährleistet werden kann. code is asynchronous to provide maximum scalability.

Konfigurieren von SignalRConfigure SignalR

Der SignalR-Server muss so konfiguriert werden, dass er SignalR-Anforderungen an SignalR weiterleitet.The SignalR server must be configured to pass SignalR requests to SignalR.

  • Fügen Sie der Startup.cs-Datei den folgenden hervorgehobenen Code zu.Add the following highlighted code to the Startup.cs file.

    using Microsoft.AspNetCore.Builder;
    using Microsoft.AspNetCore.Hosting;
    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.Extensions.Configuration;
    using Microsoft.Extensions.DependencyInjection;
    using SignalRChat.Hubs;
    
    namespace SignalRChat
    {
        public class Startup
        {
            public Startup(IConfiguration configuration)
            {
                Configuration = configuration;
            }
    
            public IConfiguration Configuration { get; }
    
            // This method gets called by the runtime. Use this method to add services to the container.
            public void ConfigureServices(IServiceCollection services)
            {
                services.Configure<CookiePolicyOptions>(options =>
                {
                    // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                    options.CheckConsentNeeded = context => true;
                    options.MinimumSameSitePolicy = SameSiteMode.None;
                });
    
    
                services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
    
                services.AddSignalR();
            }
    
            // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
            public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }
    
                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseCookiePolicy();
                app.UseSignalR(routes =>
                {
                    routes.MapHub<ChatHub>("/chathub");
                });
                app.UseMvc();
            }
        }
    }
    

    Durch diese Änderungen wird SignalR dem Abhängigkeitsinjektionssystem von ASP.NET Core sowie der Middlewarepipeline hinzugefügt.These changes add SignalR to the ASP.NET Core dependency injection system and the middleware pipeline.

Hinzufügen von SignalR-ClientcodeAdd SignalR client code

  • Ersetzen Sie den Inhalt in Pages\Index.cshtml durch den folgenden Code:Replace the content in Pages\Index.cshtml with the following code:

    @page
    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                User..........<input type="text" id="userInput" />
                <br />
                Message...<input type="text" id="messageInput" />
                <input type="button" id="sendButton" value="Send Message" />
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-6">&nbsp;</div>
            <div class="col-6">
                <ul id="messagesList"></ul>
            </div>
        </div>
    </div>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/js/chat.js"></script>
    

    Der vorangehende Code:The preceding code:

    • erstellt Textfelder für den Namen und den Nachrichtentext sowie eine Senden-SchaltflächeCreates text boxes for name and message text, and a submit button.
    • erstellt eine Liste mit id="messagesList" zum Anzeigen von Nachrichten, die vom SignalR-Hub empfangen werdenCreates a list with id="messagesList" for displaying messages that are received from the SignalR hub.
    • schließt Skriptverweise auf SignalR sowie den chat.js-Anwendungscode ein, den Sie im folgenden Schritt erstellenIncludes script references to SignalR and the chat.js application code that you create in the next step.
  • Erstellen Sie im wwwroot/js-Ordner eine chat.js-Datei mit folgendem Code:In the wwwroot/js folder, create a chat.js file with the following code:

    "use strict";
    
    var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
    
    //Disable send button until connection is established
    document.getElementById("sendButton").disabled = true;
    
    connection.on("ReceiveMessage", function (user, message) {
        var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        var encodedMsg = user + " says " + msg;
        var li = document.createElement("li");
        li.textContent = encodedMsg;
        document.getElementById("messagesList").appendChild(li);
    });
    
    connection.start().then(function(){
        document.getElementById("sendButton").disabled = false;
    }).catch(function (err) {
        return console.error(err.toString());
    });
    
    document.getElementById("sendButton").addEventListener("click", function (event) {
        var user = document.getElementById("userInput").value;
        var message = document.getElementById("messageInput").value;
        connection.invoke("SendMessage", user, message).catch(function (err) {
            return console.error(err.toString());
        });
        event.preventDefault();
    });
    

    Der vorangehende Code:The preceding code:

    • erstellt und startet eine VerbindungCreates and starts a connection.
    • fügt einen Handler zur Senden-Schaltfläche hinzu, der Nachrichten an den Hub sendetAdds to the submit button a handler that sends messages to the hub.
    • fügt einen Handler zum Verbindungsobjekt hinzu, der Nachrichten vom Hub empfängt und diese der Liste hinzufügtAdds to the connection object a handler that receives messages from the hub and adds them to the list.

Ausführen der AppRun the app

  • Drücken Sie STRG+F5, um die App ohne Debugging zu starten.Press CTRL+F5 to run the app without debugging.
  • Kopieren Sie die URL aus der Adressleiste, öffnen Sie eine neue Browserinstanz oder Registerkarte, und fügen Sie die URL in die Adressleiste ein.Copy the URL from the address bar, open another browser instance or tab, and paste the URL in the address bar.

  • Geben Sie in einem der beiden Browser einen Namen und eine Nachricht ein, und klicken sie auf Nachricht senden.Choose either browser, enter a name and message, and select the Send Message button.

    Der Name und die Nachricht werden sofort auf beiden Seiten angezeigt.The name and message are displayed on both pages instantly.

    SignalRBeispiel-AppSignalR sample app

Tipp

Wenn die App nicht funktioniert, öffnen Sie die Browser-Entwicklungstools (F12), und wechseln Sie zur Konsole.If the app doesn't work, open your browser developer tools (F12) and go to the console. Möglicherweise werden Fehler in Bezug auf Ihren HTML- und JavaScript-Code angezeigt.You might see errors related to your HTML and JavaScript code. Nehmen wir an, dass Sie z.B. signalr.js in einen anderen Ordner als vorgeschrieben platziert haben.For example, suppose you put signalr.js in a different folder than directed. In diesem Fall funktioniert der Verweis auf diese Datei nicht, und Ihnen wird der Fehler 404 in der Konsole angezeigt.In that case the reference to that file won't work and you'll see a 404 error in the console.
Fehler „signalr.js nicht gefunden“signalr.js not found error

Zusätzliche RessourcenAdditional resources