Schnellstart: Erstellen eines Chatraums mit Azure Functions und SignalR Service mithilfe von C#Quickstart: Create a chat room with Azure Functions and SignalR Service using C#

Mit dem Azure SignalR-Dienst können Sie Ihrer Anwendung ganz einfach Echtzeitfunktionen hinzufügen.Azure SignalR Service lets you easily add real-time functionality to your application. Azure Functions ist eine serverlose Plattform, mit der Sie Ihren Code ohne Verwaltung von Infrastruktur ausführen können.Azure Functions is a serverless platform that lets you run your code without managing any infrastructure. Erfahren Sie in diesem Schnellstart, wie Sie den SignalR-Dienst und Azure Functions verwenden, um eine serverlose Chatanwendung in Echtzeit zu erstellen.In this quickstart, learn how to use SignalR Service and Functions to build a serverless, real-time chat application.

VoraussetzungenPrerequisites

Falls Sie Visual Studio 2019 noch nicht installiert haben, können Sie die kostenlose Visual Studio 2019 Community-Edition herunterladen und verwenden.If you don’t already have Visual Studio 2019 installed, you can download and use the free Visual Studio 2019 Community Edition. Aktivieren Sie beim Setup von Visual Studio die Option Azure-Entwicklung.Make sure that you enable Azure development during the Visual Studio setup.

Sie können dieses Tutorial auch über die Befehlszeile (macOS, Windows oder Linux) ausführen und dabei Azure Functions Core Tools (v2) das .NET Core SDK und Ihren bevorzugten Code-Editor verwenden.You may also run this tutorial on the command line (macOS, Windows, or Linux) using the Azure Functions Core Tools (v2), the .NET Core SDK, and your favorite code editor.

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.

Anmelden an AzureLog in to Azure

Melden Sie sich unter https://portal.azure.com/ mit Ihrem Azure-Konto beim Azure-Portal an.Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

Erstellen einer Instanz des Azure SignalR-DienstsCreate an Azure SignalR Service instance

Ihre Anwendung stellt eine Verbindung mit einer Instanz des SignalR-Diensts in Azure her.Your application will connect to a SignalR Service instance in Azure.

  1. Klicken Sie in der linken oberen Ecke des Azure-Portals auf die Schaltfläche „Neu“.Select the New button found on the upper left-hand corner of the Azure portal. Geben Sie im Bildschirm „Neu“ die Angabe SignalR-Dienst in das Suchfeld ein, und drücken Sie die EINGABETASTE.In the New screen, type SignalR Service in the search box and press enter.

    Suchen nach SignalR-Dienst

  2. Wählen Sie SignalR-Dienst aus den Suchergebnissen aus, und wählen Sie dann Erstellen aus.Select SignalR Service from the search results, then select Create.

  3. Geben Sie folgende Einstellungen ein.Enter the following settings.

    EinstellungSetting Empfohlener WertSuggested value BESCHREIBUNGDescription
    RessourcennameResource name Global eindeutiger NameGlobally unique name Der Name, der die neue Instanz des SignalR -Diensts identifiziert.Name that identifies your new SignalR Service instance. Gültige Zeichen sind a-z, 0-9 und -.Valid characters are a-z, 0-9, and -.
    AbonnementSubscription Ihr AbonnementYour subscription Das Abonnement, unter dem diese neue Instanz des SignalR-Diensts erstellt wird.The subscription under which this new SignalR Service instance is created.
    RessourcengruppeResource Group myResourceGroupmyResourceGroup Der Name für die neue Ressourcengruppe, in der Ihre Instanz des SignalR-Diensts erstellt werden soll.Name for the new resource group in which to create your SignalR Service instance.
    LocationLocation USA (Westen)West US Wählen Sie eine Region in Ihrer Nähe aus.Choose a region near you.
    PreisstufePricing tier KostenlosFree Testen Sie den Azure SignalR-Dienst kostenlos.Try Azure SignalR Service for free.
    EinheitenanzahlUnit count Nicht zutreffendNot applicable Die Einheitenanzahl gibt an, wie viele Verbindungen Ihre Instanz des SignalR-Diensts akzeptieren kann.Unit count specifies how many connections your SignalR Service instance can accept. Dies kann nur im Tarif „Standard“ konfiguriert werden.It is only configurable in the Standard tier.
    DienstmodusService mode ServerlosServerless Zur Verwendung mit Azure Functions oder der REST-API.For use with Azure Functions or REST API.

    Erstellen des SignalR-Diensts

  4. Wählen Sie Erstellen aus, um mit der Bereitstellung der Instanz des SignalR-Diensts zu beginnen.Select Create to start deploying the SignalR Service instance.

  5. Nachdem die Instanz bereitgestellt wurde, öffnen Sie sie im Portal, und navigieren Sie zur Seite „Einstellungen“.After the instance is deployed, open it in the portal and locate its Settings page. Ändern Sie die Einstellung des Dienstmodus nur dann in Serverlos, wenn Sie Azure SignalR Service über eine Azure Functions-Bindung oder REST-API verwenden.Change the Service Mode setting to Serverless only if you are using Azure SignalR Service through Azure Functions binding or REST API. Behalten Sie andernfalls die Einstellung Klassisch oder Standard bei.Leave it in Classic or Default otherwise.

