puppeteer - 如何在 Puppeteer 中拦截服务器发送的事件消息

标签 puppeteer

我似乎找不到有关此用例的任何文档。我希望拦截来 self 无法控制的源的 SSE 消息,因此我无法将其更改为服务器发送的事件。

最佳答案

Puppeteer 没有原生事件来等待 SSE,但您可以使用 Chrome DevTools 协议(protocol)来执行此操作。引用是here ,示例代码如下:

  // some code

  // after you have access to "Page":
  const cdp = await page.target().createCDPSession();
  await cdp.send('Network.enable');
  await cdp.send('Page.enable');
  cdp.on('Network.eventSourceMessageReceived', ({ requestId, timestamp, eventName, eventId, data }) => console.log(requestId, timestamp, eventName, eventId, data));

  // now you can navigate to the page you are testing:
  await page.goto('<url with SSE>');

编辑: 我准备了一个完整的示例,其中有一个扮演 SSE 服务器角色的expressjs 和一个使用事件的 puppeteer 客户端:

const puppeteer = require('puppeteer');
const express = require('express');
const app = express();


app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <body>
      <script>
        var sseSource = new EventSource('/event-stream');
        sseSource.addEventListener('MyEvent', (e) => {
          console.log('[Page] Event Type:', e.type, '| Event Data:', e.data);
        });
      </script>
    </body>
    </html>
  `);
});

app.get('/event-stream', (req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  res.write('\n');
  const intervalId = setInterval(() => {
    res.write(`event: MyEvent\n`);
    res.write(`data: Test Message received at ${Date.now()}\n\n`);
  }, 1000);
  req.on('close', () => clearInterval(intervalId));
});

const server = app.listen(8080, async () => {
  const browser = await puppeteer.launch();

  const page = await browser.newPage();
  await page.setDefaultTimeout(0);

  const cdp = await page.target().createCDPSession();
  await cdp.send('Network.enable');
  await cdp.send('Page.enable');
  cdp.on('Network.eventSourceMessageReceived', ({ eventName, data }) => console.log(`[Node] Event Type: ${eventName} | Event Data: ${data}\n`));
  page.on('console', (msg) => console.log(msg.text()));
  await page.goto('http://localhost:8080/');
  await page.waitFor(300000); // 5 minutes
  await page.close();
  await browser.close();
  server.close();
});

关于puppeteer - 如何在 Puppeteer 中拦截服务器发送的事件消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57980865/

相关文章:

使用 Chrome 打印时,上一页上的 HTML 标题边框部分显示

javascript - Puppeteer CORS 错误

typescript - deno puppeteer 'chrome not found' 尝试导入 npm 依赖项

node.js - 错误 : Failed to launch the browser process! Whatsapp web js | Azure 门户 Linux puppeteer 师

javascript - 无法使用 puppeteer 从图像列表中获取 url

javascript - 如何使用 puppeteer 获取 HTML 元素文本

typescript - 有什么方法可以使用 jest-puppeteer 对片状测试进行重试?

javascript - 如何告诉 pm2 在部署时使用特定的节点版本

javascript - 努力使用 .querySelector 查询具有相同类名的特定元素

node.js - Puppeteer:Element.hover() 不存在