5

I'm using react js for building frontend for a website. An express server (which is a microservice) sits in between the front end and MongoDB. I make Axios calls from react js to express server (URL = http://localhost:5688/chat ) using GET, POST, PUT whenever and wherever needed.

something like below

Client side

var resp = axios.get(`http://localhost:5688/chat`);
resp.then((response) => {
this.setState({data: response.data})
})

Server side

app.js

var app = express();

app.get('/chat', function (req, res) {
    try {
        var MongoClient = require('mongodb').MongoClient;
        var url = '***********';
        MongoClient.connect(url, { useUnifiedTopology: true }, function(err, client) {
             if (err){
                console.log('error occured while connection to databse ' + err);
             }
             else{
                db.collection(collectionName).find({}).toArray(function(err, result){
                    if (err) {throw err;}
                    else{
                        client.close();
                        res.join(result); // the result would contain the data fetch from db and will be returned to my axios call
                    }
                });
            }
        });
    }
    catch (ex) {
        res.json(ex);
    }
});

app.listen(5688, function(){
    console.log('Server listening at http://localhost:5688');
});

Above is how I've implemented a GET call. Similarly, I've implemented POST and PUT methods as well.

PS: I removed a lot of intermediate code which is not very helpful for this question

Now I want to use MongoDB change stream to listen to all changes that happen to my collection on MongoDB. I'm aware of the tutorials that show how we can log the updated documents in the express server.....such as this tutorial. This makes it possible for my express server to get all the updated documents whenever data in my DB is changed.

But what I'm not sure about is how I can pass this new data to my client so that I can update my react component's state with this new data.

How do I make my frontend code sitting in my browser continuously listen to my express server (a REST API) which is already continuously listening to all changes in MongoDB with the help of change streams?

Is socket the only way to make my client continuously listen to my server? if so, how would I pass the new data coming from MongoDB streaming to the socket on the express server

Please let me know if I should provide more details. Thank you so much.

Improve this question
0

2 Answers 2

Reset to default
4

I will give you an example from my own project in production:

//Server-side

//Assume tweetDB is the DB 
//Assume you have socket.io setup

//MongoDB Change Stream
const changeStream = tweetDB.watch();


changeStream.on('change', (changes) => {

//Add a event emitter
            socket.compress(true).emit('mongoStream',changes);

        });


//Client-side in a js file or a script tag
//Assuming you have established a WebSocket connection already

//Add an event listener to listen for back end changes. 

socket.on('mongoStream',data=>{
console.log(data)

});

//Note: Socket.io is event-driven.

//Add an event emitter
socket.emit('eventName','dataToEmit');

//Add an event listener
socket.on('eventName',data=>{

//Process the data here

});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks. But I assume the code you posted is from your server right? and I suppose the variable changes will have the updated documents right. How do I send that variable to my client so that I set the state of my react component?
Because MongoDB watch returns a stream, so you probably have to use something like socket io or web socket to push the change to the front end.
Ohh thanks. I'm currently seeing how to set it up with sockets but I'm not sure if that is the best solution. Also, do you know any resources or tutorials which pass data from MongoDB watch stream to sockets?
Personally, I don't know if there are tutorials that combine both. But there are plenty of tutorials regarding WebSocket and especially socket io. However, if you need it, I can give you some sample code.
Sorry for the delay @Aviv Thank you very much for your answer. I got busy for two days and I'm yet to try your answer. Anyways I'm accepting now. I Will let you know here if there any other difficulties.
3

Is socket the only way to make my client listen to my server?

Well, yes. a socket connection is the only way you'll have to use something like socket.io or other socket implementation to do so.

However nodejs concept is the opposite of maintaining socket connections as that can become expensive when your connections amount scale up.

I feel the better more reliable solution is to ask the server every x seconds (2-3?) "has changes been made" and if so update the view.

With that said, depending on the exact state your saving on your app this might be not viable as a solution.

Improve this answer

2 Comments

Thank you. Yeah, I'm considering socket as of now but I'm looking if there are any better solutions for the exact reason you mentioned. It would be difficult to maintain a socket connection as my user base is expected to grow. Also, I thought about making my client fire GET calls every 2-3 seconds but that would defeat the purpose of making my app truly realtime.
Just keep in mind, nothing is "truly realtime", you'll have certain delays even with socket implementation due to the async nature of databases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.