Let's get started!

Prerequisites:

Node.js and npm installed on your system.
Basic understanding of JavaScript and Node.js.

Step 1: Set up the Project

Create a new project folder and initialize a new Node.js project with npm.

mkdir real-time-chat-app
cd real-time-chat-app
npm init -y

Step 2: Install Dependencies

Install the necessary packages for our application.

npm install express socket.io mongoose

Step 3: Set up the Server

Create an app.js file in the root of your project and set up the server using Express and Socket.io.

// app.js

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const mongoose = require('mongoose');

// Connect to MongoDB
mongoose.connect('your_mongodb_uri', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

const PORT = 3000;

// Start the server
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 4: Create MongoDB Schema

In this example, we'll create a simple schema for storing chat messages. Create a new folder called models in your project's root and add a Message.js file with the following content:

// models/Message.js

const mongoose = require('mongoose');

const messageSchema = new mongoose.Schema({
  user: String,
  text: String,
  timestamp: { type: Date, default: Date.now },
});

const Message = mongoose.model('Message', messageSchema);

module.exports = Message;

Step 5: Implement Socket.io for Real-Time Chat

Now, we'll implement the Socket.io logic to handle real-time chat functionality.

// app.js

// Add these lines after the previous code in app.js

const Message = require('./models/Message');

io.on('connection', (socket) => {
  console.log('User connected:', socket.id);

  // Listen for incoming chat messages
  socket.on('chat message', (data) => {
    console.log('Received message:', data);

    // Save the message to MongoDB
    const message = new Message({ user: data.user, text: data.message });
    message.save((err) => {
      if (err) {
        console.error('Error saving message to database:', err);
      } else {
        console.log('Message saved to the database');
      }
    });

    // Broadcast the message to all connected clients
    io.emit('chat message', data);
  });

  // Listen for user disconnection
  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

Step 6: Create Frontend

Now, create a basic HTML file to interact with the server using Socket.io.

<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
  <title>Real-Time Chat</title>
</head>
<body>
  <h1>Real-Time Chat App</h1>
  <div id="chat">
    <ul id="messages"></ul>
    <form id="messageForm">
      <input id="messageInput" autocomplete="off" />
      <button>Send</button>
    </form>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    // Handle incoming chat messages
    socket.on('chat message', (data) => {
      const messages = document.getElementById('messages');
      const li = document.createElement('li');
      li.textContent = `${data.user}: ${data.message}`;
      messages.appendChild(li);
    });

    // Handle form submission
    document.getElementById('messageForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const input = document.getElementById('messageInput');
      const message = input.value.trim();
      if (message !== '') {
        socket.emit('chat message', { user: 'User', message });
        input.value = '';
      }
    });
  </script>
</body>
</html>

Step 7: Serving Static Files

Create a folder called public in your project's root directory and place the index.html file inside it. Additionally, modify the app.js to serve static files from this folder.

// app.js

// Add these lines after the previous code in app.js

app.use(express.static('public'));

Step 8: Run the Application

Now, you can run your real-time chat application using the following command:

node app.js

Open your browser and visit http://localhost:3000. You can open multiple browser tabs to simulate multiple users and see real-time chat in action.

Remember, this example is a basic implementation. In a real-world scenario, you may need to handle user authentication, store messages more efficiently, and add various other features to make the chat application more robust and secure.

Complete Code: GitHub

Building a real-time chat application using Node.js, MongoDB, and Express