Socket.io overview in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Socket.io server code do?

Consider this Node.js Socket.io server snippet. What will happen when a client connects?

Node.js

import { Server } from 'socket.io';
const io = new Server(3000);
io.on('connection', (socket) => {
  socket.emit('welcome', 'Hello client!');
});

A The server sends 'Hello client!' to the connected client immediately.

B The server waits for the client to send a message before responding.

C The server broadcasts 'Hello client!' to all connected clients.

D The server closes the connection after sending a welcome message.

💡 Hint

Look at the 'socket.emit' inside the 'connection' event.

When a client connects, the server triggers the 'connection' event. Inside, it sends a 'welcome' message only to that client using socket.emit.

❓ state_output

intermediate

What is the output of this client-side Socket.io code?

Given this client code, what will be logged in the browser console?

Node.js

import { io } from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('welcome', (msg) => {
  console.log(msg);
});

A An error will occur because the server URL is missing the port.

B Nothing will be logged because the event name is wrong.

C 'welcome' will be logged instead of the message.

D 'Hello client!' will be logged when the server sends it.

💡 Hint

Check the event name and server URL in the code.

The client listens for the 'welcome' event and logs the message sent by the server. The URL includes the port 3000, matching the server.

📝 Syntax

advanced

Which option correctly initializes a Socket.io server with CORS enabled?

You want to allow clients from any origin to connect. Which code snippet correctly sets up the server?

A const io = new Server(3000, { cors: { origin: '*' } });

B const io = new Server(3000, { cors: '*' });

C const io = new Server(3000, { cors: { origins: '*' } });

D const io = new Server(3000, { cors: { origin: true } });

💡 Hint

Check the correct property name for CORS origin in Socket.io options.

The correct way to enable CORS for all origins is to set cors: { origin: '*' }. Other options are invalid or incorrect property names.

🔧 Debug

advanced

Why does this Socket.io client fail to receive messages?

Client code: import { io } from 'socket.io-client'; const socket = io('http://localhost:3000'); socket.on('message', (data) => { console.log('Received:', data); }); Server code: import { Server } from 'socket.io'; const io = new Server(3000); io.on('connection', (socket) => { socket.emit('msg', 'Hello'); }); Why does the client never log 'Received: Hello'?

A The server emits before the client connects, so the message is lost.

B The client listens for 'message' but the server emits 'msg', so events don't match.

C The client forgot to call socket.connect() explicitly.

D The server is not running on port 3000.

💡 Hint

Check the event names used on client and server.

The client listens for 'message' events but the server emits 'msg'. Event names must match exactly for communication.

🧠 Conceptual

expert

What is the main advantage of using Socket.io over plain WebSockets?

Choose the best explanation for why developers prefer Socket.io instead of using raw WebSocket APIs.

A Socket.io requires no server setup and works purely on the client side.

B Socket.io uses less bandwidth than WebSockets by compressing all messages automatically.

C Socket.io automatically handles reconnection, fallback transports, and event-based messaging, making real-time apps easier to build.

D Socket.io only works with HTTP/2, which is faster than WebSocket.

💡 Hint

Think about features Socket.io adds beyond basic WebSocket communication.

Socket.io provides extra features like automatic reconnection, fallback to other protocols if WebSocket is unavailable, and easy event-based communication. This simplifies building real-time apps.

Practice

1. What is the main purpose of Socket.io in Node.js applications?

easy

A. To manage database connections

B. To serve static files like HTML and CSS

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

D. To compile JavaScript code on the server

Solution

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

   Socket.io is designed to create real-time communication channels between clients and servers.

2. Step 2: Compare options with Socket.io's purpose

   Serving static files, managing databases, or compiling code are not Socket.io's functions.

3. Final Answer:

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

4. Quick Check:

   Socket.io = real-time communication [OK]

Hint: Remember: Socket.io is for instant client-server messaging [OK]

Common Mistakes:

• Confusing Socket.io with static file servers
• Thinking Socket.io manages databases
• Assuming Socket.io compiles code

2. Which of the following is the correct way to import and initialize Socket.io on a Node.js server?

easy

A. const io = require('socket.io')(httpServer);

B. import io from 'socket.io'; io.listen(httpServer);

C. const io = new SocketIO(); io.attach(httpServer);

D. const io = socketio.createServer(httpServer);

Solution

1. Step 1: Recall Socket.io import syntax in Node.js

   The common pattern uses require and immediately calls it with the HTTP server instance.

2. Step 2: Check each option's syntax

   const io = require('socket.io')(httpServer); matches the standard usage: const io = require('socket.io')(httpServer);. Others use incorrect methods or syntax.

3. Final Answer:

   const io = require('socket.io')(httpServer); -> Option A

4. Quick Check:

   Standard import = require('socket.io')(server) [OK]

Hint: Socket.io import uses require and calls it with server [OK]

Common Mistakes:

• Using import without proper initialization
• Trying to create Socket.io with new keyword
• Using non-existent methods like createServer

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

const io = require('socket.io')(3000);
io.on('connection', (socket) => {
  console.log('A user connected');
  socket.on('message', (msg) => {
    console.log('Message:', msg);
  });
});

medium

A. No output until a message is received

B. Message: A user connected

C. Error: 'connection' event not recognized

D. A user connected

Solution

1. Step 1: Understand the 'connection' event

   The 'connection' event triggers when a client connects, logging 'A user connected'.

2. Step 2: Check when 'message' event logs occur

   The 'message' event logs only when a message is received, so no message means no 'Message:' log.

3. Final Answer:

   A user connected -> Option D

4. Quick Check:

   'connection' event logs connection message [OK]

Hint: Connection event logs immediately on client connect [OK]

Common Mistakes:

• Expecting message log without sending a message
• Thinking 'connection' event is invalid
• Assuming no output until message event

4. Identify the error in this Socket.io server code:

const io = require('socket.io')(3000);
io.on('connect', (socket) => {
  console.log('Client connected');
});

medium

A. The event name should be 'connection', not 'connect'

B. Missing parentheses after require

C. Socket.io cannot listen on port 3000 directly

D. Callback function should have two parameters

Solution

1. Step 1: Check the event name for client connections

   Socket.io uses 'connection' event, not 'connect', to detect new clients.

2. Step 2: Verify other code parts

   Require syntax and callback parameters are correct; listening on port 3000 is valid.

3. Final Answer:

   The event name should be 'connection', not 'connect' -> Option A

4. Quick Check:

   Use 'connection' event for client connect [OK]

Hint: Remember: 'connection' event, not 'connect' [OK]

Common Mistakes:

• Using 'connect' instead of 'connection'
• Thinking require needs extra parentheses
• Assuming two parameters needed in callback

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

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    // What goes here?
  });
});

hard

A. io.broadcast.emit('chat message', msg);

B. socket.broadcast.emit('chat message', msg);

C. socket.emit('chat message', msg);

D. io.emit('chat message', msg);

Solution

1. Step 1: Understand broadcasting in Socket.io

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

2. Step 2: Evaluate each option

   socket.broadcast.emit('chat message', msg); uses correct syntax. io.emit('chat message', msg); sends to all including sender. socket.emit('chat message', msg); sends only to sender. io.broadcast.emit('chat message', msg); is invalid syntax.

3. Final Answer:

   socket.broadcast.emit('chat message', msg); -> Option B

4. Quick Check:

   Broadcast excludes sender = socket.broadcast.emit [OK]

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

Common Mistakes:

• Using io.emit sends to sender too
• Trying io.broadcast.emit which doesn't exist
• Using socket.emit sends only to sender