更新代码的可读性

Question

我尝试在网站上剪贴一个元素，并使用Puppeteer（1）在本地主机上显示该元素。但是，当此元素更改时，我想刷新数据而不用Puppeteer打开新的浏览器/页面，并且仅当元素更改时才更新（2）。

在我的示例中，我使用www.timeanddate.com，其元素为时间（小时和分钟）。暂时只有第一部分有效。我没有第二个解决方案。

请在下面找到我的代码。

app.js

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
var puppeteer = require('puppeteer');

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

server.listen(8080);

let scrape = async () => {
    var browser = await puppeteer.launch({headless: true});
    var page = await browser.newPage();
    await page.goto('https://www.timeanddate.com/worldclock/personal.html');
    await page.waitFor(300);
    //await page.click('#mpo > div > div > div > div.modal-body > div.form-submit-row > button.submit.round.modal-privacy__btn');

    var result = await page.evaluate(() => {
        return document.getElementsByClassName('c-city__hrMin')[0].innerText;
    });

    return result;
};

io.sockets.on('connection', function (socket) {
    scrape().then((value) => { // it tooks time, a few seconds while page is loading.
        console.log(value);
        socket.emit('refresh', value);
    });
});

main.ejs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>What time is it?</title>
        <style>
            a {text-decoration: none; color: black;}
        </style>
    </head>

    <body>
        <h1>Welcome !</h1>

        <div id="time">loading</div>

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io.connect('http://localhost:8080');

            socket.on('refresh', function (value) {
                $('#time').html(value);
            });         
        </script>
    </body>
</html>

我尝试Fiverr，但体验糟糕。我希望这里会更好：）

谢谢您的帮助。

Answer 1

您想在数据更改时发出事件。有多种方法可以做到这一点，例如

尝试定期获取新数据
寻找更改并从浏览器中发出

更新代码的可读性

我将讨论他们两个。但是首先，让我们分割代码以获得更好的可用性。它是完全可选的，但您应该这样做。

/**
 * Scraper
 * Use this instead of scrape variable
 */
let browser, page;
const scraper = {
  async open() {
    browser = await puppeteer.launch({ headless: true });
    page = await browser.newPage();
    const url = "https://www.timeanddate.com/worldclock/personal.html";
    await page.goto(url);
    await page.waitFor(300);
  },
  async getTime() {
    return page.evaluate(() => {
      return document.querySelector(".c-city__digitalClock").innerText; // time with seconds 5:43:22am
    });
  }
};

如果需要，我们可以稍后向该对象添加其他方法。这不是最好的格式，但这将帮助我们此时更好地理解代码。

方法1.设置时间间隔

让我们修改连接，我们只需要打开一次页面并在一定间隔内轮询新数据即可。

/**
 * Socket Connection Monitor
 */
io.sockets.on("connection", async function(socket) {
  // open the page once
  await scraper.open();

  // start the interval loop
  setInterval(async () => {

    // get the time every second
    const time = await scraper.getTime();

    // emit the updated time
    socket.emit("refresh", time);
  }, 1000); // how many millisecond we want
});

方法2。向浏览器本身添加事件。

这是高级的，复杂得多，但是非常准确。

您可以在scraper对象中添加它。

// <-- Pass the socket so it can use it
async runEvents(socket) {
    // Create a Shadow event tracker on puppeteer
    await page.exposeFunction("emitter", (...data) => {
      socket.emit(...data)
    });
    await page.evaluate(function observeDom() {
      // expose the observer which will watch
      //More Details https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
      // select the target node
      var target = document.querySelector(".c-city__digitalClock");
      // create an observer instance
      var observer = new MutationObserver(function(mutations) {
        // Do something on change
        emitter("refresh", target.innerText); // <-- trigger the event whenever there is a change
      });

      // configuration of the observer:
      var config = { childList: true, subtree: true };
      // pass in the target node, as well as the observer options
      observer.observe(target, config);
    });
  }

然后您的连接看起来像

io.sockets.on("connection", async function(socket) {
  await scraper.open();
  await scraper.runEvents(socket); // <-- Pass the socket
});

工作原理

当插座打开时，
我们打开浏览器和页面
我们运行事件。
- 我们设置了一个自定义事件，该事件将使用其获取的所有数据运行socket.emit
- 我们在page上公开自定义事件。
- 我们从那时开始观察dom元素，
- 只要有一点变化，我们就会触发我们创建的自定义事件

这是两者之间的视觉差异：

（我使用了500ms的间隔，每秒60帧，因此动画无法捕获所有内容，但它在那里，链接到repo 。）

差异

setInterval与事件之间的区别在于，setInterval将在一定时间后进行检查，而观察者将不断观察变化并在发生变化时触发。

选择：

如果您喜欢简单，请使用setInterval版。
如果需要精度，请使用observer版本。

当页面上的元素更改时刷新

1 个答案:

更新代码的可读性

方法1.设置时间间隔

方法2。向浏览器本身添加事件。

差异