node.js - 当页面上的元素发生变化时刷新

转载作者：太空宇宙更新时间：2023-11-03 22:58:58

我尝试废弃网站上的一个元素并使用 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，但体验很糟糕。我希望这里会更好:)

谢谢你帮助我。

最佳答案

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

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

更新代码可读性

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

/**
 * 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
- 我们在页面上公开自定义事件。
- 我们从那时起观察 dom 元素，
- 只要有一点变化，我们就会触发我们创建的自定义事件

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

(我使用了 500 毫秒间隔，每秒 60 帧，因此动画并未捕获所有内容，但它就在那里，链接到 repo 。)

差异

setInterval 和事件的区别在于，setInterval 会在一定时间后检查，而观察者会持续观察变化，只要有变化就触发。

选择哪个:

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

关于node.js - 当页面上的元素发生变化时刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52864076/

文章推荐： c# - 使用 IFormFile 上传时如何更改文件名

文章推荐： java - 本质矩阵的分解导致错误的旋转和平移

文章推荐： C#:根据值切换返回值类型

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

node.js - 当页面上的元素发生变化时刷新

更新代码可读性

方法一、设置间隔

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

差异