Schnellstart: Erstellen eines Chatraums mit SignalR ServiceQuickstart: Create a chat room by using SignalR Service

Azure SignalR Service ist ein Azure-Dienst, der Entwicklern die einfache Erstellung von Webanwendungen mit Echtzeitfunktionen ermöglicht.Azure SignalR Service is an Azure service that helps developers easily build web applications with real-time features. Dieser Dienst basiert auf SignalR für ASP.NET Core 2.1, unterstützt aber auch SignalR für ASP.NET Core 3.0.This service is based on SignalR for ASP.NET Core 2.1, but also supports SignalR for ASP.NET Core 3.0.

In diesem Artikel wird der Einstieg in den Azure SignalR Service beschrieben.This article shows you how to get started with the Azure SignalR Service. In dieser Schnellstartanleitung erstellen Sie eine Chatanwendung, indem Sie eine Web-App vom Typ „ASP.NET Core MVC“ verwenden.In this quickstart, you'll create a chat application by using an ASP.NET Core MVC web app. Mit dieser App wird eine Verbindung mit Ihrer Azure SignalR Service-Ressource hergestellt, um Echtzeitupdates des Inhalts zu ermöglichen.This app will make a connection with your Azure SignalR Service resource to enable real-time content updates. Sie hosten die Webanwendung lokal und stellen Verbindungen mit mehreren Browserclients her.You'll host the web application locally and connect with multiple browser clients. Von jedem Client aus können Inhaltsupdates per Pushvorgang an alle anderen Clients gesendet werden.Each client will be able to push content updates to all other clients.

Sie können einen beliebigen Code-Editor nutzen, um die Schritte dieser Schnellstartanleitung auszuführen.You can use any code editor to complete the steps in this quickstart. Eine Option ist Visual Studio Code, das auf Windows-, macOS- und Linux-Plattformen verfügbar ist.One option is Visual Studio Code, which is available on the Windows, macOS, and Linux platforms.

Der Code für dieses Tutorial kann aus dem GitHub-Repository „AzureSignalR-samples“ heruntergeladen werden.The code for this tutorial is available for download in the AzureSignalR-samples GitHub repository. Außerdem können Sie die in dieser Schnellstartanleitung verwendeten Azure-Ressourcen erstellen, indem Sie Erstellen eines SignalR-Service-Skripts folgen.Also, you can create the Azure resources used in this quickstart by following Create a SignalR Service script.

Wenn Sie kein Azure-Abonnement besitzen, erstellen Sie ein kostenloses Konto, bevor Sie beginnen.If you don't have an Azure subscription, create a free account before you begin.

VoraussetzungenPrerequisites

