如何向持续运行的Puppeteer传递URL实现URL轮播？

原代码核心问题 #

• 启动浏览器后执行了browser.disconnect()，直接切断了Node.js与浏览器的通信链路，导致后续完全无法控制已打开的浏览器窗口
• MQTT消息回调函数未声明为async，却使用了await关键字，触发语法错误
• 没有持久保存页面实例，无法直接操作已打开的浏览器页面跳转新URL

修正后的完整代码 #

var mqtt = require('mqtt');
var pt = require('puppeteer');
var Topic = 'url';
var Broker_URL = 'mqtt://192.168.2.3';

// 全局保存浏览器和页面实例，方便后续回调使用
let browser;
let page;

var options = {
    clientId: 'MyMQTT',
    port: 1883,
    keepalive: 60
};

var client = mqtt.connect(Broker_URL, options);
client.on('connect', mqtt_connect);
client.on('reconnect', mqtt_reconnect);
client.on('error', mqtt_error);
client.on('message', mqtt_messsageReceived);
client.on('close', mqtt_close);

// 启动浏览器
launchbrowser();

async function launchbrowser() {
    browser = await pt.launch({ headless: false });
    page = await browser.newPage();
    // 加载初始页面
    await page.goto('https://tools4testing.com/');
    // 注意：不要调用browser.disconnect()，必须保持连接才能持续控制浏览器
}

function mqtt_connect() {
    console.log("连接MQTT成功");
    client.subscribe(Topic, mqtt_subscribe);
}

function mqtt_subscribe(err, granted) {
    console.log("已订阅主题: " + Topic);
    if (err) { console.log(err); }
}

function mqtt_reconnect(err) {
    console.log("重新连接MQTT");
    if (err) { console.log(err); }
    client = mqtt.connect(Broker_URL, options);
}

function mqtt_error(err) {
    console.log("MQTT错误！");
    if (err) { console.log(err); }
}

// 处理MQTT消息，改为async函数以支持异步操作
async function mqtt_messsageReceived(topic, message, packet) {
    const targetUrl = message.toString().trim();
    console.log(`收到主题: ${topic}，待跳转URL: ${targetUrl}`);
    
    // 简单校验URL格式，避免无协议的无效地址
    if (!targetUrl.startsWith('http')) {
        console.log("URL格式错误，需包含http/https协议");
        return;
    }
    
    try {
        // 直接控制已打开的页面跳转到新URL
        await page.goto(targetUrl, { waitUntil: 'networkidle2' });
        console.log("页面已成功跳转至: " + targetUrl);
    } catch (err) {
        console.log("页面跳转失败: ", err);
    }
}

function mqtt_close() {
    console.log("MQTT连接关闭");
}

关键修改说明 #

• 移除browser.disconnect()：必须保持Node.js与浏览器的WebSocket连接，才能持续控制浏览器窗口
• 全局保存browser和page实例：在MQTT消息回调中直接复用已打开的页面，无需重新连接浏览器
• 消息回调改为async函数：支持await page.goto()这类异步操作，确保跳转逻辑执行完整
• 增加URL格式校验：避免无效URL导致页面跳转失败
• 使用waitUntil: 'networkidle2'：等待页面加载基本完成后再结束操作，提升轮播稳定性

内容的提问来源于stack exchange，提问作者OlaB