Incorporating fresh data from a node.js backend to refresh a webpage section

Question

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire page if the song changes. I'm exploring options to execute the code in the routes file to dynamically update the song data on the page without requiring a full refresh.

Desired functionality:

User initiates a GET request to /songinfo endpoint.
The app scrapes the latest song information from an external source.
The app renders the EJS file with the updated song data.
A timer triggers or the user manually initiates a refresh action.
Only the song data section of the page updates with the new information while the rest of the content remains unaffected.

Thank you for your help!

html css node.js express ejs

Answer 1

Answer №1

To optimize your code, consider utilizing ajax for efficiency.

An effective method is to establish a new route on your nodejs server that delivers song data as json instead of rendering an EJS file to the client.

If your current code looks like this:

app.get('/songinfo', function(req, res) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    res.render('songinfo.ejs', data);
  });
});

You can modify it to this approach:

function getSongInfo(callback) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    callback(data);
  });
}

app.get('/songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.render('songinfo.ejs', data);
  });
});

app.get('/raw-songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.setHeader('content-type', 'application/json');
    res.send(data);
  });
});

This restructuring extracts the getSongInfo logic to maintain a DRY application and introduces a second route that utilizes the same function. This time, instead of returning data in an ejs file, it sends back json. To incorporate this change into your ejs file, you can implement the following logic:

<button onclick='reloadData()'> Reload me! </button>
<script type='text/javascript'> 
  function reloadData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if(xmlhttp.status == 200){
          // Update the data in your app somehow...
          // example:
          var responseData = JSON.parse(xmlhttp.responseText);
          document.getElementById('songs-count').innerHTML = responseData.length;
        } else {
          alert('something went wrong!');
        }
      }
    }
</script>

Answer 2

To optimize your code, consider utilizing ajax for efficiency.

An effective method is to establish a new route on your nodejs server that delivers song data as json instead of rendering an EJS file to the client.

If your current code looks like this:

app.get('/songinfo', function(req, res) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    res.render('songinfo.ejs', data);
  });
});

You can modify it to this approach:

function getSongInfo(callback) {
  request.get('http://songinfo.com/songs', function(err, res, data) {
    callback(data);
  });
}

app.get('/songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.render('songinfo.ejs', data);
  });
});

app.get('/raw-songinfo', function(req, res) {
  getSongInfo(function(data) {
    res.setHeader('content-type', 'application/json');
    res.send(data);
  });
});

This restructuring extracts the getSongInfo logic to maintain a DRY application and introduces a second route that utilizes the same function. This time, instead of returning data in an ejs file, it sends back json. To incorporate this change into your ejs file, you can implement the following logic:

<button onclick='reloadData()'> Reload me! </button>
<script type='text/javascript'> 
  function reloadData() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
        if(xmlhttp.status == 200){
          // Update the data in your app somehow...
          // example:
          var responseData = JSON.parse(xmlhttp.responseText);
          document.getElementById('songs-count').innerHTML = responseData.length;
        } else {
          alert('something went wrong!');
        }
      }
    }
</script>

Incorporating fresh data from a node.js backend to refresh a webpage section

Answer №1

Similar questions

The Serverless Function on Vercel has exceeded its time limit and timed out

How Meteor Handles HTTP Requests in its package.js File

Challenges with Expanding Memory for Puppeteer

What is the best way to eliminate excess spacing between HTML td and table elements in Outlook?

Is there a way to prevent text from being automatically linked after using an <a> tag?

Is it better to upload images to Vue.js (front end) or Node.js (back end) when using Vue.js and Node.js together?

"Encountering a glitch with the $npm server startup

Unable to adjust iframe height

Conceal a Component within an Embedded Frame

Selenium was unable to find the p tag element on the webpage

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

Can you confirm if the content-type of this SOAP response is valid?

Closing the space between navigation bar choices

Error encountered: "npm install command failed due to cb() not being called."

An error occurred while processing the JSReport request

OAuth: Once authenticated, utilize the access token via various pathways

Applying CSS styles to a page depending on certain conditions

What is the process for transforming a Typescript source file into JavaScript?

The VueJS front-end is left waiting for a response from the NodeJS backend that never

Utilizing the powerful combination of TailwindCSS and Next.js Image to achieve a full height display with