Erstellen einer Azure SignalR-RessourceCreate an Azure SignalR resource

  1. Melden Sie sich zunächst beim Azure-Portal an, um eine Azure SignalR Service-Ressource zu erstellen.To create an Azure SignalR Service resource, first sign in to the Azure portal. Wählen Sie links oben auf der Seite die Option + Ressource erstellen aus.In the upper-left side of the page, select + Create a resource. Geben Sie im Textfeld Marketplace durchsuchen SignalR Service ein.In the Search the Marketplace text box, enter SignalR Service.

  2. Wählen Sie in den Ergebnissen SignalR Service und dann Erstellen aus.Select SignalR Service in the results, and select Create.

  3. Fügen Sie auf der neuen SignalR-Seite „Einstellungen“ die folgenden Einstellungen für die neue SignalR-Ressource hinzu:On the new SignalR settings page, add the following settings for your new SignalR resource:

    NAMEName Empfohlener WertRecommended value BESCHREIBUNGDescription
    RessourcennameResource name testsignalrtestsignalr Geben Sie für die SignalR-Ressource einen eindeutigen Ressourcennamen ein.Enter a unique resource name to use for the SignalR resource. Der Name muss zwischen 1 und 63 Zeichen lang sein und darf nur Zahlen, Buchstaben und den Bindestrich (-) enthalten.The name must be a string of 1 to 63 characters and contain only numbers, letters, and the hyphen (-) character. Der Name darf weder mit dem Bindestrich beginnen oder enden, noch mehrere aufeinanderfolgende Bindestriche enthalten.The name cannot start or end with the hyphen character, and consecutive hyphen characters are not valid.
    AbonnementSubscription Auswählen Ihres AbonnementsChoose your subscription Wählen Sie das Azure-Abonnement aus, das Sie zum Testen von SignalR verwenden möchten.Select the Azure subscription that you want to use to test SignalR. Wenn das Konto nur über ein einzelnes Abonnement verfügt, wird automatisch dieses Abonnement ausgewählt, und die Dropdownliste Abonnement wird nicht angezeigt.If your account has only one subscription, it's automatically selected and the Subscription drop-down isn't displayed.
    RessourcengruppeResource group Erstellen einer Ressourcengruppe namens SignalRTestResourcesCreate a resource group named SignalRTestResources Wählen Sie eine Ressourcengruppe für Ihre SignalR-Ressource aus, oder erstellen Sie eine.Select or create a resource group for your SignalR resource. Diese Gruppe ist beim Organisieren mehrerer Ressourcen hilfreich, die Sie möglicherweise zur gleichen Zeit löschen möchten, indem Sie die Ressourcengruppe löschen.This group is useful for organizing multiple resources that you might want to delete at the same time by deleting the resource group. Weitere Informationen finden Sie unter Verwenden von Ressourcengruppen zum Verwalten von Azure-Ressourcen.For more information, see Using resource groups to manage your Azure resources.
    LocationLocation USA, OstenEast US Verwenden Sie Standort, um den geografischen Standort anzugeben, an dem Ihre SignalR-Ressource gehostet wird.Use Location to specify the geographic location in which your SignalR resource is hosted. Für die beste Leistung wird empfohlen, dass Sie die Ressource in derselben Region wie andere Komponenten Ihrer Anwendung erstellen.For the best performance, we recommend that you create the resource in the same region as other components of your application.
    TarifPricing tier FreeFree Aktuell sind die Optionen Free und Standard verfügbar.Currently, Free and Standard options are available.
    An Dashboard anheftenPin to dashboard Aktivieren Sie dieses Kontrollkästchen, um die Ressource an Ihr Dashboard anzuheften, damit sie einfacher zu finden ist.Select this box to have the resource pinned to your dashboard so it's easier to find.
  4. Klicken Sie auf Erstellen.Select Create. Die Bereitstellung kann einige Minuten dauern.The deployment might take a few minutes to complete.

  5. Nachdem die Bereitstellung abgeschlossen ist, wählen Sie unter EINSTELLUNGEN die Option Schlüssel aus.After the deployment is complete, select Keys under SETTINGS. Kopieren Sie Ihre Verbindungszeichenfolge für den Primärschlüssel.Copy your connection string for the primary key. Sie werden die Zeichenfolge später zum Konfigurieren Ihrer App verwenden, um die Azure SignalR Service-Ressource zu verwenden.You'll use this string later to configure your app to use the Azure SignalR Service resource.

    Die Verbindungszeichenfolge weist das folgende Format auf:The connection string will have the following form:

     Endpoint=<service_endpoint>;AccessKey=<access_key>;
    

Erstellen einer ASP.NET Core-Web-AppCreate an ASP.NET Core web app

In diesem Abschnitt verwenden Sie die .NET Core-Befehlszeilenschnittstelle (CLI), um ein ASP.NET Core MVC-Web-App-Projekt zu erstellen.In this section, you use the .NET Core command-line interface (CLI) to create an ASP.NET Core MVC web app project. Der Vorteil bei Verwendung der .NET Core-CLI gegenüber Visual Studio ist, dass sie für alle Windows-, macOS- und Linux-Plattformen verfügbar ist.The advantage of using the .NET Core CLI over Visual Studio is that it's available across the Windows, macOS, and Linux platforms.

  1. Erstellen Sie einen Ordner für Ihr Projekt.Create a folder for your project. In dieser Schnellstartanleitung wird der Ordner E:\Testing\chattest verwendet.This quickstart uses the E:\Testing\chattest folder.

  2. Führen Sie im neuen Ordner den folgenden Befehl aus, um das Projekt zu erstellen:In the new folder, run the following command to create the project:

     dotnet new mvc
    

Hinzufügen des Geheimnis-ManagersAdd Secret Manager to the project

