Emitting and receiving messages in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to emit a message named 'greet' with the text 'Hello'.

Express

socket.[1]('greet', 'Hello');

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

Aemit

Blisten

Con

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'emit' will not send a named event.

Using 'on' or 'listen' is for receiving messages, not sending.

The emit method sends a message with a specific name and data to the server or client.

2fill in blank

medium

Complete the code to listen for a message named 'chat' and log its data.

Express

socket.[1]('chat', (data) => {
  console.log(data);
});

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

Areceive

Bon

Csend

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'emit' tries to send a message instead of listening.

Using 'send' or 'receive' are not valid socket methods.

The on method listens for incoming messages with a given name.

3fill in blank

hard

Fix the error in the code to correctly emit a message named 'update' with an object.

Express

socket.[1]('update', { status: 'ok' });

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

Alisten

Bsend

Con

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'emit' will not send the named 'update' event.

Using 'on' or 'listen' is for receiving, not sending.

To send a named message with data, use emit. Using send sends a default message without a name.

4fill in blank

hard

Fill both blanks to listen for a 'message' event and respond by emitting 'reply' with 'Received'.

Express

socket.[1]('message', (msg) => {
  socket.[2]('reply', 'Received');
});

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

Aon

Bemit

Csend

Dlisten

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'emit' to send the reply.

Using 'emit' to listen or 'on' to send causes errors.

Use on to listen for the 'message' event, then emit to send the 'reply' event.

5fill in blank

hard

Fill all three blanks to emit 'start', listen for 'progress', and emit 'done' when progress reaches 100.

Express

socket.[1]('start');
socket.[2]('progress', (percent) => {
  if (percent === 100) {
    socket.[3]('done');
  }
});

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

Aemit

Bon

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'send' instead of 'emit' to send events.

Using 'on' to send events or 'emit' to listen causes errors.

Use emit to send 'start' and 'done' events, and on to listen for 'progress'.

Practice

1. In Express with Socket.IO, what does emitting a message mean?

easy

A. Starting the server

B. Listening for incoming messages

C. Closing the connection

D. Sending a message to connected clients

Solution

1. Step 1: Understand the meaning of emitting

   Emitting means sending a message or event from the server to clients or vice versa.

2. Step 2: Differentiate emitting from receiving

   Receiving means listening for messages, not sending them.

3. Final Answer:

   Sending a message to connected clients -> Option D

4. Quick Check:

   Emitting = Sending message [OK]

Hint: Emitting means sending messages out [OK]

Common Mistakes:

• Confusing emitting with receiving
• Thinking emitting closes connections
• Mixing emitting with server start

2. Which of the following is the correct syntax to emit a message named 'chat message' with data 'Hello' to all clients using Socket.IO in Express?

easy

A. io.send('chat message', 'Hello');

B. io.emit('chat message', 'Hello');

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

D. io.on('chat message', 'Hello');

Solution

1. Step 1: Identify the method to send to all clients

   The io.emit method sends a message to all connected clients.

2. Step 2: Check the syntax correctness

   io.emit('chat message', 'Hello'); correctly emits the event with data.

3. Final Answer:

   io.emit('chat message', 'Hello'); -> Option B

4. Quick Check:

   Use io.emit to broadcast [OK]

Hint: Use io.emit(event, data) to send to all clients [OK]

Common Mistakes:

• Using io.on instead of io.emit
• Omitting the data argument
• Using socket.emit to broadcast to all clients

3. Given this server code snippet in Express with Socket.IO:

io.on('connection', (socket) => {
  socket.on('greet', (msg) => {
    socket.emit('reply', `Hello, ${msg}`);
  });
});

What will the client receive if it emits 'greet' with message 'Alice'?

medium

A. A 'reply' event with message 'Hello, Alice'

B. No message received

C. A 'greet' event with message 'Hello, Alice'

D. An error because of missing broadcast

Solution

1. Step 1: Understand the event flow

   The server listens for 'greet' from the client, then emits 'reply' back to the same client.

2. Step 2: Check the emitted message content

   The message sent is `Hello, ${msg}`, so with 'Alice' it becomes 'Hello, Alice'.

3. Final Answer:

   A 'reply' event with message 'Hello, Alice' -> Option A

4. Quick Check:

   Reply event sends greeting with name [OK]

Hint: Server emits reply event with personalized message [OK]

Common Mistakes:

• Expecting broadcast to all clients
• Confusing event names 'greet' and 'reply'
• Thinking no message is sent back

4. What is wrong with this Express Socket.IO server code snippet?

io.on('connection', (socket) => {
  socket.emit('welcome', 'Hello client');
  socket.on('message', (msg) => {
    io.emit('message', msg);
  });
  socket.on('disconnect', () => {
    socket.emit('goodbye', 'Bye');
  });
});

medium

A. Missing callback for 'welcome' event

B. Using io.emit inside 'message' handler is invalid

C. Emitting 'goodbye' after disconnect causes error

D. No error, code is correct

Solution

1. Step 1: Analyze the 'disconnect' event usage

   When a client disconnects, the socket is closed and cannot emit messages.

2. Step 2: Identify the error

   Trying to emit 'goodbye' after disconnect causes an error because socket is no longer connected.

3. Final Answer:

   Emitting 'goodbye' after disconnect causes error -> Option C

4. Quick Check:

   Cannot emit after disconnect [OK]

Hint: Don't emit messages after disconnect event [OK]

Common Mistakes:

• Thinking io.emit is invalid inside handlers
• Expecting callback needed for emit
• Assuming no error on emitting after disconnect

5. You want to send a private message from one client to another using Express and Socket.IO. Which approach correctly emits a message only to the target client identified by targetId?

hard

A. io.to(targetId).emit('private message', msg);

B. io.emit('private message', { to: targetId, text: msg });

C. socket.broadcast.emit('private message', { to: targetId, text: msg });

D. socket.emit('private message', msg);

Solution

1. Step 1: Understand how to target a specific client

   Socket.IO uses io.to(socketId).emit() to send messages to a specific client.

2. Step 2: Evaluate each option

   io.to(targetId).emit('private message', msg); correctly uses io.to(targetId).emit() to send only to the client with targetId.

3. Final Answer:

   io.to(targetId).emit('private message', msg); -> Option A

4. Quick Check:

   Use io.to(socketId).emit for private messages [OK]

Hint: Use io.to(targetId).emit for private messages [OK]

Common Mistakes:

• Using io.emit broadcasts to all clients
• socket.broadcast.emit sends to all except sender
• socket.emit sends only to sender, not target