Emitting and receiving messages in Express - Mini Project: Build & Apply

Emitting and Receiving Messages with Express and Socket.IO

📖 Scenario: You are building a simple chat server using Express and Socket.IO. Users will connect to the server and send messages. The server will then broadcast these messages to all connected users.

🎯 Goal: Create a basic Express server with Socket.IO that can emit and receive messages between clients and the server.

📋 What You'll Learn

Create an Express server instance

Set up Socket.IO on the server

Listen for a message event named chat message from clients

Broadcast received messages to all connected clients using io.emit

💡 Why This Matters

🌍 Real World

Real-time chat applications, live notifications, multiplayer games, and collaborative tools use message emitting and receiving to communicate instantly between clients and servers.

💼 Career

Understanding how to emit and receive messages with Socket.IO and Express is essential for backend developers working on real-time web applications and interactive user experiences.

1

Set up Express server and Socket.IO

Create a variable called express by requiring the express module. Then create a variable called app by calling express(). Next, create a variable called http by requiring the http module. Finally, create a variable called server by calling http.createServer(app).

Express

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
// Your code here

Hint

Use require('express') to import Express and express() to create the app. Use require('http') and http.createServer(app) to create the server.

2

Initialize Socket.IO on the server

Create a variable called Server by requiring socket.io. Then create a variable called io by calling new Server(server).

Express

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);
// Your code here

Hint

Use require('socket.io') and create a new Server instance passing the server.

3

Listen for client connections and message events

Use io.on('connection', (socket) => { ... }) to listen for new client connections. Inside this callback, use socket.on('chat message', (msg) => { ... }) to listen for messages named chat message from the client.

Express

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

io.on('connection', (socket) => {
  // Your code here
});

Hint

Use io.on('connection', (socket) => { ... }) to detect new clients. Then inside, listen for chat message events on socket.

4

Broadcast received messages to all clients

Inside the socket.on('chat message', (msg) => { ... }) callback, use io.emit('chat message', msg) to send the message to all connected clients. Finally, start the server listening on port 3000 using server.listen(3000).

Express

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    // Your code here
  });
});

// Start server
// Your code here

Hint

Use io.emit to broadcast the message to all clients. Use server.listen(3000) to start the server.

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