BlogAnnounced at MongoDB.local NYC 2024: A recap of all announcements and updatesLearn more >>
MongoDB Developer
Sign in to follow topics
MongoDB Developer Centerchevron-right
Developer Topicschevron-right

Integrating MongoDB Change Streams with Socket.IO

Brian Leonard5 min read • Published Apr 18, 2022 • Updated Oct 12, 2022
Facebook Icontwitter iconlinkedin icon
Rate this tutorial

Integrating MongoDB Change Streams with Socket.IO


The Socket.IO Getting Started guide provides a nice introduction to Socket.IO. The guide bundles the server and client into a single application where messages submitted via an HTML input form are received and displayed on the page.
Since MongoDB supports an exceptional eventing framework of its own, this tutorial will demonstrate how to propagate events emitted from MongoDB through to Socket.IO. To keep things consistent, I will try to mirror the Socket.IO Getting Started guide as much as possible.
Let's get started...

The web framework

As with the Socket.IO Getting Started guide, we're going to set up a simple HTML webpage, however, in our example, it's only going to display a list of messages -- there will be no input form.
First let's create a package.json manifest file that describes our project. I recommend you place it in a dedicated empty directory (I'll call mine mongo-socket-chat-example).
Then use npm to install express:
One express is installed, we can set up an index.js file that will set up our application.
This means that:
  • Express initializes app to be a function handler that you can supply to an HTTP server (as seen in line 4).
  • We define a route handler / that gets called when we hit our website home.
  • We make the HTTP server listen on port 3000.
If you run node index.js you should see the following:
Running the Web Framework
And if you point your browser to http://localhost:3000:
Hello World

Serving HTML

So far in index.js we are calling res.send and passing it a string of HTML. Our code would look very confusing if we just placed our entire application’s HTML there, so we're going to create an index.html file and serve that instead.
Let’s refactor our route handler to use sendFile instead.
Here's a simple index.html file to display a list of messages with some styling included:
If you restart the process (by hitting Control+C and running node index.js again) and refresh the page it should look like this:
Hello World Refactored

Integrating MongoDB

Since you're here, I'm going to assume you already have access to a MongoDB cluster. If you do not, just follow these Create a MongoDB Cluster instructions.
Note, a cluster (replica set) is required because we'll be using change streams, which require an oplog. There's no need to worry, however, as it is easy enough to configure a single node replica set.

Create the Database and Collection

For this example I'm going to create a chat database with a messages collection along with an initial record that I will later use to validate connectivity to MongoDB from my client application:
Initial Chat Message

Install dotenv

To avoid storing MongoDB credentials in our application code, we'll use dotenv to read the MongoDB connection string from our environment. As with the express framework, use npm to install dotenv:
Create a .env file with the following MONGODB_CONNECTION_STRING variable:
Then add the following to your index.js:
If you restart the process (by hitting Control+C and running node index.js again) you can verify that your environment is working properly:
Server Connection to MongoDB

Install the Node.js driver:

Use npm once again to install the Node.js driver:

Connect to MongoDB

Add the following code to your index.js:
Restart your application and you should see the following
MongoDB Connection Validation
For further information, this MongoDB Node.js Quick Start provides an excellent introduction to incorporating MongoDB into your Node.js applications.

Watching for Changes

We want to be alerted any time a new message is inserted into the database. For the purpose of this tutorial we'll also watch for message updates. Replace the three lines of query test code in index.js with the following:
Then edit and/or insert some messages:
Change Stream Success

Integrating Socket.IO

Socket.IO is composed of two parts:
  • A server that integrates with (or mounts on) the Node.JS HTTP Server
  • A client library that loads on the browser side
During development, serves the client automatically for us, as we’ll see, so for now we only have to install one module:
That will install the module and add the dependency to package.json. Now let’s edit index.js to add it:
Now in index.html add the following snippet before the </body> (end body tag):


The next goal is for us to emit the event from the server to the rest of the users.
In order to send an event to everyone, Socket.IO gives us the io.emit() method, which looks as follows:
So, augment our change stream code with the following:
And on the client side when we capture a 'chat message' event we’ll include it in the page. The total client-side JavaScript code now amounts to:
And that completes our chat application, in about 80 lines of code! This is what it looks like on the web client when messages are inserted or updated in our chat.messages collection in MongoDB:
Final Result

Facebook Icontwitter iconlinkedin icon
Rate this tutorial

Adding Real-Time Notifications to Ghost CMS Using MongoDB and Server-Sent Events

Aug 14, 2023 | 7 min read

Massive Arrays

Oct 06, 2022 | 4 min read
Code Example

How to Use MongoDB Client-Side Field Level Encryption (CSFLE) with C#

Sep 23, 2022 | 18 min read

Joining Collections in MongoDB with .NET Core and an Aggregation Pipeline

Feb 03, 2023 | 7 min read
Table of Contents
  • Integrating MongoDB Change Streams with Socket.IO