- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我尝试废弃网站上的一个元素并使用 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
});
这是先进且复杂得多的方法,但非常准确。
您可以将其添加到 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
页面
上公开自定义事件。这是两者之间的视觉差异:
(我使用了 500 毫秒间隔,每秒 60 帧,因此动画并未捕获所有内容,但它就在那里,链接到 repo 。)
setInterval 和事件的区别在于,setInterval 会在一定时间后检查,而观察者会持续观察变化,只要有变化就触发。
选择哪个:
setInterval
版本。observer
版本。关于node.js - 当页面上的元素发生变化时刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52864076/
下面的代码旨在在首次打开工作簿时运行。 Sub Auto_Open() Dim LastRow As Integer LastRow = Sheet6.UsedRange.Rows.Count Act
当我尝试操作我的代码时,除了弹出调试错误外,它执行得很好。错误信息在这里。 我的完整代码在这里。 #include using namespace std; class String { publi
The invocation of the constructor on type 'WpfApplication1.MainWindow' that matches the specified bi
我正在使用 BaseAdapter: public class MyAdapter extends BaseAdapter{ private final LayoutInflater mInflate
我想做网页抓取。我写了代码 var connection = require('./mysqlConnection'); var c = new Crawler({ maxConnections
我的系统中发生 Java 堆空间错误。我尝试了很多来自 Stack Overflow 的解决方案,但没有任何效果。当我工作时 当按下 OK 然后 (我的项目没有错误) 我的 eclipse.ini 是
环境: i5 750 DDR3 4GWin7 专业版 x64 sp1 DXSDK 9.0c 2010 年 6 月 GeForce GT240(驱动程序 275.33)512MB MSVC 2008 s
这段代码是我写的。 import socket host = 'localhost' port = 3794 s = socket.socket(socket.AF_INET, socket.SOCK
我正在尝试引用 UTC 时间间隔获取本地日期时间,我正在执行下面的代码。 var dtString =DateTime.UtcNow.ToString(@"yyyy-MM-ddTHH\:mm\:ss
我有一个非常简单的 C# 问题,它从库中加载 Windows WPF 窗口。这是代码: public partial class App : Application { public App(
我目前正在使用带有导航组件的底部导航,它工作正常但是当我们点击导航项 fragment 正在加载然后闪烁正在发生,即使当前选择的项目也会发生闪烁。它在加载 fragment 时发生。我的应用程序屏幕背
我是新来的 kotlin , 当我开始 Null Safety 时,我对下面的情况感到困惑. There's some data inconsistency with regard to initia
我有一个框,其中包含同时发生的两个独立的 css 转换。 当转换发生时,图标下方的标题和段落文本移动位置 参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/ 这是我的
在为黑莓 10 构建电话间隙应用程序时,我遇到了异常情况。 [BUILD] Populating application source [BUILD] Parsing config.xml [
这个问题在这里已经有了答案: How to properly stop the Thread in Java? (8 个回答) 3年前关闭。 我看过How to properly stop the T
我试图弄清楚发生 fatal error 时如何刷新页面。基本上我正在访问图像 api 并将图像复制到我的服务器。我还每次都创建照片的缩略图版本。我会每隔一段时间收到一条错误消息,指出我的脚本试图分配
我正在尝试使用断言函数检查元素是否在屏幕上。我在我的测试应用程序 (AndroidDriver) 中使用 Appium 和 Java。我期望的是,如果元素在屏幕上,则返回 1;如果不在屏幕上,则返回
我正在开发图像上传系统。我使用 CommonsMultipartResolver 设置 maxUploadSize。当我尝试上传超过最大尺寸的图像文件时,会发生 MaxUploadSizeExcced
我有以下代码和@ComponentScan(basePackages = "com.project.shopping"),包结构为 com.project.shopping.Controller co
我尝试运行此程序作为测试,但收到错误“发生了 JNI 错误,请检查您的安装并重试”,然后是“发生了 Java 异常”。关于如何解决这个问题有什么想法吗? package java; public cl
我是一名优秀的程序员,十分优秀!