Broadcasting to rooms in Express - Mini Project: Build & Apply

Broadcasting to rooms

📖 Scenario: You are building a simple chat server using Express and Socket.IO. You want to organize users into different chat rooms so messages can be sent only to users in the same room.

🎯 Goal: Create an Express server with Socket.IO that allows clients to join specific rooms and broadcast messages only to users in those rooms.

📋 What You'll Learn

Create an Express server with Socket.IO

Set up a Socket.IO connection handler

Allow clients to join a room using socket.join(roomName)

Broadcast messages to all clients in a specific room using io.to(roomName).emit()

💡 Why This Matters

🌍 Real World

Chat applications often use rooms to separate conversations by topic or group, making communication organized and efficient.

💼 Career

Understanding how to broadcast messages to rooms is essential for building real-time collaborative apps, chat systems, and multiplayer games.

1

Set up Express server and Socket.IO

Create an Express server and attach Socket.IO to it. Create a variable called app for Express and server for the HTTP server. Then create io by passing server to Socket.IO.

Express

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

// Your code here

Hint

Use express() to create the app, then http.createServer(app) for the server, and finally new Server(server) for Socket.IO.

2

Add connection event handler

Add a connection event handler on io using io.on('connection', socket => { ... }). Inside the handler, create a variable called socket representing the connected client.

Express

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

// Your code here

Hint

Use io.on('connection', socket => { ... }) to handle new clients.

3

Join clients to rooms

Inside the connection handler, listen for a 'joinRoom' event on socket. When received, call socket.join(roomName) where roomName is the event data.

Express

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', socket => {
  // Your code here
});

Hint

Use socket.on('joinRoom', roomName => { socket.join(roomName) }) to add clients to rooms.

4

Broadcast messages to rooms

Inside the connection handler, listen for a 'message' event on socket with data containing roomName and msg. Use io.to(roomName).emit('message', msg) to send the message to all clients in that room.

Express

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server);

io.on('connection', socket => {
  socket.on('joinRoom', roomName => {
    socket.join(roomName);
  });
  // Your code here
});

Hint

Listen for 'message' events with { roomName, msg } and broadcast using io.to(roomName).emit('message', msg).

Practice

1. What is the main purpose of broadcasting to rooms in Express with Socket.IO?

easy

A. To send messages to specific groups of connected clients

B. To store user data permanently on the server

C. To create new HTTP routes automatically

D. To increase server CPU usage

Solution

1. Step 1: Understand broadcasting concept

   Broadcasting to rooms means sending messages only to clients in a specific group or room.

2. Step 2: Identify purpose in Socket.IO

   Socket.IO uses rooms to organize clients so messages can be sent efficiently to those groups.

3. Final Answer:

   To send messages to specific groups of connected clients -> Option A

4. Quick Check:

   Broadcasting to rooms = targeted messaging [OK]

Hint: Rooms group clients for targeted messages [OK]

Common Mistakes:

• Thinking rooms store data permanently
• Confusing rooms with HTTP routes
• Assuming rooms increase CPU usage

2. Which of the following is the correct syntax to send a message to all clients in a room named chatroom using Socket.IO's io object?

easy

A. io.to('chatroom').emit('message', 'Hello everyone!');

B. io.emit.to('chatroom')('message', 'Hello everyone!');

C. io.in('chatroom').send('message', 'Hello everyone!');

D. io.room('chatroom').emit('message', 'Hello everyone!');

Solution

1. Step 1: Recall correct method chaining

   Socket.IO uses io.to(room).emit(event, data) to send messages to a room.

2. Step 2: Check each option's syntax

   io.to('chatroom').emit('message', 'Hello everyone!'); matches the correct syntax exactly; others have incorrect method order or names.

3. Final Answer:

   io.to('chatroom').emit('message', 'Hello everyone!'); -> Option A

4. Quick Check:

   Use io.to(room).emit() for room broadcast [OK]

Hint: Use io.to(room).emit() to broadcast [OK]

Common Mistakes:

• Using io.emit.to() instead of io.to().emit()
• Using io.in().send() which is invalid
• Using io.room() which does not exist

3. Consider this code snippet using Socket.IO:

socket.join('room1');
io.to('room1').emit('greet', 'Hi Room 1!');

What will happen when this code runs?

medium

A. No clients receive the event because of syntax error

B. All connected clients receive the 'greet' event

C. Only the client who joined 'room1' receives the 'greet' event

D. Only clients in 'room1' receive the 'greet' event

Solution

1. Step 1: Understand socket.join()

   The socket.join('room1') adds the current client to the room named 'room1'.

2. Step 2: Analyze io.to('room1').emit()

   This sends the 'greet' event to all clients currently in 'room1'.

3. Final Answer:

   Only clients in 'room1' receive the 'greet' event -> Option D

4. Quick Check:

   io.to(room).emit() targets room clients only [OK]

Hint: io.to(room).emit() sends to all in that room [OK]

Common Mistakes:

• Thinking all clients get the event
• Assuming only the joining client gets the event
• Believing syntax error prevents sending

4. Identify the error in this Socket.IO code snippet:

socket.join('roomA');
io.to('roomA').emit('update', 'New data');
socket.leave('roomA');
io.to('roomA').emit('update', 'More data');

medium

A. The second emit will not reach any clients because the socket left the room

B. The code will throw a runtime error on socket.leave()

C. Clients in 'roomA' will receive both 'update' events

D. The first emit will not send because socket.join() is asynchronous

Solution

1. Step 1: Understand socket.join() and leave()

   Joining and leaving rooms affects only the current socket, not others in the room.

2. Step 2: Analyze emits after leave()

   Even after the socket leaves, other clients in 'roomA' still receive the second emit.

3. Final Answer:

   Clients in 'roomA' will receive both 'update' events -> Option C

4. Quick Check:

   Leaving room affects only that socket, others still get messages [OK]

Hint: Leaving room affects only that socket, not all clients [OK]

Common Mistakes:

• Assuming no clients get second emit
• Expecting runtime error on leave()
• Thinking join() is asynchronous and blocks emit

5. You want to send a message to all clients in multiple rooms: room1 and room2. Which code correctly broadcasts to both rooms without sending duplicate messages to clients in both rooms?

hard

A. io.to('room1').emit('notice', 'Hello!'); io.to('room2').emit('notice', 'Hello!');

B. io.to('room1').to('room2').emit('notice', 'Hello!');

C. io.in('room1, room2').emit('notice', 'Hello!');

D. io.to(['room1', 'room2']).emit('notice', 'Hello!');

Solution

1. Step 1: Understand chaining to() calls

   Chaining io.to('room1').to('room2') sends to clients in either room without duplicates.

2. Step 2: Analyze other options

   io.to(['room1', 'room2']).emit('notice', 'Hello!'); is invalid syntax; io.in('room1, room2').emit('notice', 'Hello!'); sends to a single room named 'room1, room2'; io.to('room1').emit('notice', 'Hello!'); io.to('room2').emit('notice', 'Hello!'); sends separately causing duplicates for clients in both rooms.

3. Final Answer:

   io.to('room1').to('room2').emit('notice', 'Hello!'); -> Option B

4. Quick Check:

   Chain io.to(room) to broadcast to multiple rooms without duplicates [OK]

Hint: Chain io.to(room) calls to avoid duplicate messages [OK]

Common Mistakes:

• Using array inside io.to() which is invalid
• Sending separate emits causing duplicates
• Using comma-separated room names like 'room1, room2'