In diesem Abschnitt fügen Sie Ihrem Projekt das Geheimnis-Manager-Tool hinzu.In this section, you'll add the Secret Manager tool to your project. Im Geheimnis-Manager-Tool werden sensible Daten für die Entwicklungsarbeit außerhalb Ihrer Projektstruktur gespeichert.The Secret Manager tool stores sensitive data for development work outside your project tree. Mit diesem Ansatz können Sie verhindern, dass App-Geheimnisse versehentlich im Quellcode angegeben werden.This approach helps prevent the accidental sharing of app secrets in source code.

  1. Öffnen Sie die Datei mit der Endung .csproj.Open your .csproj file. Fügen Sie das DotNetCliToolReference-Element hinzu, um Microsoft.Extensions.SecretManager.Tools einzubinden.Add a DotNetCliToolReference element to include Microsoft.Extensions.SecretManager.Tools. Fügen Sie auch ein UserSecretsId-Element hinzu, wie im folgenden Code für chattest.csproj gezeigt, und speichern Sie die Datei.Also add a UserSecretsId element as shown in the following code for chattest.csproj, and save the file.

    <Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>netcoreapp2.0</TargetFramework>
        <UserSecretsId>SignalRChatRoomEx</UserSecretsId>
    </PropertyGroup>
    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
    </ItemGroup>
    <ItemGroup>
        <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
        <DotNetCliToolReference Include="Microsoft.Extensions.SecretManager.Tools" Version="2.0.0" />
    </ItemGroup>
    </Project>    
    

Hinzufügen von Azure SignalR zur Web-AppAdd Azure SignalR to the web app

  1. Fügen Sie einen Verweis auf das NuGet-Paket Microsoft.Azure.SignalR hinzu, indem Sie den folgenden Befehl ausführen:Add a reference to the Microsoft.Azure.SignalR NuGet package by running the following command:

     dotnet add package Microsoft.Azure.SignalR
    
  2. Führen Sie den folgenden Befehl aus, um Pakete für Ihr Projekt wiederherzustellen:Run the following command to restore packages for your project:

     dotnet restore
    
  3. Fügen Sie dem Geheimnis-Manager ein Geheimnis mit dem Namen Azure:SignalR:ConnectionString hinzu.Add a secret named Azure:SignalR:ConnectionString to Secret Manager.

    Dieses Geheimnis enthält die Verbindungszeichenfolge für den Zugriff auf Ihre SignalR Service-Ressource.This secret will contain the connection string to access your SignalR Service resource. Azure:SignalR:ConnectionString ist der Standardkonfigurationsschlüssel, nach dem SignalR sucht, um eine Verbindung herzustellen.Azure:SignalR:ConnectionString is the default configuration key that SignalR looks for to establish a connection. Ersetzen Sie den Wert im folgenden Befehl durch die Verbindungszeichenfolge für Ihre SignalR Service-Ressource.Replace the value in the following command with the connection string for your SignalR Service resource.

    Sie müssen diesen Befehl in demselben Verzeichnis wie die .csproj-Datei ausführen.You must run this command in the same directory as the .csproj file.

    dotnet user-secrets set Azure:SignalR:ConnectionString "<Your connection string>"    
    

    Der Geheimnis-Manager wird nur verwendet, um die Web-App zu testen, während sie lokal gehostet wird.Secret Manager will be used only for testing the web app while it's hosted locally. In einem späteren Tutorial stellen Sie die Chat-Web-App dann in Azure bereit.In a later tutorial, you'll deploy the chat web app to Azure. Nachdem Sie die Web-App in Azure bereitgestellt haben, verwenden Sie eine Anwendungseinstellung, anstatt die Verbindungszeichenfolge im Geheimnis-Manager zu speichern.After the web app is deployed to Azure, you'll use an application setting instead of storing the connection string with Secret Manager.

    Auf dieses Geheimnis wird mit der Konfigurations-API zugegriffen.This secret is accessed with the Configuration API. Ein Doppelpunkt (:) kann im Konfigurationsnamen mit der Konfigurations-API auf allen unterstützten Plattformen verwendet werden.A colon (:) works in the configuration name with the Configuration API on all supported platforms. Siehe Konfiguration nach Umgebung.See Configuration by environment.

  4. Öffnen Sie Startup.cs, und aktualisieren Sie die Methode ConfigureServices für die Verwendung von Azure SignalR Service, indem Sie die Methode services.AddSignalR().AddAzureSignalR() aufrufen (nur für ASP.NET Core 2):Open Startup.cs and update the ConfigureServices method to use Azure SignalR Service by calling the services.AddSignalR().AddAzureSignalR() method for ASP.NET Core 2 only:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
        services.AddSignalR().AddAzureSignalR();
    }
    

    Für ASP.NET Core 3+ ist keine Änderung der Methode ConfigureServices erforderlich.For ASP.NET Core 3+, there is no change needed for ConfigureServices method.

    Indem kein Parameter an AddAzureSignalR() übergeben wird, wird in diesem Code der Standardkonfigurationsschlüssel für die Verbindungszeichenfolge der SignalR Service-Ressource verwendet.By not passing a parameter to AddAzureSignalR(), this code uses the default configuration key for the SignalR Service resource connection string. Der Standardkonfigurationsschlüssel lautet Azure:SignalR:ConnectionString.The default configuration key is Azure:SignalR:ConnectionString.

  5. Aktualisieren Sie die Methode Configure (ebenfalls in Startup.cs), indem Sie den Aufruf von app.UseStaticFiles() durch den folgenden Code ersetzen und die Datei speichern (nur für ASP.NET Core 2).Also in Startup.cs, update the Configure method by replacing the call to app.UseStaticFiles() with the following code and save the file, for ASP.NET Core 2 only.

    app.UseFileServer();
    app.UseAzureSignalR(routes =>
    {
        routes.MapHub<Chat>("/chat");
    });
    

    Ersetzen Sie für ASP.NET Core 3+ den obigen Code durch Folgendes:For ASP.NET Core 3+, replace the above code with:

    app.UseFileServer();
    app.UseRouting();
    app.UseAuthorization();
    
    app.UseEndpoints(routes =>
    {
        routes.MapHub<Chat>("/chat");
    });
    

