javascript - How do I continuously listen for a new item while scraping a website

Question

I am using puppeteer to scrape a website that is being live updated, to report the latest item elsewhere. Currently the way I was thinking accomplishing this is to run a setInterval call on my async scrape and to compare if the last item has changed, checking every 30 seconds. I assume there has to be a better way of doing this then that. Here is my current code:

const puppeteer = require('puppeteer');
 playtracker = async () => {
  console.log('loading');
  const browser = await puppeteer.launch({});
  const page = await browser.newPage();
  await page.goto('URL-Being-Scraped');
  await page.waitForSelector('.playlist-tracklist-view');
  let html = await page.$$eval('.playlist-tracklist-view > .playlist-track', tracks => {
    tracks = tracks.filter(track => track.querySelector('.playlist-trackname').textContent);
    tracks = tracks.map(el => el.querySelector('.playlist-trackname').textContent);
      return tracks;
  });
  console.log('logging', html[html.length-1]);
  };
setInterval(playtracker, 30000)

Answer 1

There is an api called "MutationObserver". You can check that out on MDN. Here's the link https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

What it is doing is basically do whatever you want to do when the spesific element has changed. Lets say you have a list you want to listen. What you would do is

const listElement = document.querySelector( [list element] );
const callbackFunc = funcion foo () {
  //do something
}

const yourMutationObserver = new MutationObserver(callbackFunc)
yourMutationObserver.observe(listElement)

You can disconnect your mutation observer with yourMutationObserver.disconnect() method whenever you want.

This could help too if you confused about how to implement it https://stackoverflow.com/a/48145840/14138428