Lesson 3: User Management - Socket.IO Learning

🎯 What You'll Learn

In this lesson, you'll master user management in Socket.IO:

How to register and track users
Managing user connections and disconnections
User presence indicators
Handling user states and data

🔑 User Management Concepts

User Registration: Associating usernames with socket connections
Connection Tracking: Monitoring who's online and who's not
User States: Storing user data and connection status
Presence Indicators: Showing who's currently online

👤 User Registration

Username:

👥 Online Users

Total Users

Your Status

Not registered

No users online

📝 User Registration Process

Learn how users register and get tracked by the server:

                    // Client-side: Register a user
socket.emit('register user', { username: 'JohnDoe' });

// Server-side: Handle user registration
socket.on('register user', (data) => {
    const { username } = data;
    
    // Store user information
    users[socket.id] = {
        id: socket.id,
        username: username,
        joinedAt: new Date().toISOString()
    };
    
    // Send confirmation to user
    socket.emit('user registered', {
        username: username,
        message: `Welcome ${username}!`
    });
    
    // Notify other users
    socket.broadcast.emit('user joined', {
        username: username,
        message: `${username} joined the chat!`
    });
});
                

Registration Demo

Try registering with different usernames and observe:

How the user list updates
Welcome messages for new users
Notifications when users join

🔍 Connection Tracking

Understanding how the server tracks user connections:

                    // Server-side: Track connections
io.on('connection', (socket) => {
    console.log('User connected:', socket.id);
    userCount++;
    
    // Broadcast updated user count
    io.emit('user count', userCount);
});

// Handle disconnections
socket.on('disconnect', () => {
    const user = users[socket.id];
    if (user) {
        // Notify others that user left
        socket.broadcast.emit('user left', {
            username: user.username,
            message: `${user.username} left the chat`
        });
        
        // Remove user from tracking
        delete users[socket.id];
    }
    
    userCount--;
    io.emit('user count', userCount);
});
                

Connection Tracking Demo

Open multiple browser tabs and observe:

User count changes as tabs open/close
Join/leave notifications
Real-time user list updates

👤 User Data Management

Learn how to store and manage user information:

                    // Server-side: User data structure
let users = {
    'socket-id-1': {
        id: 'socket-id-1',
        username: 'JohnDoe',
        joinedAt: '2024-01-01T10:00:00.000Z',
        lastSeen: '2024-01-01T10:05:00.000Z'
    },
    'socket-id-2': {
        id: 'socket-id-2',
        username: 'JaneSmith',
        joinedAt: '2024-01-01T10:02:00.000Z',
        lastSeen: '2024-01-01T10:07:00.000Z'
    }
};

// Send users list to new users
socket.emit('users list', Object.values(users));
                

💡 User Data Best Practices

Unique Identifiers: Use socket IDs as keys for quick lookup
Username Validation: Check for duplicate usernames
Data Persistence: Consider storing user data in a database
Cleanup: Always remove users on disconnect

🎯 Practice Exercise

Test the user management system:

User Management Test

Try these scenarios:

Register with a username in one tab
Open another tab and register with a different username
Close one tab and see the user leave notification
Try registering with the same username (should show error)

✅ What You've Learned

✅ How to register users with usernames
✅ How to track user connections and disconnections
✅ Managing user data and states
✅ Broadcasting user join/leave events
✅ Maintaining a real-time user list

Next Lesson: Private Chat →

👥 Lesson 3: User Management