4 mins read

How to Build Real-time Applications with Node.js and MongoDB Change Streams

Node.js and MongoDB are two popular technologies used for building real-time applications. While Node.js is a server-side JavaScript runtime environment, MongoDB is a NoSQL document-oriented database. MongoDB Change Streams is a feature that enables real-time data processing and notifications for MongoDB collections. In this tutorial, we will explore how to build real-time applications with Node.js and MongoDB Change Streams.

Prerequisites

Before we begin, you should have some knowledge of Node.js and MongoDB. You should also have Node.js and MongoDB installed on your local machine. If you don't have them installed, you can download them from their respective websites.

Step 1: Create a MongoDB Database

First, we need to create a MongoDB database. You can create a new database by running the following command in the MongoDB shell:

use mydb

Step 2: Create a Collection

Next, we need to create a collection in the database. You can create a new collection by running the following command in the MongoDB shell:

db.createCollection('mycollection')

Step 3: Insert Data into the Collection

Now, let's insert some data into the collection. You can insert a new document by running the following command in the MongoDB shell:

db.mycollection.insertOne({ name: 'John', age: 30 })

Step 4: Install Dependencies

We will use the following dependencies in our project:

express: A web application framework for Node.js
mongodb: The official MongoDB driver for Node.js
socket.io: A library for real-time web applications

You can install these dependencies by running the following command in your project directory:

npm install express mongodb socket.io

Step 5: Create a Node.js Server

Next, we need to create a Node.js server using the Express framework. Create a new file called server.js and add the following code:

const express = require('express');
const http = require('http');
const { MongoClient } = require('mongodb');
const { Server } = require('socket.io');

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

const uri = 'mongodb://localhost:27017/mydb';
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });

async function start() {
  try {
    await client.connect();

    const db = client.db('mydb');
    const collection = db.collection('mycollection');

    const changeStream = collection.watch();

    changeStream.on('change', (change) => {
      console.log(change);

      io.emit('change', change);
    });

    server.listen(3000, () => {
      console.log('Server started on http://localhost:3000');
    });
  } catch (error) {
    console.error(error);
  }
}

start();

In this code, we create an Express app, a HTTP server, and a Socket.IO server. We also create a MongoDB client and connect to the database. Finally, we create a MongoDB Change Stream on the mycollection collection and listen for changes. Whenever a change occurs, we emit a change event using Socket.IO.

Step 6: Create a Client HTML File

Next, we need to create a client HTML file that connects to the server using Socket.IO. Create a new file called index.html and add the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Real-time Application with Node.js and MongoDB Change Streams</title>
  </head>
  <body>
    <ul id="changes"></ul>

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

      socket.on('change', (change) => {
        const li = document.createElement('li');
        li.textContent = JSON.stringify(change);
        document.getElementById('changes').appendChild(li);
      });
    </script>
  </body>
</html>

In this code, we create a Socket.IO client and listen for the change event. Whenever a change occurs, we create a new li element and add it to the ul element with the ID changes.

Step 7: Start the Server

Now that we have created both the server and client files, we can start the server by running the following command in your project directory:

node server.js

This will start the server on port 3000.

Step 8: Test the Application

Open your web browser and navigate to http://localhost:3000. You should see an empty web page.

Now, let's insert some data into the mycollection collection. You can do this by running the following command in the MongoDB shell:

db.mycollection.insertOne({ name: 'Jane', age: 25 })

If everything is working correctly, you should see a new li element appear on the web page with the JSON representation of the change that was made to the collection.

Conclusion

In this tutorial, we explored how to build real-time applications with Node.js and MongoDB Change Streams. We created a MongoDB database and collection, installed the necessary dependencies, created a Node.js server using the Express framework, and created a client HTML file that connects to the server using Socket.IO. Finally, we tested the application by inserting data into the MongoDB collection and observing the real-time updates on the client web page.

MongoDB Change Streams provide a powerful way to build real-time applications that can react to data changes as they occur. With Node.js and Socket.IO, it is easy to create an application that can update in real-time and provide a seamless user experience.