Real-time Data with Change Streams

Utilize MongoDB's change streams to monitor and react to changes in real-time RAG statuses, ensuring data is immediately updated and retrieved without poling.
<div id='status-container'></div>
HTML structure to display RAG (Red, Amber, Green) statuses. This div will be dynamically updated with the status information.
#status-container {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;

.status-item {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
CSS styles for the status container and individual status items.
const statusContainer = document.getElementById('status-container');

// Function to render status to the DOMunction updateStatusOnUI(data) {
  const statusElement = document.createElement('div');
  statusElement.textContent = `Status: ${data.status} - Message: ${data.message}`;
JavaScript function to update the UI with a new status item.
const MongoClient = require('mongodb').MongoClient;
const client = new MongoClient(uri, { useNewUrlParser: true });

client.connect(err => {
  const collection = client.db('test').collection('devices');
  const changeStream =;

  changeStream.on('change', (change) => {
    if (change.operationType === 'insert' || change.operationType === 'update') {
      const statusData = change.fullDocument;
Setup MongoDB change streams in a Node.js environment. Replace YOUR_MONGODB_CONNECTION_STRING with your actual connection string. Also, replace 'test' and 'devices' with your database and collection names. This code sets up a listener for changes (inserts and updates) and updates the web page with the new status using the 'updateStatusOnUI' function.