Broadcasting to connected clients in Node.js - Step-by-Step Execution

Concept Flow - Broadcasting to connected clients

Server starts and listens

↓

Client connects

↓

Server stores client socket

↓

Server receives message/event

↓

Server loops over all clients

↓

Send message to each client

↓

Clients receive broadcast message

The server listens for clients, stores their connections, and when a message arrives, it sends that message to all connected clients.

Execution Sample

Node.js

const clients = [];
server.on('connection', socket => {
  clients.push(socket);
  socket.on('message', msg => {
    clients.forEach(c => c.send(msg));
  });
  socket.on('close', () => {
    const index = clients.indexOf(socket);
    if (index !== -1) {
      clients.splice(index, 1);
    }
  });
});

This code saves each client socket and broadcasts any received message to all clients.

Execution Table

Step	Event	Action	Clients Array	Message Sent To
1	Server starts	Listening for connections	[]	None
2	Client A connects	Add socket A to clients	[A]	None
3	Client B connects	Add socket B to clients	[A, B]	None
4	Client A sends 'Hello'	Loop clients and send 'Hello'	[A, B]	A, B
5	Client B sends 'Hi'	Loop clients and send 'Hi'	[A, B]	A, B
6	Client C connects	Add socket C to clients	[A, B, C]	None
7	Client C sends 'Hey'	Loop clients and send 'Hey'	[A, B, C]	A, B, C
8	Client A disconnects	Remove socket A from clients	[B, C]	None
9	Client B sends 'Bye'	Loop clients and send 'Bye'	[B, C]	B, C
10	Server stops	Stop listening	[B, C]	None

💡 Server stops or all clients disconnect, ending broadcast.

Variable Tracker

Variable	Start	After 2	After 3	After 6	After 8	Final
clients	[]	[A]	[A, B]	[A, B, C]	[B, C]	[B, C]

Key Moments - 3 Insights

Why do we store client sockets in an array?

We store sockets in an array (see execution_table rows 2,3,6) so we can send messages to all connected clients easily by looping over them.

What happens if a client disconnects but we don't remove it from the array?

If we don't remove disconnected clients (see row 8), trying to send messages to them will cause errors or wasted effort. So we must remove them to keep the list accurate.

Does the server send the message back to the sender client?

Yes, the server broadcasts to all clients including the sender (see rows 4,5,7,9), so the sender also receives the message.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. Which clients receive the 'Hello' message?

A Only Client A

B Only Client B

C Clients A and B

D Clients A, B, and C

💡 Hint

Check the 'Message Sent To' column at step 4 in execution_table.

At which step does Client C connect to the server?

A Step 6

B Step 3

C Step 8

D Step 9

💡 Hint

Look for 'Client C connects' event in execution_table.

If Client A disconnects but is not removed from clients array, what problem occurs?

A Server crashes immediately

B Messages sent to Client A fail or cause errors

C No problem, messages still send fine

D Clients B and C stop receiving messages

💡 Hint

Refer to key_moments about disconnect handling and execution_table row 8.

Concept Snapshot

Broadcasting to connected clients:
- Store each client socket in an array on connection
- On receiving a message, loop over all sockets
- Send the message to each client socket
- Remove sockets on disconnect to avoid errors
- Sender also receives the broadcast message

Full Transcript

This visual trace shows how a Node.js server broadcasts messages to all connected clients. When the server starts, it listens for client connections. Each new client socket is stored in an array. When any client sends a message, the server loops over all stored sockets and sends the message to each one, including the sender. If a client disconnects, its socket is removed from the array to prevent errors. This process repeats for each message and connection event until the server stops.