Klonen der BeispielanwendungClone the sample application

Während der Dienst bereitgestellt wird, arbeiten wird mit dem Code.While the service is deploying, let's switch to working with code. Klonen Sie die Beispiel-App von GitHub, legen Sie die Verbindungszeichenfolge des SignalR-Diensts fest, und führen Sie die Anwendung lokal aus.Clone the sample app from GitHub, set the SignalR Service connection string, and run the application locally.

  1. Öffnen Sie ein Git-Terminalfenster.Open a git terminal window. Wechseln Sie in einen Ordner, in dem Sie das Beispielprojekt klonen möchten.Change to a folder where you want to clone the sample project.

  2. Führen Sie den folgenden Befehl aus, um das Beispielrepository zu klonen.Run the following command to clone the sample repository. Dieser Befehl erstellt eine Kopie der Beispiel-App auf Ihrem Computer.This command creates a copy of the sample app on your computer.

    git clone https://github.com/Azure-Samples/signalr-service-quickstart-serverless-chat.git
    

Konfigurieren und Ausführen der Azure Functions-AppConfigure and run the Azure Function app

  1. Starten Sie Visual Studio (oder einen anderen Code-Editor), und öffnen Sie die Projektmappe im Ordner src/chat/csharp des geklonten Repositorys.Start Visual Studio (or another code editor) and open the solution in the src/chat/csharp folder of the cloned repository.

  2. Bestätigen Sie im Browser, in dem das Azure-Portal geöffnet ist, dass die von Ihnen zuvor bereitgestellte SignalR-Dienstinstanz erfolgreich erstellt wurde, indem Sie nach ihrem Namen im Suchfeld oben im Portal suchen.In the browser where the Azure portal is opened, confirm the SignalR Service instance you deployed earlier was successfully created by searching for its name in the search box at the top of the portal. Wählen Sie die Instanz aus, um sie zu öffnen.Select the instance to open it.

    Suchen nach der SignalR-Dienstinstanz

  3. Wählen Sie Schlüssel aus, um die Verbindungszeichenfolgen für die SignalR-Dienstinstanz anzuzeigen.Select Keys to view the connection strings for the SignalR Service instance.

  4. Wählen Sie die primäre Verbindungszeichenfolge aus, und kopieren Sie diese.Select and copy the primary connection string.

  5. Kehren Sie zu Visual Studio zurück, und benennen Sie im Projektmappen-Explorer local.settings.sample.json in local.settings.json um.Back in Visual Studio, in Solution Explorer, rename local.settings.sample.json to local.settings.json.

  6. Fügen Sie in local.settings.json die Verbindungszeichenfolge in den Wert der AzureSignalRConnectionString-Einstellung ein.In local.settings.json, paste the connection string into the value of the AzureSignalRConnectionString setting. Speichern Sie die Datei .Save the file.

  7. Öffnen Sie Functions.cs.Open Functions.cs. Es gibt zwei durch HTTP ausgelöste Funktionen in dieser Funktions-App:There are two HTTP triggered functions in this function app:

    • GetSignalRInfo: Verwendet die SignalRConnectionInfo-Eingabebindung, um gültige Verbindungsinformationen zu generieren und zurückzugeben.GetSignalRInfo - Uses the SignalRConnectionInfo input binding to generate and return valid connection information.
    • SendMessages: Empfängt eine Chatnachricht im Anforderungstext und verwendet die SignalR-Ausgabebindung, um die Nachricht an alle verbundenen Clientanwendungen zu senden.SendMessage - Receives a chat message in the request body and uses the SignalR output binding to broadcast the message to all connected client applications.
  8. Verwenden Sie eine der folgenden Optionen, um die Azure-Funktions-App lokal zu starten.Use one of the following options to start the Azure Function app locally.

    • Visual Studio: Wählen Sie im Menü Debuggen die Option Debuggen starten aus, um die Anwendung auszuführen.Visual Studio: In the Debug menu, select Start debugging to run the application.

      Debuggen der Anwendung

    • Befehlszeile: Führen Sie den folgenden Befehl aus, um den Funktionshost zu starten.Command line: Execute the following command to start the function host.

      func start
      

