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

1
const subscription = new EventSource("https://example.io/subscribe")

1
import {MongoClient} from 'mongodb';
2
3
const client = new MongoClient("<mongodb-url>");
4
const ghostDb = client.db('ghost');
5
const ghostCollection = ghostDb.collection('webhooks');
6
const ghostChangeStrem = ghostCollection.watch();
7
8
ghostChangeStream.on('change', document => {
9
    /* document is the MongoDB collection entry, e.g. our webhook */
10
});

1
# ssh
2
$ git clone git@github.com:tq-bit/mongodb-article-mongo-changestreams.git
3
4
# HTTP(s)
5
$ git clone https://github.com/tq-bit/mongodb-article-mongo-changestreams.git
6
7
# Change to the starting branch
8
$ git checkout 1-get-started
9
10
# Install NPM dependencies
11
$ npm install
12
13
# Make a copy of .env.example
14
$ cp .env.example .env

1
npm run dev

1
// Replace
2
// TODO: Add function to write the head
3
// with
4
console.log('Step 1: Write the response head and keep the connection open');
5
res.writeHead(200, {
6
    'Content-Type': 'text/event-stream',
7
    'Cache-Control': 'no-cache',
8
    Connection: 'keep-alive'
9
});

1
// Replace
2
// TODO: Add functionality to write the opening message
3
// with
4
console.log('Step 2: Write the opening event message');
5
res.write('event: open\n');
6
res.write('data: Connection opened!\n'); // Data can be any string
7
res.write(`id: ${crypto.randomUUID()}\n\n`);

1
setInterval(() => {
2
    console.log('Step 3: Send a message every five seconds');
3
    res.write(`event: message\n`);
4
    res.write(`data: ${JSON.stringify({ message: 'Five seconds have passed' })}\n`);
5
    res.write(`id: ${crypto.randomUUID()}\n\n`);
6
}, 5000);
7
8
9
// Step 4: Handle request events such as client disconnect
10
// Clean up the Change Stream connection and close the connection stream to the client
11
req.on('close', () => {
12
    console.log('Step 4: Handle request events such as client disconnect');
13
    res.end();
14
});

1
// Replace
2
// TODO: Add insert one functionality for DB
3
// with
4
return notificationCollection.insertOne(notification);

1
// Replace
2
// TODO: ADD handleArticleCreationNotification
3
// with
4
const incomingWebhook: GhostWebhook = req.body;
5
await NotificationModel.createNotificiation({
6
    id: crypto.randomUUID(),
7
    ghostId: incomingWebhook.post?.current?.id,
8
    ghostOriginalUrl: incomingWebhook.post?.current?.url,
9
    ghostTitle: incomingWebhook.post?.current?.title,
10
    ghostVisibility: incomingWebhook.post?.current?.visibility,
11
    type: NotificationEventType.PostPublished,
12
});
13
14
res.status(200).send('OK');

1
curl -X POST -d '{
2
	"post": {
3
		"current": {
4
            "id": "sj7dj-lnhd1-kabah9-107gh-6hypo",
5
            "url": "http://localhost:2368/how-to-create-realtime-notifications",
6
            "title": "How to create realtime notifications",
7
            "visibility": "public"
8
		}
9
	}
10
}' http://localhost:3000/api/notification/article/create

1
const notificationStream = notificationCollection.watch();

1
notificationStream.on('change', (next) => {
2
    console.log('Step 3.1: Change in Database detected!');
3
});

1
notificationStream.on('change', (next) => {
2
    // ... previous code
3
    const {
4
        // @ts-ignore, fullDocument is not part of the next type (yet)
5
        fullDocument /* The newly inserted fullDocument */,
6
        operationType /* The MongoDB operation Type, e.g. insert */,
7
    } = next;
8
});

1
notificationStream.on('change', (next) => {
2
    // ... previous code
3
    console.log('Step 3.2: Writing out response to connected clients');
4
    res.write(`event: ${operationType}\n`);
5
    res.write(`data: ${JSON.stringify(fullDocument)}\n`);
6
    res.write(`id: ${crypto.randomUUID()}\n\n`);
7
});

1
// ... other app.use hooks
2
app.use(express.static('public'));
3
// ... app.listen()

1
<script src="http://localhost:3000/js/plugin.js"></script>
2
<link href="http://localhost:3000/css/plugin.css" rel="stylesheet">