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

Need a 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

Need a 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
});

Need a 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

Need a hint?

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