/communication-services-web-chat-hero

Hero sample to showcase web chat capabilities for Azure Communication Services

Primary LanguageTypeScriptMIT LicenseMIT

page_type languages products
sample
javascript
nodejs
csharp
azure
azure-communication-services

Deploy to Azure

Group Chat Sample

This is a sample application to show how the Chat Web SDK can be used to build a single threaded chat experience. The client-side application is a React based user interface which uses Redux for handling complex state while leveraging Microsoft Fluent UI. Powering this front-end is a C# web application powered by ASP.NET Core to connect this application with Azure Communication Services.

Additional documentation for this sample can be found on Microsoft Docs.

Homepage

❤️ Feedback

We appreciate your feedback and energy helping us improve our services. Please let us know if you are satisfied with ACS through this survey.

Prerequisites

Code structure

  • ./Chat/ClientApp: frontend client
    • ./Chat/ClientApp/src
      • ./Chat/ClientApp/src/Components : React components to help build the client app chat experience
      • ./Chat/ClientApp/src/Containers : Connects the redux functionality to the React components
      • ./Chat/ClientApp/src/Core : Containers a redux wrapper around the Chat SDK
      • ./Chat/ClientApp/src/index.js : Entry point for the client app
  • ./Chat/Controllers : Server app core logic for client app to get a token to use with the Azure Communication Services Web Chat SDK
  • ./Chat/Program.cs : Server app program logic
  • ./Chat/Startup.cs: Server app startup logic

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 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

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

    Clean/rebuild the C# solution

Publish to Azure

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

Building off of the sample

If you would like to build off of this sample to add chat capabilities to your own awesome application, keep a few things in mind:

  • The sample serves a Single Page Application. This has a few implications.
    • By default, the served app cannot be embedded in another frame (e.g. as a web widget). See ./Chat/Startup.cs for details on how to enable embedding.
    • By default, the backend disables Cross-Origin Resource Sharing (CORS). If you'd like to serve the backend APIs from a different domain than the static content, you must enable (restricted) CORS. This can be done by configuring a middleware in the backend in ./Chat/Startup.cs, or by configuring your server framework to modify HTTP response headers.

Additional Reading