Proxying WebSocket connection not working

[thomasjm]

I'm trying to proxy a WebSocket connection from my app to my own server using a .proxyrc like this (on the newly released Parcel 2.0.0):

{
  "/api": {
    "target": "http://localhost:9997",
    "ws": true
  }
}

However, it doesn't work properly. I get a bunch of errors like this from my dev server process:

console: [HPM] Upgrading to WebSocket

console: [HPM] Error occurred while proxying request localhost:1234/api/socket? to undefined [ERR_STREAM_WRITE_AFTER_END] (https://nodejs.org/api/errors.html#errors_common_system_errors)

On my WebSocket server, I can see that the requests are coming in and then disconnecting immediately. The Chrome console also shows an error: WebSocket connection to 'ws://localhost:1234/api/socket?' failed: Invalid frame header.

Is this a known problem? I was looking at the http-proxy-middleware docs and wondering if I'm failing to handle the WebSocket upgrade properly. But the way the docs say to handle it requires access to the Express server, which doesn't seem available even when you use a .proxyrc.js...

[AndyOGo]

I have literally the same issue.

Receiving these logs after running npx parcel src/index.html:

console: [HPM] Upgrading to WebSocket
console: [HPM] Upgrading to WebSocket
console: [HPM] Client disconnected

with that .proxyrc:

{
  "**": {
    "target": "http://localhost:8000/",
    "ws": true,
  }
}

[AndyOGo]

I also tried

.proxyrc.js:

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  let server;
  const proxy = createProxyMiddleware("**", {
    target: "http://localhost:8000/",
    ws: true,
  });

  app.use((req, res, next) => {
    if (!server) {
      server = req.connection.server;
      server.on("upgrade", proxy.upgrade);
    }

    next();
  });

  app.use(proxy);
};

[AndyOGo]

A workaround seems to be posted here #6994