Handling connection events in Express - Step-by-Step Execution

Concept Flow - Handling connection events

Start Express Server

↓

Listen for connection event

↓

Client connects

↓

Trigger connection event handler

↓

Handle client connection

↓

Send response or setup communication

↓

Connection maintained or closed

This flow shows how an Express server starts, listens for client connections, and handles each connection event step-by-step.

Execution Sample

Express

const express = require('express');
const app = express();
const server = app.listen(3000, () => {
  console.log('Server started');
});

This code starts an Express server listening on port 3000 and logs when the server is ready.

Execution Table

Step	Action	Event/Condition	Result/Output
1	Call express()	Create app instance	App object created
2	Call app.listen(3000)	Start server listening	Server starts on port 3000
3	Server ready	Listening event triggered	Console logs 'Server started'
4	Client connects	Connection event occurs	Connection handler runs (if defined)
5	Handle request	Process client request	Send response or setup communication
6	Connection ends	Client disconnects	Server waits for next connection

💡 Execution stops when server is closed or process ends

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
app	undefined	Express app object	Express app object	Express app object	Express app object	Express app object
server	undefined	undefined	Server instance listening on port 3000	Server instance listening on port 3000	Server instance listening on port 3000	Server instance listening on port 3000

Key Moments - 2 Insights

Why doesn't the server respond immediately after calling app.listen?

Because app.listen starts the server asynchronously; the 'listening' event confirms the server is ready, as shown in step 3 of the execution_table.

How does the server know when a client connects?

The server triggers a connection event when a client connects, which runs the connection handler if defined, as shown in step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is logged to the console at step 3?

A 'Listening on port 3000'

B 'Client connected'

C 'Server started'

D 'Connection closed'

💡 Hint

Check the 'Result/Output' column in step 3 of the execution_table.

At which step does the server begin listening for connections?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Action' and 'Event/Condition' columns in the execution_table.

If the client disconnects, what happens according to the execution_table?

A Server shuts down

B Server waits for next connection

C Connection handler runs again

D Server restarts

💡 Hint

See the 'Result/Output' in step 6 of the execution_table.

Concept Snapshot

Express server handles connection events by:
1. Creating an app instance with express().
2. Starting server with app.listen(port).
3. Listening for client connections.
4. Running connection handlers on client connect.
5. Sending responses and maintaining or closing connections.

Full Transcript

This visual execution shows how an Express server handles connection events. First, the server is created using express() and starts listening on a port with app.listen. When the server is ready, it logs 'Server started'. When a client connects, the server triggers a connection event and runs any connection handler. The server processes the client request and sends a response. When the client disconnects, the server waits for new connections. Variables like 'app' and 'server' track the server state throughout. Key moments include understanding asynchronous server start and connection event triggers. The quiz tests knowledge of these steps.

Practice

1. What does io.on('connection', callback) do in an Express app using Socket.IO?

easy

A. Runs the callback when a user disconnects

B. Runs the callback when the server starts

C. Runs the callback when a new user connects to the server

D. Runs the callback when the server shuts down

Solution

1. Step 1: Understand the event name 'connection'

   The 'connection' event triggers when a new client connects to the server.

2. Step 2: Understand the role of the callback

   The callback runs code to handle the new connection, such as setting up listeners.

3. Final Answer:

   Runs the callback when a new user connects to the server -> Option C

4. Quick Check:

   io.on('connection') = new user connected [OK]

Hint: Remember 'connection' means user joined [OK]

Common Mistakes:

• Confusing 'connection' with 'disconnect'
• Thinking it runs on server start
• Assuming it runs on server shutdown

2. Which of the following is the correct syntax to listen for a user disconnect event on a socket?

easy

A. io.on('disconnect', () => { /* code */ })

B. socket.on('disconnect', () => { /* code */ })

C. socket.emit('disconnect', () => { /* code */ })

D. io.emit('disconnect', () => { /* code */ })

Solution

1. Step 1: Identify the object to listen on

   The disconnect event is listened on the individual socket, not the io server object.

2. Step 2: Use the correct method and event name

   Use socket.on('disconnect', callback) to run code when that socket disconnects.

3. Final Answer:

   socket.on('disconnect', () => { /* code */ }) -> Option B

4. Quick Check:

   socket.on('disconnect') = user left [OK]

Hint: Listen on socket, not io, for disconnect [OK]

Common Mistakes:

• Using io.on instead of socket.on for disconnect
• Using emit instead of on to listen
• Listening disconnect on wrong object

3. What will be logged when this code runs and a user connects then disconnects?

io.on('connection', (socket) => {
  console.log('User connected');
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

medium

A. User connectedUser disconnected

B. User disconnectedUser connected

C. User connected

D. User disconnected

Solution

1. Step 1: When user connects

   The 'connection' event triggers, logging 'User connected'.

2. Step 2: When user disconnects

   The socket's 'disconnect' event triggers, logging 'User disconnected'.

3. Final Answer:

   User connected
   User disconnected -> Option A

4. Quick Check:

   Connect then disconnect logs both messages [OK]

Hint: Connect logs first, disconnect logs second [OK]

Common Mistakes:

• Assuming disconnect logs before connect
• Missing that disconnect logs separately
• Thinking only one message logs

4. Identify the error in this code snippet that tries to log when a user disconnects:

io.on('connection', (socket) => {
  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

socket.on('disconnect', () => {
  console.log('Another disconnect');
});

medium

A. The second socket.on('disconnect') is outside the connection handler and socket is undefined

B. The first socket.on('disconnect') should be io.on('disconnect')

C. The disconnect event should be 'disconnected' not 'disconnect'

D. The console.log statements are missing semicolons

Solution

1. Step 1: Check where socket is defined

   Socket is only defined inside the connection callback, so outside it socket is undefined.

2. Step 2: Identify the error

   The second socket.on('disconnect') is outside the connection handler, causing a runtime error.

3. Final Answer:

   The second socket.on('disconnect') is outside the connection handler and socket is undefined -> Option A

4. Quick Check:

   socket undefined outside connection callback causes error [OK]

Hint: Use socket only inside connection callback [OK]

Common Mistakes:

• Trying to use socket outside connection event
• Confusing event names 'disconnect' vs 'disconnected'
• Ignoring scope errors

5. You want to broadcast a message to all connected users except the one who just connected. Which code inside io.on('connection', (socket) => { ... }) correctly does this when a user connects?

hard

A. socket.on('message', 'A new user joined')

B. io.emit('message', 'A new user joined')

C. socket.emit('message', 'A new user joined')

D. socket.broadcast.emit('message', 'A new user joined')

Solution

1. Step 1: Understand broadcast

   socket.broadcast.emit sends to all except the current socket.

2. Step 2: Compare options

   io.emit sends to all including current socket; socket.emit sends only to current socket; socket.on listens, not sends.

3. Final Answer:

   socket.broadcast.emit('message', 'A new user joined') -> Option D

4. Quick Check:

   Broadcast excludes sender, perfect for this case [OK]

Hint: Use socket.broadcast.emit to exclude sender [OK]

Common Mistakes:

• Using io.emit which sends to sender too
• Using socket.emit which sends only to sender
• Confusing emit with on