Lesson 5: Group Chat (Rooms) - Socket.IO Learning

🎯 What You'll Learn

In this lesson, you'll master group chat functionality:

How to create and manage chat rooms
Joining and leaving rooms
Room-specific messaging
Multi-room support and room management

🔑 Room Concepts

Rooms: Virtual spaces where users can join and chat together
Room Membership: Users can be in multiple rooms simultaneously
Room-Specific Events: Messages sent only to room members
Room Management: Creating, joining, leaving, and monitoring rooms

👤 User Registration

Username:

🚪 Current Room

Not in any room

💬 Group Chat Interface

Join rooms and start group conversations

🚪 Available Rooms

No rooms available

Room Name:

Or Select:

Message:

🚪 Creating and Joining Rooms

Learn how to create rooms and manage room membership:

                    // Client-side: Join a room
socket.emit('join room', { roomName: 'general' });

// Server-side: Handle room joining
socket.on('join room', (data) => {
    const { roomName } = data;
    const user = users[socket.id];
    
    if (!user) {
        socket.emit('error', { message: 'Please register first!' });
        return;
    }
    
    // Join the room
    socket.join(roomName);
    console.log(`${user.username} joined room: ${roomName}`);
    
    // Notify room members
    io.to(roomName).emit('room message', {
        type: 'join',
        user: user.username,
        room: roomName,
        message: `${user.username} joined the room`,
        timestamp: new Date().toISOString()
    });
    
    // Send confirmation to user
    socket.emit('room joined', {
        room: roomName,
        message: `You joined room: ${roomName}`
    });
});
                

Room Management Demo

Try these scenarios:

Create a new room by entering a room name
Join existing rooms from the dropdown
Send messages in different rooms
Switch between rooms

💬 Room Messaging

Understanding how messages are sent to room members:

                    // Client-side: Send a room message
socket.emit('room message', {
    roomName: 'general',
    message: 'Hello everyone in this room!'
});

// Server-side: Handle room messaging
socket.on('room message', (data) => {
    const { roomName, message } = data;
    const user = users[socket.id];
    
    if (!user) {
        socket.emit('error', { message: 'Please register first!' });
        return;
    }
    
    console.log(`Room message in ${roomName} from ${user.username}: ${message}`);
    
    // Send message to all users in the room
    io.to(roomName).emit('room message', {
        type: 'message',
        user: user.username,
        room: roomName,
        message: message,
        timestamp: new Date().toISOString()
    });
});
                

💡 Room Messaging Best Practices

Room Validation: Check if user is in the room before sending
Message Types: Use different types for joins, leaves, and messages
Room Cleanup: Handle room cleanup when users leave
Room Limits: Consider limiting room size for performance

🚪 Leaving Rooms

Learn how to properly leave rooms and handle cleanup:

                    // Client-side: Leave a room
socket.emit('leave room', { roomName: 'general' });

// Server-side: Handle room leaving
socket.on('leave room', (data) => {
    const { roomName } = data;
    const user = users[socket.id];
    
    if (user) {
        // Leave the room
        socket.leave(roomName);
        console.log(`${user.username} left room: ${roomName}`);
        
        // Notify remaining room members
        io.to(roomName).emit('room message', {
            type: 'leave',
            user: user.username,
            room: roomName,
            message: `${user.username} left the room`,
            timestamp: new Date().toISOString()
        });
    }
});
                

🎯 Practice Exercise

Test the group chat system:

Group Chat Test