cli `nitro.devProxy` for websocket is not working

Environment

Nuxt 3.7

Reproduction

Nuxt 3.7

Describe the bug

Config:

nitro:{
  devProxy: {
    '/proxy': {
      target: `http://localhost:8080`,
      changeOrigin: true,
      ws: true,
    },
}

In web:

If direct connect to Websocket Server:

Additional context

No response

Logs

No response

Aug 28 '23 05:08 jktantan

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz 👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

Aug 28 '23 05:08 github-actions[bot]

nuxt/nuxt#15417

Aug 28 '23 06:08 ucw

nuxt/nuxt#15417

Interesting, if I downgrade to NUXT 3.6.5, then your code is working. But I try to using your code for NUXT 3.7, that is not working.

Aug 28 '23 06:08 jktantan

It seems like this is related to how the new Nuxt CLI works, introduced in Nuxt 3.7. https://github.com/nuxt/cli/issues/101

Aug 28 '23 06:08 ucw

Thanks for the issue. I will be working on a quick solution to make it working again on nuxi 3.7 👍🏼

Aug 28 '23 08:08 pi0

I hope when this is fixed the following works again

{
  "name": "domain.nl",
  "private": true,
  "scripts": {
     "dev": "nuxt dev --host local.domain.nl --https --ssl-cert local.domain.nl.pem --ssl-key local.domain.nl-key.pem"
   }
}

package.json

Aug 28 '23 11:08 vanling

host issue is fixed already in latest 3.7.2 cli release. Can you please confirm that? 🙏

Aug 28 '23 12:08 pi0

@pi0 Replacing nuxt dev with npx nuxi dev > Still getting the error

- Node Version:     v18.16.1
- Nuxt Version:     3.7.0
- CLI Version:      3.7.2
- Nitro Version:    2.6.2

Mixed Content: The page at 'https://local.domain.nl:3000/ild' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://local.domain.nl:24678/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.

client.ts:69 [vite] failed to connect to websocket (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.).

This worked in 3.6.5

Aug 28 '23 12:08 vanling

host issue is fixed already in latest 3.7.2 cli release. Can you please confirm that? 🙏

Unfortunately, it still doesn't work.

Aug 28 '23 12:08 jktantan

@jktantan I meant the host. WebSocket issue is not resolved yet.

Aug 28 '23 13:08 pi0

@pi0 I will open a new issue to keep things clear here.

host+ssl -> #112

Aug 28 '23 13:08 vanling

With #127 (v3.7.3), you can hook into the listen event to register a custom ws handler. Check out this example for usage.

Will be working on some upstream (nitro) fixes to fully unblock devProxy support as well 👍🏼

Aug 30 '23 18:08 pi0

With #127 (v3.7.3), you can hook into the listen event to register a custom ws handler. Check out this example for usage.

Will be working on some upstream (nitro) fixes to fully unblock devProxy support as well 👍🏼

Thank you @pi0 for the information ! This help me find a workaround I use multiple Nuxt projects in iframe, in this case HMR does not work at all. @jktantan @ucw maybe can be useful for you and anyone in this case :

import { defineNuxtConfig } from "nuxt/config"
import { createProxyServer } from "httpxy"

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      // Not working
      "/editor/assets/": {
        target: "ws://localhost:5003/editor/assets/",
        ws: true
      }
    }
  },
  hooks: {
    // Workaround
    listen(server) {
      const proxy = createProxyServer({ target: { host: "localhost", port: 5003 } })

      server.on("upgrade", (req, socket, head) => {
        if (req.url === "/editor/assets/") {
          proxy.ws(req, socket, head) // socket has type error by it works
        }
      })
    }
  }
})