`nitro.devProxy` for websocket is not working

jktantan commented 1 year ago

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

github-actions[bot] commented 1 year ago

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](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)

ucw commented 1 year ago

nuxt/nuxt#15417

jktantan commented 1 year ago

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.

ucw commented 1 year ago

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

pi0 commented 1 year ago

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

vanling commented 1 year ago

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

pi0 commented 1 year ago

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

vanling commented 1 year ago

@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

jktantan commented 1 year ago

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

Unfortunately, it still doesn't work.

pi0 commented 1 year ago

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

vanling commented 1 year ago

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

host+ssl -> #112

pi0 commented 1 year ago

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 👍🏼

jenjen75 commented 9 months ago

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
        }
      })
    }
  }
})