Get started with the group chat hero sample

Important

This sample is available on GitHub.

The Azure Communication Services Group Chat Hero Sample demonstrates how the Communication Services Chat Web SDK can be used to build a group calling experience.

In this Sample quickstart, we'll learn how the sample works before we run the sample on your local machine. We'll then deploy the sample to Azure using your own Azure Communication Services resources.

Overview

The sample has both a client-side application and a server-side application. The client-side application is a React/Redux web application that uses Microsoft's Fluent UI framework. This application sends requests to an ASP.NET Core server-side application that helps the client-side application connect to Azure.

Here's what the sample looks like:

Screenshot showing the sample application's landing page.

When you press the "Start a Chat" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify your name and emoji that will represent you in chat.

Screenshot showing the application's pre-chat screen.

Once your configure your display name and emoji, you can join the chat session. Now you will see the main chat canvas where the core chat experience lives.

Screenshot showing showing the main screen of the sample application.

Components of the main chat screen:

  • Main Chat Area: This is the core chat experience where users can send and receives messages. To send messages, you can use the input area and press enter (or use the send button). Chat messages received are categorized by the sender with the correct name and emoji. You will see two types of notifications in the chat area: 1) typing notifications when a user is typing and 2) sent and read notifications for messages.
  • Header: This is where the user will see the title of the chat thread and the controls for toggling participant and settings side bars, and a leave button to exit the chat session.
  • Side Bar: This is where participants and setting information are shown when toggled using the controls in the header. The participants side bar contains a list of participants in the chat and a link to invite participants to the chat session. The settings side bar allows you to configure the chat thread title.

Below you'll find more information on prerequisites and steps to set up the sample.

Prerequisites

Locally deploying the service & client app

The single threaded chat sample is essentially two "applications" a client and server application.

Open up Visual Studio on the chat.csproj and run in Debug mode, this will start up the chat front end service. When the server app is visited from the browser, it will redirect traffic towards the locally deployed chat front end service.

You can test the sample locally by opening multiple browser sessions with the URL of your chat to simulate a multi-user chat.

Before running the sample for the first time

  1. Open an instance of PowerShell, Windows Terminal, Command Prompt or equivalent and navigate to the directory that you'd like to clone the sample to.
  2. git clone https://github.com/Azure-Samples/communication-services-web-chat-hero.git
  3. Get the Connection String from the Azure portal. For more information on connection strings, see Create an Azure Communication Services resources
  4. Once you get the Connection String, Add the connection string to the Chat/appsettings.json file found under the Chat folder. Input your connection string in the variable: ResourceConnectionString.

Local run

  1. Go to the Chat folder and open the Chat.csproj solution in Visual Studio
  2. Run the project. The browser will open at localhost:5000.

Troubleshooting

  • Solution doesn't build, it throws errors during NPM installation/build

    Clean/rebuild the C# solution

Publish the sample to Azure

  1. Right click on the Chat project and select Publish.
  2. Create a new publish profile and select your Azure subscription.
  3. Before publishing, add your connection string with Edit App Service Settings, and fill in ResourceConnectionString as the key and provide your connection string (copied from appsettings.json) as the value.

Clean up resources

If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. Learn more about cleaning up resources.

Next steps

Download the sample from GitHub

For more information, see the following articles:

Additional reading

  • Samples - Find more samples and examples on our samples overview page.
  • Redux - Client-side state management
  • FluentUI - Microsoft powered UI library
  • React - Library for building user interfaces
  • ASP.NET Core - Framework for building web applications