LOADING
PLEASE WAIT...
BACK TO LORE
Projects

Building a Real-Time Chat Application

👤 Motaz📅 December 28, 202312 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
Building a Real-Time Chat Application | Overworld Lore