Ausführen der WebanwendungRun the web application

  1. Es ist eine Single-Page-Beispielwebanwendung verfügbar, die in GitHub gehostet wird.There is a sample single page web application hosted in GitHub for your convenience. Öffnen Sie Ihren Browser mit https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.Open your browser to https://azure-samples.github.io/signalr-service-quickstart-serverless-chat/demo/chat-v2/.

    Hinweis

    Die HTML-Quelldatei befindet sich unter /docs/demo/chat-v2/index.html.The source of the HTML file is located at /docs/demo/chat-v2/index.html.

  2. Wenn Sie zur Eingabe der Basis-URL für die Funktions-App aufgefordert werden, geben Sie http://localhost:7071 ein.When prompted for the function app base URL, enter http://localhost:7071.

  3. Geben Sie einen Benutzernamen ein, wenn Sie dazu aufgefordert werden.Enter a username when prompted.

  4. Die Webanwendung ruft die Funktion GetSignalRInfo in der Funktions-App auf, um die Verbindungsinformationen zum Herstellen einer Verbindung mit dem Azure SignalR-Dienst abzurufen.The web application calls the GetSignalRInfo function in the function app to retrieve the connection information to connect to Azure SignalR Service. Nachdem die Verbindung hergestellt wurde, wird das Eingabefeld für Chatnachrichten angezeigt.When the connection is complete, the chat message input box appears.

  5. Geben Sie eine Nachricht ein, und drücken Sie die EINGABETASTE.Type a message and press enter. Die Anwendung sendet die Nachricht an die SendMessage-Funktion in der Azure Functions-App, die dann die SignalR-Ausgabebindung verwendet, um die Nachricht an alle verbundenen Clients zu senden.The application sends the message to the SendMessage function in the Azure Function app, which then uses the SignalR output binding to broadcast the message to all connected clients. Wenn alles ordnungsgemäß funktioniert, sollte die Nachricht in der Anwendung angezeigt werden.If everything is working correctly, the message should appear in the application.

    Ausführen der Anwendung

  6. Öffnen Sie eine andere Instanz der Webanwendung in einem anderen Browserfenster.Open another instance of the web application in a different browser window. Sie können erkennen, dass alle gesendeten Nachrichten in allen Instanzen der Anwendung angezeigt werden.You will see that any messages sent will appear in all instances of the application.

Wichtig

Da die HTML-Seite über HTTPS bereitgestellt wird, aber die lokale Azure Functions-Runtime standardmäßig HTTP verwendet, könnte Ihr Browser (z.B. Firefox) eine „Mixed-Content“-Richtlinie erzwingen, die die Anforderungen von der Webseite an Ihre Funktionen blockiert.Because the HTML page is served using HTTPS, but the local Azure Functions runtime is using HTTP by default, your browser (such as Firefox) may enforce a mixed-content policy that blocks the requests from the web page to your functions. Um dieses Problem zu lösen, verwenden Sie einen Browser, der diese Einschränkung nicht aufweist, oder starten Sie einen lokalen HTTP-Server wie etwa http-server im /docs/demo/chat-v2-Verzeichnis.To solve this, use a browser that does not have this restriction or start a local HTTP server such as http-server in the /docs/demo/chat-v2 directory. Stellen Sie sicher, dass der Ursprung der CORS-Einstellung in local.settings.json hinzugefügt wird.Ensure the origin is added to the CORS setting in local.settings.json.

Bereinigen von RessourcenClean up resources

Wenn Sie diese App nicht weiter verwenden möchten, löschen Sie alle von diesem Schnellstart erstellten Ressourcen. Führen Sie dazu folgende Schritte durch, damit keine Gebühren anfallen:If you're not going to continue to use this app, delete all resources created by this quickstart with the following steps so you don't incur any charges:

  1. Klicken Sie ganz links im Azure-Portal auf Ressourcengruppen und anschließend auf die erstellte Ressourcengruppe.In the Azure portal, select Resource groups on the far left, and then select the resource group you created. Alternativ können Sie das Suchfeld verwenden, um nach der Ressourcengruppe anhand ihres Namens zu suchen.Alternatively, you may use the search box to find the resource group by its name.

  2. Wählen im Fenster, das geöffnet wird, die Ressourcengruppe aus, und klicken Sie dann auf Ressourcengruppe löschen.In the window that opens, select the resource group, and then click Delete resource group.

  3. Geben Sie in dem neuen Fenster den Namen der zu löschenden Ressourcengruppe ein, und klicken Sie dann auf Löschen.In the new window, type the name of the resource group to delete, and then click Delete.

Nächste SchritteNext steps

In dieser Schnellstartanleitung haben Sie eine serverlose Echtzeitanwendung in Visual Studio erstellt und ausgeführt.In this quickstart, you built and ran a real-time serverless application in Visual Studio. Erfahren Sie im nächsten Schritt mehr darüber, wie Sie Azure Functions mit Visual Studio entwickeln und bereitstellen können.Next, learn more about how to develop and deploy Azure Functions with Visual Studio.