Skeleton code for displaying live streaming data with MongoDB change stream, socket.io, and plotly.js charting.
Code is sparse but hopefully it is not dumbed down. Example should be extensible. However, error handling has been left out for readability.
Display data from a MongoDB instance using change streams.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
node.js ^8.0.0 npm (installed with node.js)
A mongoDB replica set. Create free Atlas account at mongodb.com or create replicaset on your local machine. For testing, look at the docs for a single node replicaset.
For local instance, follow instructions at the following URL. Make sure you understand where the 'data' directory is located. Suggest creating a plain text file with all the commands so that you have a document from which copy and paste (and edit for error corrections).
<https://docs.mongodb.com/manual/tutorial/deploy-replica-set>
Ensure that you are using the latest version of mongo on your system. v3.6 introduced change streams.
This is example code and not a library.
Either clone the repo or download zip and unpack.
git clone changeStream-socket.io-plotly && cd changeStream-socket.io-plotly
Install dependencies
npm install
rename example.dotenv to .env && edit atlas URL (or localhost) to include your username, password and url (obtained from Atlas console). For a local setup, security credentials are optional.
atlasURL = 'mongodb+srv://<userName>:<password>@<yourMongoInstance.mongodb.net/test?retryWrites=true&w=majority'
Data generator. Open a terminal window in the code root directory and start the generator with the following command. A timestamp and random data should be logged to the console.
node generator.js
Open another terminal window. Start the application. Status and port number should be logged to the console. If you get an error message about port in use, edit code and change port number
npm start
Open browser window and enter localhost:
localhost:3300
A simply styled chart will render in the window and a dynamic trace will be built and updated at the same frequency as generator.js is configured. To change the freq just edit generator.js and change the setInterval timer (ms).
To change the number of datapoints displayed, edit plotlyChart.html (views dir) and modify
const dataPoints = 15
Eslint 'standard'
Change generator.js to modify the generated data. Consider multiple data types and use Mongo's aggregation pipeline to watch different change streams.
This is not production code. It has been stripped down to aid readability.
- MongoDB - Database
- Express - Server Framework
- NodeJs - Server Environment
- socket.io - Realtime framework
- plotlyjs - Charting library
- We greatly appreciate all those who've worked hard and open-sourced their code