DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

25 1

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

Let's get started!

Prerequisites:

  1. Node.js and npm installed on your system.
  2. 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
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Dependencies

Install the necessary packages for our application.

npm install express socket.io mongoose
Enter fullscreen mode Exit fullscreen mode

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}`);
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
  });
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

Step 8: Run the Application

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

node app.js
Enter fullscreen mode Exit fullscreen mode

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series