【问题标题】：Refresh when an element changes on page当页面上的元素更改时刷新
【发布时间】：2018-10-19 10:41:45
【问题描述】：

我尝试使用 Puppeteer (1) 在网站上废弃一个元素并在 localhost 上显示它。但是当这个元素发生变化时，我想在不使用 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，但体验很糟糕。我希望这里会更好:)

谢谢你帮助我。

【问题讨论】：

如果答案对您有用，请选择已接受的答案，这样它就不会显示为未回答。 :)

标签： node.js puppeteer

【解决方案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
    });
  }
};

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

方法一、设置间隔

让我们修改连接，我们只需要打开一次页面并在某个时间间隔轮询新数据。

/**
 * 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 元素，
- 只要有一点变化，我们就会触发我们制作的自定义事件

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

（我使用了 500 毫秒的间隔，它是每秒 60 帧，所以动画没有捕捉到所有内容，但它就在那里，链接到repo。）

区别

setInterval 与事件的区别在于，setInterval 会在一定时间后进行检查，而观察者会持续观察变化并在有变化时触发。

选择哪个：

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

【讨论】：

嘿阿布，你真的很摇滚！方法#1 易于理解和应用，没有任何问题。 对于方法#2，我没有成功 :((你能再帮忙解决一下吗？第二个似乎真的很棒。
你遇到了什么问题？
我更新了代码，通过socket有一个小错字。
真的很棒。十分感谢！我用“c-city__hrMin”替换了“c-city__digitalClock”，但它也可以工作（最初需要）。但是，当我启动、停止并再次启动 app.js 时，我遇到了这个问题：“UnhandledPromiseRejectionWarning：错误：无法添加名称为发射器的页面绑定：window['emitter'] 已经存在！”。为什么？
我也想知道。它可能由于某种原因被多次调用。