Socket.io overview in Node.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Socket.io library in a Node.js server.

Node.js

const io = require('[1]');

Drag options to blanks, or click blank then click option'

Asocket.io

Bexpress

Chttp

Dfs

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'express' instead of 'socket.io'

Using 'http' which is a different Node.js module

The Socket.io library is imported using require('socket.io') in Node.js.

2fill in blank

medium

Complete the code to create a new Socket.io server attached to an HTTP server.

Node.js

const io = require('socket.io')( [1] );

Drag options to blanks, or click blank then click option'

Aapp

Bhttp

Csocket

Dserver

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the Express app instead of the HTTP server

Passing the Socket.io instance itself

The Socket.io server is attached to the HTTP server instance, usually named server.

3fill in blank

hard

Fix the error in the code to listen for new client connections.

Node.js

io.on('[1]', (socket) => {
  console.log('A user connected');
});

Drag options to blanks, or click blank then click option'

Aconnected

Bconnect

Cconnection

Dconnects

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'connect' which is incorrect for Socket.io

Using 'connected' which is not an event name

The correct event name to listen for new connections is 'connection'.

4fill in blank

hard

Fill both blanks to emit a message to all connected clients except the sender.

Node.js

socket.[1].emit('[2]', 'Hello everyone except me');

Drag options to blanks, or click blank then click option'

Abroadcast

Bsend

Cmessage

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'socket.emit' which sends only to the sender

Using 'socket.send' which is not a method on broadcast

To send a message to all clients except the sender, use socket.broadcast.emit('message', ...).

5fill in blank

hard

Fill all three blanks to listen for a custom event and respond to the sender.

Node.js

socket.on('[1]', (data) => {
  console.log('Received:', data);
  socket.[2]('[3]', 'Got your message');
});

Drag options to blanks, or click blank then click option'

Achat message

Bemit

Creply

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'message' instead of 'chat message' as event name

Using 'broadcast.emit' instead of 'emit' to reply to sender

The code listens for the 'chat message' event, then uses socket.emit to send a 'reply' event back to the sender.

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