Help : Websocket question

Hi,

I’m using sveltekit and vite and caddyv2, love caddy!
But I’m having problem proxying websocket, so the condition is like this :

  • sveltekit with vite → npm run dev → it listens to localhost:3000, there’s hmr that using websocket
  • then I’m using https:\example.com to proxy to localhost, and here’s my caddy.json
{
  "apps": {
    "http": {
      "servers": {			 
        "srv0": {
          "listen": [
            ":443"
          ],
          "routes": [            
			{
              "match": [
                {
                  "host": [
                    "example.com"
                  ]
                }
              ],
              "handle": [
                {
                  "handler": "subroute",
                  "routes": [		
					{
                      "handle": [
                        {
                          "handler": "reverse_proxy",
                          "upstreams": [
                            {
                              "dial": "localhost:4000"
                            }
                          ]
                        }
                      ],
                      "match": [
                        {
                          "header": {
                            "Connection": [
                              "*Upgrade*"
                            ],
                            "Upgrade": [
                              "websocket"
                            ]
                          }
                        }
                      ]
                    },				                      
                    {
                      "handle": [
                        {
                          "handler": "reverse_proxy",
                          "upstreams": [
                            {
                              "dial": "localhost:3000"
                            }
                          ]
                        }
                      ]
                      
                    }
                  ]
                }
              ]
            }			
          ]
        }
      }
	  
    }
  }
}

As we can see above, I already use upgrade for websocket, that forward to localhost:4000

here’s vite config

vite: {	
                ...
		server: {
                hmr: {
                    protocol: 'wss',
					port:4000
                }
            },
}

But it seems websocket is not proxied to hmr server, when I look @chrome dev tools, it always display pending

What did I do wrong ?

Thanks Websocket question

Edit: Using preformatted text Help : Websocket question

Next time, please fill out the help template. Why did you delete it? :frowning:

One thing I noticed: wss is websockets over HTTPS. Your proxy isn’t configured to use HTTPS. (Edit: It has been pointed out to me that wss refers to a client-side configuration, and so that’s probably fine.)

Web Sockets will always show as pending in dev tools because it never completes the request. It’s a live full-duplex protocol.

In other words, it sounds like it’s working.

Edit: you can check the network tab under dev tools to see the TCP frames actually being sent and received.

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.