Projects
Building a Real-Time Chat Application
👤 Motaz📅 December 28, 2023⏱ 12 min read
Step-by-step guide to creating a real-time chat application using Socket.io, React, and Node.js.
Building a Real-Time Chat Application
Real-time communication is a cornerstone of modern web applications. In this tutorial, we'll build a complete chat application using Socket.io, React, and Node.js.
Project Setup
Let's start by setting up our project structure:
bash
mkdir realtime-chat
cd realtime-chat
mkdir client server
# Setup server
cd server
npm init -y
npm install express socket.io cors
# Setup client
cd ../client
npx create-react-app .
npm install socket.io-client
Server Implementation
First, let's create our Express server with Socket.io:
javascript
// server/index.js
"color: #569cd6">const express = require('express');
"color: #569cd6">const http = require('http');
"color: #569cd6">const socketIo = require('socket.io');
"color: #569cd6">const cors = require('cors');
"color: #569cd6">const app = express();
"color: #569cd6">const server = http.createServer(app);
"color: #569cd6">const io = socketIo(server, {
cors: {
origin: "http://localhost:3000",
methods: ["GET", "POST"]
}
});
app.use(cors());
app.use(express.json());
// Store active users
"color: #569cd6">const activeUsers = "color: #569cd6">new Map();
io.on('connection', (socket) => {
console.log('User connected:', socket.id);
// Handle user joining
socket.on('join', (userData) => {
activeUsers.set(socket.id, userData);
socket.broadcast.emit('userJoined', userData);
// Send current active users to "color: #569cd6">new user
socket.emit('activeUsers', Array."color: #569cd6">from(activeUsers.values()));
});
// Handle message sending
socket.on('sendMessage', (messageData) => {
"color: #569cd6">const user = activeUsers.get(socket.id);
"color: #569cd6">const message = {
id: Date.now(),
text: messageData.text,
user: user,
timestamp: "color: #569cd6">new Date().toISOString()
};
// Broadcast message to all users
io.emit('newMessage', message);
});
// Handle typing indicators
socket.on('typing', (userData) => {
socket.broadcast.emit('userTyping', userData);
});
socket.on('stopTyping', (userData) => {
socket.broadcast.emit('userStoppedTyping', userData);
});
// Handle disconnection
socket.on('disconnect', () => {
"color: #569cd6">const user = activeUsers.get(socket.id);
"color: #569cd6">if (user) {
activeUsers.delete(socket.id);
socket.broadcast.emit('userLeft', user);
}
console.log('User disconnected:', socket.id);
});
});
"color: #569cd6">const PORT = process.env.PORT || 5000;
server.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
This foundation can be extended with features like private messaging, file sharing, message history, and user authentication.
QUEST TAGS:
#Socket.io#React#Node.js#Real-time