Socket.io integration with Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when a client connects?

Given this Express and Socket.io server setup, what will the server log when a client connects?

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) => {
  console.log('A user connected');
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

server.listen(3000);

A The server logs 'connection error' when a client connects.

B The server logs 'A user disconnected' immediately when a client connects.

C The server logs nothing when a client connects.

D The server logs 'A user connected' immediately when a client connects.

💡 Hint

Look at the event name inside io.on() and what it logs.

The connection event triggers when a client connects, so the server logs 'A user connected'.

📝 Syntax

intermediate

Which option correctly initializes Socket.io with Express?

Choose the correct way to integrate Socket.io with an Express app.

A const io = new Server(server); // where server is created by http.createServer(app)

B const io = new Server(app);

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

D const io = new Server(); io.attach(app);

💡 Hint

Socket.io needs the HTTP server, not just the Express app.

Socket.io must be attached to the HTTP server created from Express, not the Express app itself.

❓ state_output

advanced

What is the value of 'count' after 3 clients connect and disconnect?

Consider this code snippet:

let count = 0;
io.on('connection', (socket) => {
  count++;
  socket.on('disconnect', () => {
    count--;
  });
});

What is the value of count after 3 clients connect and then all disconnect?

A 3

B 0

C -3

D 1

💡 Hint

Think about how count changes on connection and disconnection.

Each connection increments count by 1, and each disconnect decrements it by 1. After 3 connect and 3 disconnect events, count returns to 0.

🔧 Debug

advanced

Why does this Socket.io server not receive client messages?

Review this server code snippet:

io.on('connection', (socket) => {
  socket.on('message', (msg) => {
    console.log('Message:', msg);
  });
});

Clients send messages with socket.emit('msg', 'hello'). Why does the server not log the messages?

A The client must use <code>socket.on</code> to send messages.

B The server must use <code>io.emit</code> to receive messages.

C The server listens for 'message' but clients emit 'msg', so events don't match.

D The server needs to call <code>socket.connect()</code> before listening.

💡 Hint

Check the event names used by client and server.

Event names must match exactly. The server listens for 'message' but clients emit 'msg', so the server never receives those events.

🧠 Conceptual

expert

Which best describes how Socket.io manages real-time communication with Express?

Choose the statement that best explains Socket.io's integration with Express for real-time features.

A Socket.io attaches to the existing HTTP server created from Express to handle WebSocket and fallback transports alongside HTTP requests.

B Socket.io creates a separate HTTP server and proxies Express requests through it.

C Socket.io replaces Express's routing system to manage all client-server communication.

D Socket.io runs as a standalone server and requires clients to connect to a different port than Express.

💡 Hint

Think about how Socket.io works with the HTTP server Express uses.

Socket.io attaches to the HTTP server created from Express. It handles WebSocket connections and fallback transports on the same server and port as Express HTTP requests.

Practice

1. What is the main purpose of integrating Socket.io with an Express app?

easy

A. To handle database queries

B. To enable real-time, two-way communication between client and server

C. To serve static files faster

D. To improve server-side rendering speed

Solution

1. Step 1: Understand Socket.io's role

   Socket.io is designed to add real-time communication features to web apps.

2. Step 2: Compare with Express capabilities

   Express mainly handles HTTP requests but does not support real-time events natively.

3. Final Answer:

   To enable real-time, two-way communication between client and server -> Option B

4. Quick Check:

   Socket.io = real-time communication [OK]

Hint: Socket.io = real-time events, Express = HTTP server [OK]

Common Mistakes:

• Thinking Socket.io speeds up static file serving
• Confusing Socket.io with database handling
• Assuming Socket.io improves rendering speed

2. Which code snippet correctly initializes Socket.io with an Express app?

easy

A. const http = require('http'); const server = http.createServer(app); const io = require('socket.io')(server);

B. const io = require('socket.io')(app);

C. const io = require('socket.io').listen(app);

D. const io = require('socket.io').createServer(app);

Solution

1. Step 1: Recognize Express app needs HTTP server

   Socket.io requires a raw HTTP server, not just the Express app instance.

2. Step 2: Check correct Socket.io initialization

   Creating an HTTP server from Express app and passing it to Socket.io is the correct pattern.

3. Final Answer:

   const http = require('http'); const server = http.createServer(app); const io = require('socket.io')(server); -> Option A

4. Quick Check:

   Socket.io needs HTTP server, not Express app alone [OK]

Hint: Socket.io attaches to HTTP server, not Express app directly [OK]

Common Mistakes:

• Passing Express app directly to Socket.io
• Using deprecated listen or createServer methods
• Not creating an HTTP server from Express app

3. Given this code snippet, what will be logged when a client connects?

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);
io.on('connection', (socket) => {
  console.log('User connected:', socket.id);
});
server.listen(3000);

medium

A. User connected: followed by a unique socket id

B. User connected: undefined

C. Error: socket.id is not defined

D. No output because connection event is not triggered

Solution

1. Step 1: Understand the connection event

   The 'connection' event fires when a client connects, passing a socket object.

2. Step 2: Check socket.id property

   Each socket has a unique id assigned automatically by Socket.io.

3. Final Answer:

   User connected: followed by a unique socket id -> Option A

4. Quick Check:

   socket.id exists on connection event [OK]

Hint: socket.id is unique and available on connection event [OK]

Common Mistakes:

• Assuming socket.id is undefined
• Expecting no output on connection
• Confusing socket object with request object

4. Identify the error in this Socket.io and Express integration code:

const express = require('express');
const app = express();
const io = require('socket.io')(app);
app.get('/', (req, res) => res.send('Hello'));
app.listen(3000);

medium

A. Missing event listener for 'connection' event

B. Express app cannot serve routes when Socket.io is used

C. app.listen should be called before Socket.io initialization

D. Socket.io should be attached to an HTTP server, not directly to app

Solution

1. Step 1: Check how Socket.io is initialized

   Socket.io requires an HTTP server instance, not the Express app directly.

2. Step 2: Identify correct server creation

   Must create HTTP server from Express app and pass it to Socket.io.

3. Final Answer:

   Socket.io should be attached to an HTTP server, not directly to app -> Option D

4. Quick Check:

   Socket.io needs HTTP server, not Express app [OK]

Hint: Attach Socket.io to HTTP server, not Express app [OK]

Common Mistakes:

• Passing Express app directly to Socket.io
• Ignoring need for HTTP server
• Thinking app.listen order matters here

5. You want to broadcast a message to all connected clients except the sender using Socket.io in Express. Which code snippet correctly does this inside the 'connection' event?

io.on('connection', (socket) => {
  // Broadcast 'hello' to others
  ???
});

hard

A. socket.emit('message', 'hello');

B. io.emit('message', 'hello');

C. socket.broadcast.emit('message', 'hello');

D. io.broadcast.emit('message', 'hello');

Solution

1. Step 1: Understand broadcasting in Socket.io

   To send to all except sender, use socket.broadcast.emit inside connection handler.

2. Step 2: Check each option's behavior

   io.emit sends to all including sender; socket.emit sends only to sender; io.broadcast.emit is invalid.

3. Final Answer:

   socket.broadcast.emit('message', 'hello'); -> Option C

4. Quick Check:

   Broadcast = socket.broadcast.emit [OK]

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

Common Mistakes:

• Using io.emit which includes sender
• Using socket.emit which sends only to sender
• Trying io.broadcast.emit which does not exist