Kom igång med exemplet på gruppchatt

  • Artikel
  • 3 minuter för att läsa

Viktigt

Det här exemplet är tillgängligt på GitHub.

Exemplet Azure Communication Services för gruppchatt visar hur webb-SDK Communication Services för chatt kan användas för att skapa en gruppsamtalsupplevelse.

I den här exempelsna snabbstarten lär vi dig hur exemplet fungerar innan vi kör exemplet på den lokala datorn. Sedan distribuerar vi exemplet till Azure med dina egna Azure Communication Services resurser.

Översikt

Exemplet har både ett program på klientsidan och ett program på serversidan. Programmet på klientsidan är ett React/Redux-webbprogram som använder Microsofts Fluent UI-ramverk. Det här programmet skickar begäranden ASP.NET Core ett program på serversidan som hjälper programmet på klientsidan att ansluta till Azure.

Så här ser exemplet ut:

Skärmbild som visar exempelprogrammets landningssida.

När du trycker på knappen "Starta en chatt" hämtar webbprogrammet en användaråtkomsttoken från programmet på serversidan. Denna token används sedan för att ansluta klientappen till Azure Communication Services. När token har hämtats uppmanas du att ange ditt namn och din emoji som ska representera dig i chatten.

Skärmbild som visar programmets förchattskärm.

När du har konfigurerat ditt visningsnamn och din emoji kan du ansluta till chattsessionen. Nu visas den huvudsakliga chattarbetsytan där kärnchattupplevelsen finns.

Skärmbild som visar huvudskärmen i exempelprogrammet.

Komponenter på huvudchattskärmen:

  • Huvudchattområde: Det här är kärnchattupplevelsen där användare kan skicka och ta emot meddelanden. Om du vill skicka meddelanden kan du använda indataområdet och trycka på Retur (eller använda knappen Skicka). Mottagna chattmeddelanden kategoriseras av avsändaren med rätt namn och emoji. Du ser två typer av meddelanden i chattområdet: 1) skriva meddelanden när en användare skriver och 2) skickat och läst meddelanden för meddelanden.
  • Rubrik: Här ser användaren chatttrådens rubrik och kontrollerna för att växla mellan deltagare och inställningar, samt en spärrknapp för att avsluta chattsessionen.
  • Sidofält: Det är här deltagare och inställningsinformation visas när de reglagen i rubriken används. Sidofältet för deltagarna innehåller en lista över deltagare i chatten och en länk för att bjuda in deltagare till chattsessionen. Med sidofältet inställningar kan du konfigurera chatttrådens rubrik.

Nedan hittar du mer information om förutsättningar och steg för att konfigurera exemplet.

Förutsättningar

Distribuera tjänsten lokalt & klientappen

Det enkla trådade chattexempel är i princip två "program" ett klient- och serverprogram.

Öppna Visual Studio på chat.csproj och kör i felsökningsläge. Då startas chattens frontend-tjänst. När serverappen besöks från webbläsaren omdirigeras trafiken till den lokalt distribuerade klienttjänst för chatt.

Du kan testa exemplet lokalt genom att öppna flera webbläsarsessioner med URL:en för chatten för att simulera en chatt med flera användare.

Innan du kör exemplet för första gången

  1. Öppna en instans av PowerShell, Windows-terminal, kommandotolk eller motsvarande och navigera till den katalog som du vill klona exemplet till.
  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
  3. Hämta Connection String från Azure Portal. Mer information om anslutningssträngar finns i Skapa en Azure Communication Services resurser
  4. När du har fått Connection String lägger du till anslutningssträngen i filen Chat/appsettings.json som finns under mappen Chatt. Ange anslutningssträngen i variabeln : ResourceConnectionString .

Lokal körning

  1. Gå till mappen Chat (Chatt) och Chat.csproj öppna lösningen i Visual Studio
  2. Kör projektet. Webbläsaren öppnas på localhost:5000.

Felsökning

  • Lösningen byggs inte, den ylar fel under NPM-installation/-version

    Rensa/återskapa C#-lösningen

Publicera exemplet till Azure

  1. Högerklicka på projektet Chat och välj Publicera.
  2. Skapa en ny publiceringsprofil och välj din Azure-prenumeration.
  3. Innan du publicerar lägger du till anslutningssträngen med och fyller i som nyckel och anger anslutningssträngen (kopierad från Edit App Service Settings ResourceConnectionString appsettings.json) som värde.

Rensa resurser

Om du vill rensa och ta bort en Communication Services prenumeration kan du ta bort resursen eller resursgruppen. När du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort. Läs mer om att rensa resurser.

Nästa steg

Ladda ned exemplet från GitHub

Mer information finns i följande artiklar:

Mer att läsa

  • Exempel – Hitta fler exempel på översiktssidan för våra exempel.
  • Redux – tillståndshantering på klientsidan
  • FluentUI – Microsoft-baserat användargränssnittsbibliotek
  • React – Bibliotek för att skapa användargränssnitt
  • ASP.NET Core – Ramverk för att skapa webbprogram