Integrating and enabling the Chat module in ABP Commercial

Introduction

This module implements real time messaging between users for an application.

ABP Commercial chat module provides chat features and increases your user experience & user engagement by facilitating users to connect with other users.

Let us see how you can integrate the ABP chat module.

Let's begin

This document assumes that you already created an ABP Web application with Angular as UI framework and Entity Framework Core as database provider.

Running the ABP application

Installation of abp suite

Go to command prompt and type abp suite, which will open the abp suite localhost.

1. It will list out recently used solution or else you can add your existing solution.

2. Verify that your project is selected as current solution on top right corner of the abp suite screen. Select Modules from top menu, which will list out all available modules of abp suite.

From here you can install or update new packages, find the module named chat.

3. Click on Add as Package of chat module.

This will install chat module as a nuget package to your solution

4. This will add following references

in ProjectName ApplicationModule

The Volo.Chat.SignalR package will be added in :- ProjectName.HttpApi.Host project, .HttpApi.Host project

5. SignalR Access Token Configuration for Angular Projects

Here is a sample configuration for this:

In ProjectName HttpApiHostModule

    app.Use(async (httpContext, next) =>
    {
        var accessToken = httpContext.Request.Query["access_token"];
   
        var path = httpContext.Request.Path;
         if (!string.IsNullOrEmpty(accessToken) &&
            (path.StartsWithSegments("/signalr-hubs/chat")))
            {
               httpContext.Request.Headers["Authorization"] = "Bearer " + accessToken;
            }
   
            await next();
     }); 

6. Enable chat feature to an Edition

7. Create a new tenant and assign chat feature enabled edition to it

Also enable chat feature to the newly created tenant

8.Login to the tenant user, create new User from Administration/Identity Management/Users. Enable chat permission to that user as follows

9. You will observe a chat icon on the tool bar. From there you can use the chat feature

Conclusion

This article provides the steps to integrate the ABP commercial chat module for real time messaging between users in the application. It also provides a page for searching the users in an application for new conversations, a contact list for recent conversations, and a total unread message count badge on the menu icon and lazy loaded conversations.