Kom igång med chatthjälteexemplet

Viktigt!

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

Azure Communication Services Group Chat Hero-exemplet visar hur du kan använda Webb-SDK för kommunikationstjänster för att skapa en gruppchattupplevelse.

Den här artikeln beskriver 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 till ett Node.js program på serversidan som hjälper programmet på klientsidan att ansluta till Azure.

Så här ser exemplet ut:

När du trycker på Starta en chatt hämtar webbprogrammet en användaråtkomsttoken från programmet på serversidan. Använd den här token för att ansluta klientappen till Azure Communication Services. När token har hämtats uppmanar systemet dig att ange ditt namn och välja en emoji som representerar dig i chatten.

När du har konfigurerat visningsnamnet och emojin kan du gå med i chattsessionen. Nu ser du den huvudsakliga chattarbetsytan där kärnchattupplevelsen finns.

Komponenter i huvudchattskärmen:

• Huvudchattområde: Den grundläggande chattupplevelsen där användare kan skicka och ta emot meddelanden. Om du vill skicka meddelanden kan du använda inmatningsfältet och trycka på Retur (eller använda knappen Skicka). Chattskärmen organiserar mottagna chattmeddelanden av avsändare med rätt namn och emoji. Du ser två typer av aviseringar i chattområdet: 1) skrivaviseringar när en användare skriver och 2) skickade och lästa aviseringar för meddelanden.
• Rubrik: Där användaren ser rubriken på chatttråden och kontrollerna för att växla deltagar- och inställningssidopaneler, och en knapp för att lämna chattsessionen.
• Sidofält: Där deltagare och inställningsuppgifter visas som växlas med hjälp av kontrollerna i rubriken. Deltagarnas sidofält innehåller en lista över deltagare i chatten och en länk för att bjuda in deltagare till chattsessionen. Med inställningarnas sidofält kan du konfigurera chatttrådens rubrik.

Slutför följande krav och steg för att konfigurera exemplet.

Förutsättningar

• Visual Studio Code (stabil version).
• Node.js (16.14.2 och senare).
• Skapa ett Azure-konto med en aktiv prenumeration. Mer information finns i Skapa ett konto kostnadsfritt.
• Skapa en Azure Communication Services-resurs. Mer information finns i Skapa en Azure-kommunikationsresurs. Registrera din resurs anslutningssträng för den här snabbstarten.

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

1. Öppna en instans av PowerShell, Windows Terminal, Kommandotolken eller motsvarande och navigera till katalogen till vilken du vill klona exemplet.

2. Klona lagringsplatsen med följande CLI-sträng:

   git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git

   Eller klona lagringsplatsen med någon metod som beskrivs i Klona en befintlig Git-lagringsplats.

3. Hämta Connection String och Endpoint URL från Azure-portalen eller med hjälp av Azure CLI.

   az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
   

   Mer information om anslutningssträng finns i Skapa en Azure Communication Services-resurser

4. När du har hämtat Connection Stringlägger du till anslutningssträng i filen Server/appsettings.json som finns under mappen Chatt. Ange din anslutningssträng i variabeln: ResourceConnectionString.

5. När du har hämtat Endpoint, lägger du till slutpunktssträngen i filen Server/appsetting.json. Ange slutpunkten i variabeln: EndpointUrl.

6. Hämta identity från Azure-portalen. Välj Identiteter och användaråtkomsttoken i Azure Portal. Generera en användare med Chat behörighet.

7. När du har hämtat strängen identity lägger du till identitetssträngen i filen Server/appsetting.json . Ange din identitetssträng i variabeln: AdminUserId. Servern använder strängen för att lägga till nya användare i chatttråden.

Lokal körning

1. Ange din anslutningssträng iServer/appsettings.json
2. Ange din slutpunkts-URL-sträng i Server/appsettings.json
3. Ange din adminUserId-sträng i Server/appsettings.json
4. npm run setup från rotkatalogen
5. npm run start från rotkatalogen

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.

Publicera exemplet till Azure

1. Kör följande kommandon under rotkatalogen:

   npm run setup
   npm run build
   npm run package
   

2. Använda Azure-tillägget och distribuera katalogen Chat/dist till din apptjänst

Rensa resurser

Om du vill rensa och ta bort en Communication Services-prenumeration kan du ta bort resursen eller resursgruppen. Om 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:

• Lär dig mer om chattbegrepp
• Bekanta dig med vår chatt-SDK
• Kolla in chattkomponenterna i användargränssnittsbiblioteket

Relaterade artiklar

• Exempel – Hitta fler exempel och exempel på översiktssidan för våra exempel.
• Redux – Tillståndshantering på klientsidan
• FluentUI – Microsofts drivna användargränssnittsbibliotek
• React – Bibliotek för att skapa användargränssnitt