Hinzufügen einer HubklasseAdd a hub class

In SignalR ist ein Hub eine Kernkomponente, über die eine Reihe von Methoden verfügbar gemacht wird, die vom Client aus aufgerufen werden können.In SignalR, a hub is a core component that exposes a set of methods that can be called from the client. In diesem Abschnitt definieren Sie eine Hubklasse mit zwei Methoden:In this section, you define a hub class with two methods:

  • Broadcast: Mit dieser Methode wird eine Nachricht an alle Clients übertragen.Broadcast: This method broadcasts a message to all clients.
  • Echo: Mit dieser Methode wird eine Nachricht zurück an den Aufrufer gesendet.Echo: This method sends a message back to the caller.

Für beide Methoden wird die Schnittstelle Clients genutzt, die über das ASP.NET Core SignalR SDK bereitgestellt wird.Both methods use the Clients interface that the ASP.NET Core SignalR SDK provides. Mit dieser Schnittstelle haben Sie Zugriff auf alle verbundenen Clients und können Inhalt per Pushvorgang auf die Clients übertragen.This interface gives you access to all connected clients, so you can push content to your clients.

  1. Fügen Sie in Ihrem Projektverzeichnis einen neuen Ordner mit dem Namen Hub hinzu.In your project directory, add a new folder named Hub. Fügen Sie dem neuen Ordner eine neue Hubcodedatei mit dem Namen Chat.cs hinzu.Add a new hub code file named Chat.cs to the new folder.

  2. Fügen Sie Chat.cs den folgenden Code hinzu, um Ihre Hubklasse zu definieren und die Datei zu speichern.Add the following code to Chat.cs to define your hub class and save the file.

    Aktualisieren Sie den Namespace für diese Klasse, falls Sie einen anderen Projektnamen als chattest verwendet haben.Update the namespace for this class if you used a project name that differs from chattest.

    using Microsoft.AspNetCore.SignalR;
    
    namespace chattest
    {
    
        public class Chat : Hub
        {
            public void BroadcastMessage(string name, string message)
            {
                Clients.All.SendAsync("broadcastMessage", name, message);
            }
    
            public void Echo(string name, string message)
            {
                Clients.Client(Context.ConnectionId).SendAsync("echo", name, message + " (echo from server)");
            }
        }
    }
    

