diff --git a/backend/src/socket/index.js b/backend/src/socket/index.js index 0dc5251..ee7018d 100644 --- a/backend/src/socket/index.js +++ b/backend/src/socket/index.js @@ -225,6 +225,7 @@ function initializeSocket(httpServer) { // Broadcast updated active users list const users = Array.from(activeUsers.get(eventId)).map(u => JSON.parse(u)); + console.log(`📡 Emitting active_users to room ${roomName}:`, users.length, 'users'); io.to(roomName).emit('active_users', users); // Notify room about new user @@ -276,6 +277,7 @@ function initializeSocket(httpServer) { // Broadcast updated list const updatedUsers = Array.from(users).map(u => JSON.parse(u)); + console.log(`📡 Emitting active_users (after leave) to room ${roomName}:`, updatedUsers.length, 'users'); io.to(roomName).emit('active_users', updatedUsers); } @@ -599,6 +601,7 @@ function initializeSocket(httpServer) { // Broadcast updated list const updatedUsers = Array.from(users).map(u => JSON.parse(u)); + console.log(`📡 Emitting active_users (after disconnect) to room ${socket.currentEventRoom}:`, updatedUsers.length, 'users'); io.to(socket.currentEventRoom).emit('active_users', updatedUsers); // Notify about user leaving diff --git a/frontend/src/hooks/useEventChat.js b/frontend/src/hooks/useEventChat.js index db661dd..f1fdb32 100644 --- a/frontend/src/hooks/useEventChat.js +++ b/frontend/src/hooks/useEventChat.js @@ -143,12 +143,14 @@ const useEventChat = (slug, userId, event, messagesContainerRef) => { // Receive active users list socket.on('active_users', (users) => { + console.log('📡 Received active_users event:', users); // Filter out duplicates and current user const uniqueUsers = users .filter((u, index, self) => index === self.findIndex((t) => t.userId === u.userId) ) .filter((u) => u.userId !== userId); + console.log('👥 Updating active users:', uniqueUsers); setActiveUsers(uniqueUsers); }); diff --git a/frontend/src/pages/EventChatPage.jsx b/frontend/src/pages/EventChatPage.jsx index 1bd4744..96d71c2 100644 --- a/frontend/src/pages/EventChatPage.jsx +++ b/frontend/src/pages/EventChatPage.jsx @@ -246,16 +246,38 @@ const EventChatPage = () => { // Combine checked-in users with online status const getAllDisplayUsers = () => { - const activeUserIds = new Set(activeUsers.map(u => u.userId)); + // Create map of userId -> user data from activeUsers (real-time socket data) + const activeUsersMap = new Map(activeUsers.map(u => [u.userId, { ...u, isOnline: true }])); - // Merge checked-in users with online status - const allUsers = checkedInUsers.map(user => ({ - ...user, - isOnline: activeUserIds.has(user.userId), - })); + // Create map of userId -> user data from checkedInUsers (database data) + const checkedInUsersMap = new Map(checkedInUsers.map(u => [u.userId, { ...u, isOnline: false }])); - // Sort: online first, then offline - return allUsers.sort((a, b) => { + // Merge: prioritize activeUsers data (it's real-time), add offline users from checkedInUsers + const mergedMap = new Map(); + + // Add all active users (online) + activeUsers.forEach(u => { + const checkedInData = checkedInUsersMap.get(u.userId); + mergedMap.set(u.userId, { + userId: u.userId, + username: u.username, + avatar: u.avatar, + // Use additional data from checkedInUsers if available + ...checkedInData, + // Override with socket data + isOnline: true, + }); + }); + + // Add offline checked-in users (not in activeUsers) + checkedInUsers.forEach(u => { + if (!mergedMap.has(u.userId)) { + mergedMap.set(u.userId, { ...u, isOnline: false }); + } + }); + + // Convert to array and sort: online first, then offline + return Array.from(mergedMap.values()).sort((a, b) => { if (a.isOnline === b.isOnline) return 0; return a.isOnline ? -1 : 1; });