ACS-JS-blog2-samplecode

Introduction

Most of the enterprise need to build interactive chat, voice and video solution for web, desktop, or mobile applications. In other way we can say we need to have programmable Chat. Let’s take a scenario where we have an existing web application in which one user want to start a chat thread with another user/group.

This repo focus on creating simple chat client using Azure javascript SDKs.

Prerequisites

• Create an Azure account with an active subscription. For details, see Create an account for free.
• Node.js (12.18.4 and above)
• Create an Azure Communication Services resource. For details, see Create an Azure Communication Resource. You'll need to record your resource connection string for this quickstart.

Code structure

• ./user-mgt/user-mgt.js :
• ./chat/client.js
• ./deploy : Azure Resource Management Template to create ACS instance

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/salujamanish/ACS-JS-blog2-samplecode.git
3. Get the Connection String from the Azure portal. For more information on connection strings, see Create an Azure Communication Resources
4. Once you get the Connection String, Set the environment variable with name COMMUNICATION_SERVICES_CONNECTION_STRING and ACS_ENDPOINT_URL.

Local run

1. Open instance of PowerShell, Windows Terminal, Command Prompt or equivalent and go to the user-mgt folder, run the command npm install.
2. Execute following node command from user-mgt folder to run the code node ./user-mgt.js run this command twice to create two different users. This shall return userId and Access Token. Save these values for further steps.
3. Set the environment variables USER1_ID, USER2_ID, USER_ACCESS_TOKEN with value received in previous step. Also set the environment variables USER1_DISPLAY_NAME and USER2_DISPLAY_NAME values with any display name of members of the chat.
4. Switch the path from user-mgt to chat folder, run the command npm install.
5. Execute following command from chat folder to run the code npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map.
6. Open your browser and navigate to http://localhost:8080/. In the developer tools console within your browser you should see following:

Additional Reading

• Azure Communication Chat SDK - To learn more about the chat web sdk.
• Fully Managed Communication Platform- Azure Communication Service - To learn more about ACS and how to deploy the communication resource on Azure Portal.