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.
- 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.
- ./user-mgt/user-mgt.js :
- ./chat/client.js
- ./deploy : Azure Resource Management Template to create ACS instance
- 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.
git clone https://github.com/salujamanish/ACS-JS-blog2-samplecode.git
- Get the
Connection String
from the Azure portal. For more information on connection strings, see Create an Azure Communication Resources - Once you get the
Connection String
, Set the environment variable with nameCOMMUNICATION_SERVICES_CONNECTION_STRING
andACS_ENDPOINT_URL
.
- Open instance of PowerShell, Windows Terminal, Command Prompt or equivalent and go to the user-mgt folder, run the command
npm install
. - 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. - Set the environment variables
USER1_ID
,USER2_ID
,USER_ACCESS_TOKEN
with value received in previous step. Also set the environment variablesUSER1_DISPLAY_NAME
andUSER2_DISPLAY_NAME
values with any display name of members of the chat. - Switch the path from user-mgt to chat folder, run the command
npm install
. - 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
. - Open your browser and navigate to http://localhost:8080/. In the developer tools console within your browser you should see following:
- 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.