Aan de slag met het voorbeeld van een chat-uitblinker

Belangrijk

Dit voorbeeld is beschikbaar op GitHub.

In het Hero-voorbeeld van Azure Communication Services Group Chat ziet u hoe u de Communication Services Chat Web SDK kunt gebruiken om een groepschatervaring te bouwen.

In dit artikel wordt beschreven hoe het voorbeeld werkt voordat we het voorbeeld uitvoeren op uw lokale computer. Vervolgens implementeren we het voorbeeld in Azure met behulp van uw eigen Azure Communication Services-resources.

Overzicht

Het voorbeeld heeft zowel een toepassing aan de clientzijde als een toepassing aan de serverzijde. De toepassing aan de clientzijde is een React/Redux-webtoepassing die gebruikmaakt van het Fluent UI-framework van Microsoft. Deze toepassing verzendt aanvragen naar een Node.js toepassing aan de serverzijde waarmee de toepassing aan de clientzijde verbinding maakt met Azure.

Het voorbeeld ziet er als volgt uit:

Wanneer u op Een chat starten drukt, haalt de webtoepassing een token voor gebruikerstoegang op uit de toepassing aan de serverzijde. Gebruik dit token om de client-app te verbinden met Azure Communication Services. Zodra het token is opgehaald, wordt u door het systeem gevraagd uw naam in te voeren en een emoji te kiezen die u in de chat vertegenwoordigt.

Zodra u uw weergavenaam en emoji hebt geconfigureerd, kunt u deelnemen aan de chatsessie. Nu ziet u het hoofdcanvas van de chat waar de kernchatervaring zich bevindt.

Onderdelen van het belangrijkste chatscherm:

• Hoofdchatgebied: de belangrijkste chatervaring waar gebruikers berichten kunnen verzenden en ontvangen. Als u berichten wilt verzenden, kunt u daarvoor het invoergebied gebruiken en op Enter drukken (of de verzendknop gebruiken). Het chatscherm organiseert ontvangen chatberichten per afzender met de juiste naam en emoji. U ziet twee typen meldingen in het chatgebied: 1) typmeldingen wanneer een gebruiker aan het typen is en 2) meldingen dat berichten zijn verzonden en gelezen.
• Koptekst: Waar de gebruiker de titel van de chatthread en de besturingselementen voor het schakelen tussen de deelnemer- en instellingenzijbalken ziet, en een knop om de chat te verlaten om de sessie af te sluiten.
• Zijbalk: Waar deelnemers en instellingeninformatie worden weergegeven wanneer deze met de bedieningselementen in de koptekst worden in- of uitgeschakeld. De zijbalk met de deelnemers bevat een lijst met de deelnemers aan de chatsessie en een koppeling om deelnemers uit te nodigen voor de chatsessie. Met de zijbalk instellingen kunt u de titel van de chatthread configureren.

Voer de volgende vereiste voorwaarden en stappen uit om het voorbeeld op te zetten.

Vereisten

• Visual Studio Code (stabiele versie).
• Node.js (16.14.2 en hoger).
• Maak een Azure-account met een actief abonnement. Zie Gratis een account maken voor meer informatie.
• Maak een Azure Communication Services-resource. Zie Een Azure Communication-resource maken voor meer informatie. Noteer uw resource verbindingsreeks voor deze starthandleiding.

Voordat u het voorbeeld voor de eerste keer uitvoert

1. Open een exemplaar van PowerShell, Windows Terminal, opdrachtprompt of gelijkwaardig en navigeer naar de map waarnaar u het voorbeeld wilt klonen.

2. Kloon de opslagplaats met behulp van de volgende CLI-tekenreeks:

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

   Of kloon de opslagplaats met behulp van een methode die wordt beschreven in Een bestaande Git-opslagplaats klonen.

3. Haal de Connection String en Endpoint URL van de Azure-portal of met behulp van de Azure CLI.

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

   Voor meer informatie over verbindingsreeksen, zie Een Azure Communication Services-resource maken

4. Zodra u het Connection Stringbestand hebt opgehaald, voegt u de verbindingsreeks toe aan het server-/appsettings.json-bestand in de map Chat. Voer in de variabele uw verbindingsreeks in: ResourceConnectionString.

5. Zodra u het Endpointbestand hebt, voegt u de eindpunttekenreeks toe aan het bestand Server/appsetting.json . Voer uw eindpunt in de variabele in: EndpointUrl.

6. Haal de identity op uit de Azure-portal. Selecteer Identiteiten en gebruikerstoegangstokens in Azure Portal. Genereer een gebruiker met Chat scope.

7. Zodra u de identity tekenreeks hebt ontvangen, voegt u de identiteitstekenreeks toe aan Server/appsetting.json. Voer uw identiteitstekenreeks in de variabele in: AdminUserId. De server gebruikt de tekenreeks om nieuwe gebruikers toe te voegen aan de chatthread.

Lokaal uitvoeren

1. Stel uw verbindingsreeks in in Server/appsettings.json
2. Stel uw eindpunt-URL-tekenreeks in Server/appsettings.json
3. Stel uw adminUserId tekenreeks in in Server/appsettings.json
4. npm run setup vanuit de worteldirectory
5. npm run start vanuit de worteldirectory

U kunt het voorbeeld lokaal testen door meerdere browsersessies te openen met de URL van uw chat om een chat met meerdere gebruikers te simuleren.

Het voorbeeld naar Azure publiceren

1. Voer onder de hoofdmap de volgende commando's uit:

   npm run setup
   npm run build
   npm run package
   

2. De Azure-extensie gebruiken en de chat-/dist-directory implementeren in uw app-service

Middelen opschonen

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd. Meer informatie over het opschonen van resources.

Volgende stappen

Het voorbeeld downloaden uit GitHub

Zie voor meer informatie:

• Meer informatie over chatconcepten
• Vertrouwd raken met onze Chat SDK
• Bekijk de chatonderdelen in de UI-bibliotheek

Verwante artikelen

• Voorbeelden - Vind meer voorbeelden en voorbeelden op onze overzichtspagina met voorbeelden.
• Redux: statusbeheer op de client
• FluentUI: door Microsoft ondersteunde bibliotheek voor de gebruikersinterface
• React: bibliotheek voor het ontwikkelen van gebruikersinterfaces