Add WhatsApp-style typing indicator for multiple users

backend/controllers/RoomController.js

@@ -292,18 +292,70 @@ class RoomController {
     }
   }
 
-  // Handle typing indicator
+  // Handle typing indicator - now supports multiple users
   handleTyping(socket, { roomId, userName }) {
     try {
+      const user = userService.getUser(socket.id);
+      if (!user || user.getCurrentRoom() !== roomId) {
+        return { success: false, error: 'User not in room' };
+      }
+
+      // Update user typing state
       userService.updateUserTyping(socket.id, true);
-      socket.to(roomId).emit("userTyping", userName);
+
+      // Get all typing users in the room directly from userService
+      const allUsers = userService.getAllUsers();
+      const typingUsers = allUsers.filter(u => 
+        u.currentRoom === roomId && 
+        u.isTyping && 
+        u.socketId !== socket.id
+      ).map(u => ({
+        socketId: u.socketId,
+        userName: u.userName
+      }));
+
+      // Broadcast updated typing users to all users in the room except sender
+      socket.to(roomId).emit("usersTyping", { typingUsers });
+
       return { success: true };
     } catch (error) {
       console.error('Error in handleTyping:', error);
       return { success: false, error: error.message };
     }
   }
 
+  // Handle stop typing indicator
+  handleStopTyping(socket, { roomId, userName }) {
+    try {
+      const user = userService.getUser(socket.id);
+      if (!user || user.getCurrentRoom() !== roomId) {
+        return { success: false, error: 'User not in room' };
+      }
+
+      // Update user typing state
+      userService.updateUserTyping(socket.id, false);
+
+      // Get all typing users in the room directly from userService
+      const allUsers = userService.getAllUsers();
+      const typingUsers = allUsers.filter(u => 
+        u.currentRoom === roomId && 
+        u.isTyping && 
+        u.socketId !== socket.id
+      ).map(u => ({
+        socketId: u.socketId,
+        userName: u.userName
+      }));
+
+      // Broadcast updated typing users to all users in the room except sender
+      socket.to(roomId).emit("usersTyping", { typingUsers });
+
+      return { success: true };
+    } catch (error) {
+      console.error('Error in handleStopTyping:', error);
+      return { success: false, error: error.message };
+    }
+  }
+
   // Handle chat messages
   handleChatMessage(socket, { roomId, userName, message }) {
     try {

backend/routes/socketRoutes.js

@@ -117,20 +117,19 @@ class SocketRoutes {
         }
       });
 
+      socket.on("stopTyping", (data) => {
+        const result = this.roomController.handleStopTyping(socket, data);
+        if (!result.success) {
+          console.error("Stop typing error:", result.error);
+        }
+      });
+
       socket.on("chatMessage", (data) => {
         const result = this.roomController.handleChatMessage(socket, data);
         if (!result.success) {
           console.error("Chat message error:", result.error);
         }
       });
-      // it shows who is typing!!
-      socket.on("typing", ({ roomId, user }) => {
-        socket.to(roomId).emit("userTyping", { user });
-      });
-
-      socket.on("stopTyping", ({ roomId, user }) => {
-        socket.to(roomId).emit("userStopTyping", { user });
-      });
 
       // Video call events
       socket.on("join-call", (data) => {

backend/services/RoomService.js

@@ -162,6 +162,20 @@ class RoomService {
     return Array.from(this.rooms.keys());
   }
 
+  // Get typing users in room
+  getTypingUsersInRoom(roomId) {
+    // To avoid circular dependency, we'll get the userService instance from the controller
+    // For now, return empty array and we'll pass users from controller
+    const room = this.rooms.get(roomId);
+
+    if (!room) {
+      return [];
+    }
+
+    // This will be populated by the controller
+    return [];
+  }
+
   // Get room statistics
   getRoomStats() {
     const stats = {