如何使用 Node Js 和 Express js 中的渲染更新已发送的数据

Question

I'm trying to send data at any time from my router.js to be read in Javascript, but I don't know how to pass it without having to render the page again. I want when the condition for the new coordinate is met, the data on the page is updated without reloading the page again.

router.get('/', function (req, res) {

    dbC.db.collection('collection').where('id', '==', 'AnID')
      .onSnapshot(querySnapshot => {
        querySnapshot.docChanges().forEach(change => {
          if (change.type === 'added') {
            let coord = change.doc.data();
            console.log('--------------New coord--------------');
            res.header({ lat: coord.payload_fields.latitude_gps, lng: coord.payload_fields.longitude_gps });
          }
         });
      });
      res.render('index', { title: "FMCS", title2:"Tracing", active: {home: true, map: true},  lat: 0, lng: 0 });
    })


My hbs:
 
<script>
  var point = { lat: {{{lat}}}, lng: {{{lng}}} };
</script>


  

Answer 1

You should use Firestore in the rendered page and not in the express controller if you want realtime data updates in the web page.

Firstly add Firestore dependecy in the rendered page heading

<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.1/firebase-firestore.js"></script>

Secondly initialize Firestore in the rendered page and listen to updates

<script>
  firebase.initializeApp({
    apiKey: '### FIREBASE API KEY ###',
    authDomain: '### FIREBASE AUTH DOMAIN ###',
    projectId: '### CLOUD FIRESTORE PROJECT ID ###'
  });

  var db = firebase.firestore();

  dbC.db.collection('collection').where('id', '==', 'AnID')
  .onSnapshot(querySnapshot => {
    querySnapshot.docChanges().forEach(change => {
      if (change.type === 'added') {
        // use DOM API to update data location in the rendered page
      });
    });
  })
</script>