add realtime typing

MangoAPI.BusinessLogic/HubConfig/ChatHub.cs

@@ -1,5 +1,7 @@
-using System.Threading.Tasks;
+using MangoAPI.BusinessLogic.Notifications;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.SignalR;
+using System;
 
 namespace MangoAPI.BusinessLogic.HubConfig;
 
@@ -9,4 +11,11 @@ public Task SubscribeToGroup(string groupId)
     {
         return Groups.AddToGroupAsync(Context.ConnectionId, groupId);
     }
+
+    public Task ShowTyping(Guid userId, Guid groupId, string displayName)
+    {
+        var notification = new TypingEventNotification(userId, groupId, displayName);
+
+        return Clients.Group(groupId.ToString()).PrivateChatSentTypingEventAsync(notification);
+    }
 }

MangoAPI.BusinessLogic/HubConfig/IHubClient.cs

@@ -24,4 +24,9 @@ public interface IHubClient
     /// Notifies chat subscribers on the message delete via SignalR.
     /// </summary>
     Task MessageDeletedAsync(DeleteMessageNotification notification);
+
+    /// <summary>
+    /// Notifies chat subscribers on the typing event via SignalR.
+    /// </summary>
+    Task PrivateChatSentTypingEventAsync(TypingEventNotification notification);
 }

MangoAPI.BusinessLogic/Notifications/TypingEventNotification.cs

@@ -0,0 +1,5 @@
+using System;
+
+namespace MangoAPI.BusinessLogic.Notifications;
+
+public record TypingEventNotification(Guid UserId, Guid ChatId, string DisplayName);

MangoAPI.Client/src/app/components/chats/chats.component.scss

@@ -66,4 +66,4 @@
 }
 .color-orange {
   color: #ffc588;
-}
+}

MangoAPI.Client/src/app/components/chats/chats.component.ts

@@ -29,6 +29,8 @@ import { SignalrConstants } from './signalr.constants';
 import { SendMessageNotification } from '../../types/notifications/SendMessageNotification';
 import { PrivateChatDeletedNotification } from '../../types/notifications/PrivateChatDeletedNotification';
 import { PrivateChatCreatedNotification } from '../../types/notifications/PrivateChatCreatedNotification';
+import { Tokens } from '../../types/models/Tokens';
+import { TypingEventNotification } from 'src/app/types/notifications/TypingEventNotification';
 
 @Component({
   selector: 'app-chats',
@@ -57,8 +59,12 @@ export class ChatsComponent implements OnInit {
   private signalRConnected = false;
   public realTimeConnections: string[] = [];
   public userId: string | undefined = '';
+  public userData: Tokens | undefined;
   public chats: Chat[] = [];
 
+  public typingEventArray: TypingEventNotification[] = [];
+  public typingMessage = '';
+
   public activeChat: Chat = this._defaultChatHelper.getEmptyChat();
 
   public activeChatId = '';
@@ -90,6 +96,7 @@ export class ChatsComponent implements OnInit {
     }
 
     this.userId = tokens.userId;
+    this.userData = tokens;
     this.chatFilter = 'All chats';
 
     const chatsSub$ = this._communitiesService.getUserChats();
@@ -158,6 +165,13 @@ export class ChatsComponent implements OnInit {
         this.onMessageDeleteHandler(notification);
       }
     );
+
+    this.connection.on(
+      this.signalRConstants.PrivateChatSentTypingEventAsync,
+      (notification: TypingEventNotification) => {
+        this.onTypingEventHandler(notification);
+      }
+    );
   }
 
   private onPrivateChatCreatedHandler(notification: PrivateChatCreatedNotification) {
@@ -521,6 +535,36 @@ export class ChatsComponent implements OnInit {
     return message;
   }
 
+  private onTypingEventHandler(notification: TypingEventNotification) {
+    if (notification.userId === this.userId) return;
+
+    const existingNotification = this.typingEventArray.find((x) => x.userId === notification.userId);
+
+    if (existingNotification) {
+      clearTimeout(existingNotification.timeout);
+      existingNotification.timeout = setTimeout(
+        () => this.deleteTypingEventFromArray(notification.userId),
+        1000
+      );
+      return;
+    }
+
+    notification.timeout = setTimeout(
+      () => this.deleteTypingEventFromArray(notification.userId),
+      1000
+    );
+
+    this.typingEventArray.push(notification);
+  }
+
+  private deleteTypingEventFromArray(userId: string) {
+    const index = this.typingEventArray.findIndex((item) => item.userId === userId);
+
+    if (index !== -1) {
+      this.typingEventArray.splice(index, 1);
+    }
+  }
+
   private onMessageDeleteHandler(notification: DeleteMessageNotification) {
     const selfMessage = notification.userId === this.userId;
 
@@ -545,6 +589,19 @@ export class ChatsComponent implements OnInit {
     }
   }
 
+  onTypingHandler(event: KeyboardEvent) {
+    if (!this.userData) return;
+
+    if (event.key.match(/^[a-zA-Zа-яА-ЯёЁ0-9+\-[\]{}(),./'"]$/)) {
+      this.connection.invoke(
+        this.signalRConstants.ShowTyping,
+        this.userData.userId,
+        this.activeChatId,
+        this.userData.userDisplayName
+      );
+    }
+  }
+
   private clearMessageInput(): void {
     this.messageText = '';
   }

MangoAPI.Client/src/app/components/chats/signalr.constants.ts

@@ -3,5 +3,8 @@ export class SignalrConstants {
   static PrivateChatCreatedAsync = 'PrivateChatCreatedAsync';
   static PrivateChatDeletedAsync = 'PrivateChatDeletedAsync';
   static MessageDeletedAsync = 'MessageDeletedAsync';
+  static PrivateChatSentTypingEventAsync = 'PrivateChatSentTypingEventAsync';
+
   static SubscribeToGroup = 'SubscribeToGroup';
+  static ShowTyping = 'ShowTyping';
 }

MangoAPI.Client/src/app/types/notifications/TypingEventNotification.ts

@@ -0,0 +1,7 @@
+export interface TypingEventNotification {
+  userId: string;
+  chatId: string;
+  displayName: string;
+
+  timeout: NodeJS.Timeout;
+}