Hinzufügen der Clientschnittstelle für die Web-AppAdd the client interface for the web app

Die Clientbenutzeroberfläche für diese Chatraum-App besteht aus HTML- und JavaScript-Code in einer Datei mit dem Namen index.html, die im Verzeichnis wwwroot enthalten ist.The client user interface for this chat room app will consist of HTML and JavaScript in a file named index.html in the wwwroot directory.

Kopieren Sie die Datei index.html und die Ordner css und scripts aus dem Ordner wwwroot des Repositorys mit Beispielen.Copy the index.html file, the css folder, and the scripts folder from the wwwroot folder of the samples repository. Fügen Sie sie in den Ordner wwwwroot Ihres Projekts ein.Paste them into your project's wwwroot folder.

Hier ist der Hauptcode von index.html:Here's the main code of index.html:

var connection = new signalR.HubConnectionBuilder()
                            .withUrl('/chat')
                            .build();
bindConnectionMessage(connection);
connection.start()
    .then(function () {
        onConnected(connection);
    })
    .catch(function (error) {
        console.error(error.message);
    });

Im Code in index.html wird HubConnectionBuilder.build() aufgerufen, um eine HTTP-Verbindung mit der Azure SignalR-Ressource herzustellen.The code in index.html calls HubConnectionBuilder.build() to make an HTTP connection to the Azure SignalR resource.

Wenn die Verbindungsherstellung erfolgreich ist, wird diese Verbindung an bindConnectionMessage übergeben, wo Ereignishandler für eingehende Pushvorgänge für Inhalte an den Client hinzugefügt werden.If the connection is successful, that connection is passed to bindConnectionMessage, which adds event handlers for incoming content pushes to the client.

HubConnection.start() startet die Kommunikation mit dem Hub.HubConnection.start() starts communication with the hub. Dann fügt onConnected() die Schaltfläche für Ereignishandler hinzu.Then, onConnected() adds the button event handlers. Diese Handler nutzen die Verbindung, um für diesen Client das Übertragen von Inhaltsupdates per Pushvorgang an alle verbundenen Clients zu ermöglichen.These handlers use the connection to allow this client to push content updates to all connected clients.

Hinzufügen eines Entwicklungslaufzeit-ProfilsAdd a development runtime profile

In diesem Abschnitt fügen Sie eine Entwicklungslaufzeitumgebung für ASP.NET Core hinzu.In this section, you'll add a development runtime environment for ASP.NET Core. Weitere Informationen finden Sie unter Arbeiten mit mehreren Umgebungen in ASP.NET Core.For more information, see Work with multiple environments in ASP.NET Core.

  1. Erstellen Sie in Ihrem Projekt einen Ordner mit dem Namen Eigenschaften.Create a folder named Properties in your project.

  2. Fügen Sie dem Ordner eine neue Datei namens launchSettings.json mit folgendem Inhalt hinzu, und speichern Sie die Datei.Add a new file named launchSettings.json to the folder, with the following content, and save the file.

    {
        "profiles" : 
        {
            "ChatRoom": 
            {
                "commandName": "Project",
                "launchBrowser": true,
                "environmentVariables": 
                {
                    "ASPNETCORE_ENVIRONMENT": "Development"
                },
                "applicationUrl": "http://localhost:5000/"
            }
        }
    }
    

