javascript - 在评估方法之外处理来自 puppeteer 页面上下文的事件

Question

我的目标是在 Node.js 环境中将 puppeteer-chromium 实例作为子进程打开，并监听用户将进行的所有点击，以便可以从父进程访问这些事件。所以我认为需要事件流，但我不知道如何从评估方法发送它们(在该上下文中无法访问进程对象 - Chrome 日志中的“进程未定义”)。

目前我正在尝试在页面上下文中添加点击监听器，但是有什么方法可以在评估方法之外获取这些事件吗？

我知道评估方法可以返回promise，但它只有一个值，所以这还不够。我想收集所有点击，直到关闭 Chrome 窗口。

预先感谢您的各种建议。

我的示例代码:

  // parent.js
  const child = require('child_process');
  const childprocess = child.fork('./childprocess.js');
  childprocess.on('message', (msg) => {
      console.log('Message from child', msg);
      // here I'd like to get click events from childprocess
      // eg. saving them in database
  });

  // childprocess.js
  const puppeteer = require('puppeteer');
  (async () => {
      await process.on('message', (m) => {
        process.send(m)
      })
      const browser = await puppeteer.launch(options);
      const page = await browser.newPage();
      await page.goto('http://someurl.com');
      await page.evaluate( (processHandle) => {
        document.addEventListener('click', (event) => {
          console.log(event);  // event is logged in chromium dev console
          processHandle.send({msg: event}); // nothing happens
        })
      }, process);
  })()

Answer 1

示例代码的问题是 processHandle 不会以文档上下文中的 JavaScript 可以使用它的方式进行序列化。您可以改为 expose a function on window这将做你想做的事:

await page.exposeFunction("sendEventToProcessHandle", (event) => {
    processHandle.send({ msg: JSON.parse(event) });
})

await page.evaluate((processHandle) => {
    document.addEventListener('click', function (e) {
        window.sendEventToProcessHandle(JSON.stringify(e));
    });
}, process)

这里，window.sendEventToProcessHandle 是一个将在 Node.JS 进程上下文中运行的函数，您可以在其中访问 processHandle，但也可以由文档。