Azure Communication Services Group Chat App | Custom Chat app using Teams features and technology | Communication service chat app | ACS sample walkthrough

{tocify} $title={Table of Contents}

What are Azure Communication Services?

Azure Communication Services are cloud-based services with REST APIs and client library SDKs available to help you integrate communication into your applications. You can add communication features to your applications without being an expert in communication technologies such as media encoding and real-time networking. Azure Communication Services supports various communication formats:

1.  Voice and Video Calling

2.  Rich Text Chat

3.  SMS

You can connect custom client endpoints, custom services, and the publicly switched telephony network (PSTN) to your communications application. You can acquire phone numbers directly through Azure Communication Services REST APIs, SDKs, or the Azure portal; and use these numbers for SMS or calling applications. Azure Communication Services direct routing allows you to use SIP and session border controllers to connect your own PSTN carriers and bring your own phone numbers.

In addition to REST APIs, Azure Communication Services client libraries are available for various platforms and languages, including Web browsers (JavaScript), iOS (Swift), Java (Android), Windows (.NET). A UI library for web browsers can accelerate development for mobile and desktop browsers. Azure Communication Services is identity agnostic and you control how end users are identified and authenticated.

Create Azure Communication Resource

Follow below steps:

Connection strings allow the Communication Services SDKs to connect and authenticate to Azure. You can access your Communication Services connection strings and service endpoints from the Azure portal or programmatically with Azure Resource Manager APIs.

After navigating to your Communication Services resource, select Keys from the navigation menu and copy the Connection string or Endpoint values for usage by the Communication Services SDKs. Note that you have access to primary and secondary keys. This can be useful in scenarios where you would like to provide temporary access to your Communication Services resources to a third party or staging environment.

Get started with the group chat hero sample

Sample from GitHub below:

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

•    Open the complete solution in Visual studio it will look like this:

•      open the client app in visual studio code.

Once it gets install then go to the Visual studio and update the connection string of Azure communication service created in above steps in to the appsettings.json file under the key: ResourceConnectionString

Then run F5 in Visual studio to run the app locally then you will find the chat app in local host URL like below:

•    click on start chat

  

enter a name and click on join chat.

You will be able to see the above screen with you joined as a person in group chat, now copy the meeting URL from the below right corner button and open in incognito to join as another user for group chat testing. Once opened give different name and join the meeting chat.

Now you can see we are able to do a group chat with small steps using this API which gives all the features of Teams in our custom screen.

Thanks 😃💥✌🙌