WebSockets issue with webpack-dev-server v3 to v4

[therealgilles]

I'm upgrading webpack-dev-server from v3 to v4 on a project using razzlejs with webpack v5. I proxy websockets using the following config:

      webpackConfig.devServer.proxy = {
        '/ws': {
          target: targetHost,
          secure: false,
          ws: true,
          logLevel: 'silent', // silence proxy
          onError: (err, req, res) => {
            console.error(err)
          },
        },
        '!/static': {
          target: targetHost,
          secure: false,
          logLevel: 'silent', // silence proxy
        },
      }

I had to set webpackConfig.devServer.webSocketServer = false to make it work, otherwise I was getting RangeError: Invalid WebSocket frame: invalid status code 2122 errors (with different status codes) and was receiving messages with hot/liveReload/reconnect/hash/ok as type on the client side.

Oh is it that the webpack-dev-server websocket server is interfering with my websocket server?
If so, is it possible to change the webpack-dev-server websocket server config to put it on another path than /ws?

I would appreciate any insight on this. Let me know if you need more details. Thank you.

[therealgilles]

I was able to fix my issue by using the different path for the webpack-dev-server websocket as follows:

        webpackConfig.devServer.webSocketServer = {
          type: 'ws',
          options: {
            path: '/wds',
          },
        }

and then adding support for the /wds endpoint in my express-ws websockets server routes (which accepts the message but does not do anything with it).