0

I have just a question I want to ask if anybody have an idea about it.

I'm building a full stack application backed by nodejs and using typescript for it, in my nodejs app I'm making a fetch for an API that later on I will serve it to the user but I have one small issue, I'm using node-fetch for now but the data which are fetched are changing all the time eg. now I have 10 entries, after 5 seconds I have 30 entries, so is there a way or mechanism to make my fetching to the data with nodejs up to date by fetching them in the background?

Thanks in advance!

Errand
  • 121
  • 9
  • I suggest you to move from HTTP to WebSockets and stream your changes to your client – aminits Nov 03 '20 at 06:12
  • @A.H you can create a cron job schedule which can be set to call after 5 seconds as you wish by this you will get updated user records after every interval. – Nilesh Solanki Nov 03 '20 at 08:06

1 Answers1

0

Easiest solution to implement and good in actual sense for making your web app realtime https://pusher.com/

This is how you can handle pusher within your NodeJS App

import Pusher from 'pusher'

//Below are the keys that you will get from pusher when you go to getting started // within your Dashboard

const pusher = new Pusher({
  appId: "<Your app id provided by pusher>",
  key: "<Key id provided by pusher>",
  secret: "<Secret key given by pusher>",
  cluster: "<cluster given by pusher",
  useTLS: true
});

Now you want to setup a changeStream for your Collection in MongoDB

const db = mongoose.collection;

db.once('open', ()=>{
    const postCollection = db.collection('posts')//This will be dependent on the collection you want to watch

    const changeStream = postCollection.watch()//Make sure the collection name above are acurate

    changeStream.on('change', (change)=>{
        
        const post = change.fullDocument;//Change bring back content that change in DB Collection
        
        if (change.operationType === 'insert'){

            pusher.triger('<write channel for your pusher>', '<event in this case inser>', {

            newPost:post

         })

        }

    })

})

By that setup your pusher and backend is working now is time to setup frontend

If your usin VanillaJS the Pusher getting started has code for you

If your using ReactJS here's is the code below

import Pusher from 'pusher-js'

useEffect(()=>{

    Pusher.logToConsole = true;

    var pusher = new Pusher('<Key received from pusher>', {
      cluster: '<cluster received from pusher>'
    });

    var channel = pusher.subscribe('<channel name that you wrote in server');
    channel.bind('<event that you wrote in sever',(data)=> {
      alert(JSON.stringify(data)); // This will be the data entries coming as soon as they enter DB then you can update your state by using spread operators to maintain what you have and also add new contents
    });

    //Very important to have a clean-up function to render this once 

    return ()=>{

        pusher.unbind();
        pusher.unsubscribe_all();

    }

})

Now like this you have everything being realtime

Ntshembo Hlongwane
  • 944
  • 7
  • 25