Lokales Erstellen und Ausführen der AppBuild and run the app locally

  1. Führen Sie den folgenden Befehl in der Befehlsshell aus, um die App mithilfe der .NET Core-CLI zu erstellen:To build the app by using the .NET Core CLI, run the following command in the command shell:

     dotnet build
    
  2. Führen Sie nach erfolgreicher Erstellung den folgenden Befehl aus, um die Web-App lokal auszuführen:After the build successfully finishes, run the following command to run the web app locally:

     dotnet run
    

    Die App wird lokal über Port 5000 gehostet, wie in Ihrem Entwicklungslaufzeit-Profil konfiguriert:The app will be hosted locally on port 5000, as configured in our development runtime profile:

     E:\Testing\chattest>dotnet run
     Hosting environment: Development
     Content root path: E:\Testing\chattest
     Now listening on: http://localhost:5000
     Application started. Press Ctrl+C to shut down.    
    
  3. Öffnen Sie zwei Browserfenster.Open two browser windows. Wechseln Sie in jedem Browser zu http://localhost:5000.In each browser, go to http://localhost:5000. Sie werden aufgefordert, Ihren Namen einzugeben.You're prompted to enter your name. Geben Sie einen Clientnamen für beide Clients ein, und testen Sie das Übertragen von Nachrichteninhalten zwischen den Clients per Pushvorgang über die Schaltfläche Send (Senden).Enter a client name for both clients and test pushing message content between both clients by using the Send button.

    Beispiel für einen Azure SignalR-Gruppenchat

Bereinigen von RessourcenClean up resources

Falls Sie mit dem nächsten Tutorial fortfahren, können Sie die in dieser Schnellstartanleitung erstellten Ressourcen beibehalten und wiederverwenden.If you'll continue to the next tutorial, you can keep the resources created in this quickstart and reuse them.

Wenn Sie die Schnellstart-Beispielanwendung nicht mehr benötigen, können Sie die in dieser Schnellstartanleitung erstellten Azure-Ressourcen löschen, um das Anfallen von Kosten zu vermeiden.If you're finished with the quickstart sample application, you can delete the Azure resources created in this quickstart to avoid charges.

Wichtig

Das Löschen einer Ressourcengruppe kann nicht rückgängig gemacht werden und umfasst alle Ressourcen dieser Gruppe.Deleting a resource group is irreversible and includes all the resources in that group. Achten Sie daher darauf, dass Sie nicht versehentlich die falsche Ressourcengruppe oder die falschen Ressourcen löschen.Make sure that you don't accidentally delete the wrong resource group or resources. Falls Sie die Ressourcen zum Hosten dieses Beispiels in einer vorhandenen Ressourcengruppe erstellt haben, die beizubehaltende Ressourcen enthält, können Sie die Ressourcen einzeln über ihr Blatt löschen, statt die Ressourcengruppe zu löschen.If you created the resources for hosting this sample in an existing resource group that contains resources you want to keep, you can delete each resource individually from its blade instead of deleting the resource group.

Melden Sie sich beim Azure-Portal an, und klicken Sie auf Ressourcengruppen.Sign in to the Azure portal and select Resource groups.

Geben Sie im Textfeld Nach Name filtern den Namen Ihrer Ressourcengruppe ein.In the Filter by name text box, type the name of your resource group. In dieser Schnellstartanleitung wurde eine Ressourcengruppe mit dem Namen SignalRTestResources verwendet.The instructions for this quickstart used a resource group named SignalRTestResources. Wählen Sie in Ihrer Ressourcengruppe in der Ergebnisliste die Auslassungspunkte ( ... ) > Ressourcengruppe löschen aus.On your resource group in the result list, select the ellipsis (...) > Delete resource group.

Auswahl für das Löschen einer Ressourcengruppe

Sie werden aufgefordert, das Löschen der Ressourcengruppe zu bestätigen.You're asked to confirm the deletion of the resource group. Geben Sie zur Bestätigung den Namen Ihrer Ressourcengruppe ein, und klicken Sie auf Löschen.Enter the name of your resource group to confirm, and select Delete.

Daraufhin werden die Ressourcengruppe und alle darin enthaltenen Ressourcen gelöscht.After a few moments, the resource group and all of its resources are deleted.

Nächste SchritteNext steps

In diesem Schnellstart haben Sie eine neue Azure SignalR Service-Ressource erstellt.In this quickstart, you created a new Azure SignalR Service resource. Sie haben sie dann mit einer ASP.NET Core-Web-App verwendet, um Inhaltsaktualisierungen in Echtzeit auf mehrere verbundene Clients per Pushvorgang zu übertragen.You then used it with an ASP.NET Core web app to push content updates in real time to multiple connected clients. Weitere Informationen zur Verwendung des Azure SignalR Service finden Sie im Tutorial, in dem es um die Authentifizierung geht.To learn more about using Azure SignalR Service, continue to the tutorial that demonstrates authentication.