How to listen to network events?

[Microtribute]

In Pupeteer and Playwright, It is possible to listen to network events (requests and responses).

https://playwright.dev/docs/network

const { chromium, webkit, firefox } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Subscribe to 'request' and 'response' events.
  page.on('request', request =>
      console.log('>>', request.method(), request.url()));
  page.on('response', response =>
      console.log('<<', response.status(), response.url()));
  await page.goto('https://example.com');

  await browser.close();
})();

How do we do the same thing in chrome-php? I tried the following 2 methods but none of them worked.

$page = $browser->createPage();

$page->getSession()->on('Network.responseReceived', function ($response) {
     echo 'response received';
});

OR;

$page = $browser->createPage();

$page->getSession()->getConnection()->on('Network.responseReceived', function ($response) {
     echo 'response received';
});

[momala454]

it's method:Network.responseReceived instead of Network.responseReceived

[DenisSokoloff]

$page->getSession()->on('method:Network.responseReceived', function (array $params): void {}

[gswy]

Where can I find a list of apis such as: method:Network.responseReceived

[enricodias]

Where can I find a list of apis such as: method:Network.responseReceived

https://chromedevtools.github.io/devtools-protocol/tot/Network/

[professional-sourav]

I still do not see the response by implementing the following code.
Am I doing anything wrong here...

        $browserFactory = new BrowserFactory('chromium-browser');

        // starts headless chrome
        $browser = $browserFactory->createBrowser([
            'windowSize' => [1920, 1080],
            'noSandbox' => true,
            'debugLogger' => __DIR__ . 'storage/logs/resposes.log', 
        ]);
        
        $page = $browser->createPage();
        
        $page->getSession()->sendMessage(new Message(
                'Network.enable',
        ));

        $page->navigate($url)->waitForNavigation();

        $page->getSession()->on('method:Network.responseReceived', function (array $params): void {
                info("NETWORk RESPONSE", [$params]);
        });

[enricodias]

@professional-sourav you need to start listening for the event before navigating.

[Loai-Hassan]

@professional-sourav you need to start listening for the event before navigating.

THANK YOU FOR THAT GREAT PROJECT
but I was implementing the same listener and it worked but it doesn't load the requests made after clicking the page

my project is simply listening to all the requests and search for requests that have the type(media or mp4)
the target request is sent after a video is clicked to start playing

so is that achievable?
also, does it support extensions like ad-block?

thanks in advance and sorry as this is my first comment on github

[professional-sourav]

@enricodias One more thing. If I need to get the response of non HTML request, like js, css, images, etc, how can I get that?

For now, I am calling the $page->getHtml(), to get the html of the page. But the page contains css, js
images but when those request hits my route, it is going through the same $page->getHtml() method to get the content and I am not getting the raw data of non html requests. How can I get that?

I have checked with Network.responseReceived method, but it's missing the body parameter on the response but I am getting headers and other data.

[DenisSokoloff]

To get body content of request:

$this->handler = function (array $params): void
{
    $url = @$params["response"]["url"];

    if (strpos($url, "PATH_TO_FILE") !== false)
    {

        $this->page->getSession()->removeListener('method:Network.responseReceived', $this->handler);

        $request_id         = @$params["requestId"];
        $data               = @$this->page->getSession()->sendMessageSync(new HeadlessChromium\Communication\Message('Network.getResponseBody', ['requestId' => $request_id]))->getData();
        
        //CONTENT OF FILE        
        $content            = @$data["result"]["body"];
    }
}
$this->page->getSession()->on('method:Network.responseReceived', $this->handler);

[enricodias]

@professional-sourav using Network.getResponseBody to ask the browser for the content of a specific request like DenisSokolff said will work. I think this info is also available in the event Network.eventSourceMessageReceived, but I'm not sure.