Erste Schritte mit dem Hero-Beispiel für Gruppenchats

Das Hero-Beispiel für Gruppenchats von Azure Communication Services veranschaulicht, wie das Communication Services Chat Web SDK verwendet werden kann, um eine Benutzeroberfläche für Gruppenchats zu erstellen.

In dieser Beispiel-Schnellstartanleitung wird beschrieben, wie das Beispiel funktioniert, bevor wir es auf Ihrem lokalen Computer ausführen. Anschließend stellen wir das Beispiel in Azure bereit, indem wir Ihre eigenen Azure Communication Services-Ressourcen verwenden.

Übersicht

Das Beispiel verfügt sowohl über eine clientseitige als auch eine serverseitige Anwendung. Die clientseitige Anwendung ist eine React/Redux-Webanwendung, für die das Fluent-UI-Framework von Microsoft verwendet wird. Diese Anwendung sendet Anforderungen an eine serverseitige ASP.NET Core-Anwendung, die für die clientseitige Anwendung die Verbindungsherstellung mit Azure ermöglicht.

Das Beispiel sieht wie folgt aus:

Screenshot: Landing Page der Beispielanwendung

Wenn Sie auf die Schaltfläche „Start a chat“ (Chat starten) klicken, ruft die Webanwendung ein Benutzerzugriffstoken aus der serverseitigen Anwendung ab. Dieses Token wird dann verwendet, um die Client-App mit Azure Communication Services zu verbinden. Nach dem Abrufen des Tokens werden Sie aufgefordert, Ihren Namen und Ihr Emoji für den Chat anzugeben.

Screenshot: Bildschirm zur Vorbereitung des Chats in der Anwendung

Nachdem Sie Ihren Anzeigenamen und Ihr Emoji konfiguriert haben, können Sie der Chatsitzung beitreten. Der Hauptbereich für Chats, der die zentrale Benutzeroberfläche für Chats enthält, wird angezeigt.

Screenshot: Hauptbildschirm der Beispielanwendung

Komponenten des Hauptbildschirms für Chats:

  • Hauptbereich für Chats: Dies ist der Hauptbereich für Chats, in dem Benutzer Nachrichten senden und empfangen können. Zum Senden von Nachrichten können Sie den Eingabebereich nutzen und dann die EINGABETASTE drücken (oder die Schaltfläche „Senden“ verwenden). Die empfangenen Chatnachrichten werden nach Absender mit dem zugehörigen Namen und Emoji kategorisiert. Im Chatbereich werden zwei Arten von Benachrichtigungen angezeigt: 1) Eingabebenachrichtigungen, wenn ein Benutzer Text eingibt, und 2) Sende- und Lesebenachrichtigungen für Nachrichten.
  • Header: Hier werden dem Benutzer der Titel des Chatthreads und die Steuerelemente zum Umschalten der Seitenleiste für die Teilnehmer und die Einstellungen angezeigt. Darüber hinaus ist eine Schaltfläche zum Beenden der Chatsitzung vorhanden.
  • Seitenleiste: Hier werden die Informationen zu den Teilnehmern und Einstellungen angezeigt, wenn der entsprechende Umschalter im Headerbereich verwendet wird. Die Seitenleiste für Teilnehmer enthält eine Liste mit den Teilnehmern des Chats und einen Link zum Einladen von Teilnehmern zur Chatsitzung. Mit der Seitenleiste für die Einstellungen können Sie den Titel des Chatthreads konfigurieren.

Unten sind weitere Informationen zu den Voraussetzungen und Schritten zum Einrichten des Beispiels angegeben.

Voraussetzungen

Lokales Bereitstellen der Dienst- und Client-App

Das Chatbeispiel mit einem Thread umfasst im Wesentlichen zwei Anwendungen: eine Client- und eine Serveranwendung.

Öffnen Sie Visual Studio mit „chat.csproj“, und starten Sie die Ausführung im Debugmodus. Der Front-End-Dienst des Chats wird gestartet. Wenn über den Browser auf die Server-App zugegriffen wird, wird Datenverkehr an den lokal bereitgestellten Front-End-Dienst des Chats umgeleitet.

Sie können das Beispiel lokal testen, indem Sie mehrere Browsersitzungen mit der URL Ihres Chats öffnen, um einen Chat mit mehreren Benutzern zu simulieren.

Vor dem erstmaligen Ausführen des Beispiels

  1. Öffnen Sie eine Instanz von PowerShell, des Windows-Terminals, einer Eingabeaufforderung oder eines gleichwertigen Tools, und navigieren Sie zu dem Verzeichnis, in dem Sie das Beispiel klonen möchten.
  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
  3. Rufen Sie im Azure-Portal die Connection String (Verbindungszeichenfolge) ab. Weitere Informationen zu Verbindungszeichenfolgen finden Sie unter Erstellen einer Azure Communication Services-Ressource.
  4. Fügen Sie nach dem Abrufen von Connection String die Zeichenfolge der Datei Chat/appsettings.json hinzu, die im Ordner „Chat“ enthalten ist. Geben Sie Ihre Verbindungszeichenfolge in die Variable ein: ResourceConnectionString.

Lokaler Testlauf

  1. Wechseln Sie zum Ordner „Chat“, und öffnen Sie die Projektmappe Chat.csproj in Visual Studio
  2. Führen Sie das Projekt aus. Der Browser wird unter „localhost:5000“ geöffnet.

Problembehandlung

  • Lösung wird nicht erstellt. Während des npm-Installations- bzw. -Buildvorgangs werden Fehler ausgelöst.

    Bereinigen/Neuerstellen der C#-Projektmappe

Veröffentlichen des Beispiels in Azure

  1. Klicken Sie mit der rechten Maustaste auf das Projekt Chat, und wählen Sie „Veröffentlichen“ aus.
  2. Erstellen Sie ein neues Veröffentlichungsprofil, und wählen Sie Ihr Azure-Abonnement aus.
  3. Fügen Sie vor dem Veröffentlichen Ihre Verbindungszeichenfolge mit Edit App Service Settings hinzu. Fügen Sie ResourceConnectionString als Schlüssel ein, und geben Sie Ihre Verbindungszeichenfolge (Kopie aus „appsettings.json“) als Wert ein.

Bereinigen von Ressourcen

Wenn Sie ein Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder die Ressourcengruppe löschen. Wenn Sie die Ressourcengruppe löschen, werden auch alle anderen Ressourcen gelöscht, die ihr zugeordnet sind. Weitere Informationen zum Bereinigen von Ressourcen finden Sie hier.

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Zusätzliche Lektüre

  • Beispiele: In der Übersicht über Beispiele finden Sie weitere Beispiele.
  • Redux: Clientseitige Zustandsverwaltung
  • Fluent-UI: UI-Bibliothek von Microsoft
  • React: Bibliothek zum Erstellen von Benutzeroberflächen
  • ASP.NET Core: Framework für die Erstellung von Webanwendungen