今天想尝试将爱发电平台的发电进入数值进行实时读取并显示在自己站点的挂件中，找了一下没看到爱发电的接口文档。于是采用node.js访问站点读取进度然后发送到前端的方式实现这个功能。相关代码同样可以适用于对其他页面进行访问读取相关的html元素。

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const puppeteer = require('puppeteer'); 

const app = express();

app.use(bodyParser.json());
app.use(cors()); // 允许任何前端域名请求，可以根据自身需求更改

// 实时获取进度值
async function fetchProgressValue() {
    let browser;
    try {
        // 启动 Puppeteer 浏览器，禁用 sandbox 模式
        browser = await puppeteer.launch({
            headless: true,
            args: ['--no-sandbox', '--disable-setuid-sandbox']
        });
        const page = await browser.newPage();
        await page.goto('https://你要监控的站点', { waitUntil: 'networkidle2' });

        // 等待目标元素加载
        await page.waitForSelector('你要监控的html元素，这里填写元素的class');
        
        // 获取进度值
        const progressValue = await page.$eval('你要监控的html元素，这里填写元素的class', element => element.textContent.trim());
        console.log(`Fetched progress value: ${progressValue}`); //这里是监控的爱发电的发电目标进度，可以根据自身需求修改这里的文字
        
        return progressValue;
    } catch (error) {
        console.error('Error fetching progress value:', error);
        return 'N/A';
    } finally {
        if (browser) {
            await browser.close();
        }
    }
}

// 处理前端请求并实时获取进度值
app.get('/progress-events', async (req, res) => {
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    console.log('Client connected for progress events');

    // 实时获取进度值并发送
    const progressValue = await fetchProgressValue();
    res.write(`data: ${JSON.stringify({ progress: progressValue })}\n\n`);

    // 关闭连接
    req.on('close', () => {
        console.log('Client disconnected');
    });
});

const PORT = process.env.PORT || 30001;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

下面是对应的前端案例

    <p id="process">Progress: 0.0</p>
    <!-->相关的内容会更新在id为process的html标签中，可以根据自身需求修改<-->

    <script>
        // 使用 Server-Sent Events (SSE) 从后端获取实时更新
        const eventSource = new EventSource('https://这里输入你的后端地址/progress-events');

        eventSource.onmessage = function(event) {
            const progressValue = JSON.parse(event.data).progress;
            document.getElementById('process').textContent = `Progress: ${progressValue}`;
        };//这里是监控的爱发电的发电目标进度，可以根据自身需求修改这里的文字

        eventSource.onerror = function(error) {
            console.error('Error receiving progress updates:', error);
        };
    </script>

后端Node.js引入puppeteer后可能会出现一系列的报错，但是都不是大问题，可以很简单解决。该套代码可以通过id设置的方式引入已有的页面模块中，较为简单。

Github项目地址：Aifadian-goal-process/ at main · Guikong001/Aifadian-goal-process (github.com)