Aan de slag met het hero-voorbeeld van groeps-chat

  • Artikel
  • 4 minuten om te lezen

Belangrijk

Dit voorbeeld is beschikbaar op GitHub.

In Azure Communication Services Hero-voorbeeld van groepschat ziet u hoe de Communication Services Chat Web SDK kan worden gebruikt om een ervaring voor groepsgesprekken te bouwen.

In deze quickstart over hero-voorbeelden komt u te weten hoe het voorbeeld werkt voordat u het op uw lokale computer gaat uitvoeren. Vervolgens gaat u het voorbeeld in Azure implementeren 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. Met deze toepassing worden aanvragen verzonden naar een ASP.NET Core-toepassing aan de serverzijde zodat de toepassing aan de clientzijde kan worden verbonden met Azure.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer u op de knop 'Chat starten' klikt, wordt er met de webtoepassing een token voor gebruikerstoegang opgehaald bij de toepassing aan de serverzijde. Dit token wordt vervolgens gebruikt om de client-app te verbinden met Azure Communication Services. Zodra het token is opgehaald, wordt u gevraagd om uw weergavenaam en emoji op te geven die tijdens chatsessies waaraan u deelneemt, worden weergeven.

Schermopname van het venster van de toepassing vóór de chatsessie.

Zodra u uw weergavenaam en emoji hebt geconfigureerd, kunt u deelnemen aan de chatsessie. Nu ziet u het hoofdcanvas van de chatruimte waarin zich het belangrijkste van een chatsessie afspeelt.

Schermopname van het hoofdscherm van de voorbeeldtoepassing.

Onderdelen van het belangrijkste chatscherm:

  • Belangrijkste chatgebied: Dit is het belangrijkste gebied van een chatsessie, waarin 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). Ontvangen chatberichten worden gecategoriseerd op afzender met behulp van de juiste naam en emoji. U ziet twee typen meldingen in het chatgebied: 1) Typmeldingen die laten zien dat een gebruiker typt, en 2) meldingen met betrekking tot het verzenden en lezen van berichten.
  • Header: Hier ziet de gebruiker de titel van de chatthread en de besturingselementen voor het schakelen tussen zijbalken voor deelnemers en instellingen, evenals een knop om de chatsessie af te sluiten.
  • Zijbalk: Hier worden gegevens over de deelnemers en de instellingen weergegeven wanneer u de besturingselementen in de header gebruikt om heen en weer te schakelen. 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. Via de zijbalk voor de instellingen kunt u de titel van de chatthread configureren.

Hieronder vindt u meer informatie over de vereisten en stappen voor het instellen van het voorbeeld.

Vereisten

De service en client-app lokaal implementeren

De voorbeeldchat met één thread bestaat in wezen uit twee 'toepassingen': een client- en een servertoepassing.

Open Visual Studio voor chat.csproj en schakel de foutopsporingsmodus in. Hiermee wordt de front-endservice van de chat gestart. Wanneer de server-app vanuit de browser wordt benaderd, wordt het verkeer omgeleid naar de lokaal geïmplementeerde front-endservice voor de chat.

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.

Voordat u het voorbeeld voor de eerste keer uitvoert

  1. Open een instantie van PowerShell, Windows Terminal, de opdrachtprompt of een vergelijkbare service en ga naar de map waarnaar u het voorbeeld wilt klonen.
  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
  3. Haal de Connection String op uit Azure Portal. Zie Een Azure Communication Services maken voor meer informatie Azure Communication Services verbindingsreeksen
  4. Nadat u de Connection Stringhebt opgehaald, voegt u de verbindingsreeks toe aan het bestand Chat/appsettings.json dat zich in de map Chat bevindt. Voer in de variabele uw verbindingsreeks in: ResourceConnectionString.

Lokaal uitvoeren

  1. Ga naar de map Chat en open de oplossing Chat.csproj in Visual Studio
  2. Voer het project uit. De browser wordt geopend op localhost:5000.

Problemen oplossen

  • De oplossing kan niet worden gebouwd; er worden fouten weergegeven tijdens de installatie/bouw van NPM

    De C#-oplossing opschonen/herbouwen

Het voorbeeld naar Azure publiceren

  1. Klik met de rechtermuisknop op het Chat-project en selecteer Publiceren.
  2. Maak een nieuw publicatieprofiel en selecteer uw Azure-abonnement.
  3. Voeg vóór publicatie uw verbindingsreeks toe met Edit App Service Settings, vul ResourceConnectionString in als de sleutel en geef uw verbindingsreeks (gekopieerd uit appsettings.json) als de waarde op.

Resources 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

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen

  • Voorbeelden : meer voorbeelden en voorbeelden vindt u 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
  • ASP.NET Core: een framework voor het bouwen van webtoepassingen