WebSocket connection fails (Express middleware)

[gkp1]

Edit: solved

Solved by not using the express middleware, but I guess there's still something wrong with it. Solution is just calling Puppeteer.use(PortalPlugin) like the second example in the readme, using a different port than express uses.

const PortalPlugin = require('puppeteer-extra-plugin-portal');
puppeteer.use(
  PortalPlugin({
    webPortalConfig: {
      listenOpts: {
          port: 9146,
        },
        baseUrl: "http://127.0.0.1:9146"
        },
      },
  })
)

If someone could help on this, I wanted to remove the 'reload' button from the page because it breaks things on my app so it needs to restart. but commenting out everything to do with reload in index.bundle and removing the reload div in index.html doesn't remove it. Weird since I thought the index.html is what is actually loaded. Any way to remove the button?

---

Using Node 20.x Windows 11 USING AS EXPRESS MIDDLEWARE

I configured portal to open after I initialize a page, but after properly configuring it (I guess), weirdly all it shows to me is a reload button, and the text "Session complete! Browser has closed. Session complete". I don't know why the websocket connection fails.

Note: I had to write
app.use(PortalPlugin().createExpressMiddleware()); instead of
app.use(PortalPlugin.createExpressMiddleware()); (like the docs here says)
because it wouldn't run otherwise.

I tried using localhost and 127.0.0.1, both return the same thing. The puppeteer page is running normally and headless (it's a web.whatsapp page) .

The only thing that appears in the web console is this error:

WebSocket connection to 'ws://127.0.0.1:8080/ws/6BF24C53BC50FFB5EAACEFBC6E70B03D' failed: 
setupWebSocket @ runner.ts:320

And logs this object if I restart the page: (then the error above right after)

Server start code:

app.use(PortalPlugin().createExpressMiddleware());
const server = app.listen(process.env.PORT, () => {
  logger.info(`Servidor iniciado na porta: ${process.env.PORT}`);
});
server.headersTimeout = 0; // Required for Node 18+ due to slow loris attack change
server.requestTimeout = 0;

initIO(server);
StartAllWhatsAppsSessions(); // <------ puppeteer and portal are started here
gracefulShutdown(server);

puppeteer client code

const puppeteer = require("puppeteer-extra");
// Add stealth plugin and use defaults (all tricks to hide puppeteer usage)
const StealthPlugin = require("puppeteer-extra-plugin-stealth");
puppeteer.use(StealthPlugin()); // TRIED DISABLING THIS, SAME  PROBLEM OCCURS -----------
// add portal plugin
const PortalPlugin = require('puppeteer-extra-plugin-portal');
puppeteer.use(
  PortalPlugin({
    webPortalConfig: {
        // When used as middleware, you'll need to provide the baseUrl if it's anything but http://localhost:3000
        baseUrl: "http://127.0.0.1:8080",
      },
  })
)

// .... unrelated code here .....

async initialize() {
    let [browser, page] = [null, null];

    await this.authStrategy.beforeBrowserInitialized();

    const puppeteerOpts = this.options.puppeteer;
    if (puppeteerOpts && puppeteerOpts.browserWSEndpoint) {
      browser = await puppeteer.connect(puppeteerOpts);
      page = await browser.newPage();
    } else {
      const browserArgs = [...(puppeteerOpts.args || [])];
      if (!browserArgs.find((arg) => arg.includes("--user-agent"))) {
        browserArgs.push(`--user-agent=${this.options.userAgent}`);
      }


      browser = await puppeteer.launch({ ...puppeteerOpts, args: browserArgs });
      page = (await browser.pages())[0];
      

    if (this.options.proxyAuthentication !== undefined) {
      await page.authenticate(this.options.proxyAuthentication);
    }

    await page.setUserAgent(this.options.userAgent);
    if (this.options.bypassCSP) await page.setBypassCSP(true);

    this.pupBrowser = browser;
    this.pupPage = page;

    await this.authStrategy.afterBrowserInitialized();
    await this.initWebVersionCache();

    await page.goto(WhatsWebURL, {
      waitUntil: "load",
      timeout: 0,
      referer: "https://whatsapp.com/",
    });

// Open a portal to get a link to it.  
  const portalUrl = await page.openPortal(); // <-------------------------- OPEN PORTAL ----------------------
  console.log('Portal URL:', portalUrl);
    
    }

More info

This project uses socket.io in "initIO(server);". Maybe this has something to do with portal's websocket failing? I believe the problem here is in the express middleware, but I have no idea what to look for or where. 😢

[SanYann]

Same problem