MongoDB
MongoDB Developer Centerchevron-right
Developer Topicschevron-right
Productschevron-right
MongoDBchevron-right

Integrating MongoDB Change Streams with Socket.IO

Brian LeonardPublished Apr 18, 2022 • Updated May 19, 2022
MongoDB
Copy Link
facebook icontwitter iconlinkedin icon
random alt
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty

Integrating MongoDB Change Streams with Socket.IO

Introduction

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.
Architecture
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 socket.io
  • A client library that loads on the browser side socket.io-client
During development, socket.io 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):

Broadcasting

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

Copy Link
facebook icontwitter iconlinkedin icon
Rate this tutorial
star-empty
star-empty
star-empty
star-empty
star-empty
Related
Podcast
Making Diabetes Data More Accessible and Meaningful with Tidepool and MongoDB

May 16, 2022
Article
Window Functions & Time Series Collections

May 13, 2022
Article
Real-Time Location Updates with MongoDB Stitch, Change Streams, and Mapbox

Sep 23, 2022
Article
Resumable Initial Sync in MongoDB 4.4

May 16, 2022
Table of Contents