wss connection failure for secure local site

[paul-adams-985]

Reverb Version

1.0.0-beta6

Laravel Version

11.3.1

PHP Version

8.3

Description

I have a Laravel 11 project. Servers are managed locally with Herd. I have secured my site. Everything works beautifully except Reverb - which is wonderful, btw!

 WebSocket connection to 'wss://my-site.test/app/xjdam3dnj7kmzzviunel?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: echo.js:6

in my .env

PUSHER_APP_ID=xxxx
PUSHER_APP_KEY=xxxxx
PUSHER_APP_SECRET=xxxx
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=eu

VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

REVERB_APP_ID=179981
REVERB_APP_KEY=xjdam3dnj7kmzzviunel
REVERB_APP_SECRET=hzeak0dakwzq5fdvn5sp
REVERB_HOST="my-site.test"
REVERB_PORT=443
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Any pointers and help would be much appreciated.

Paul :)

Steps To Reproduce

1) Secure site in Herd 2) Restart Reverb server 3) Review browser errors.

[paul-adams-985]

I have tried with the following added to the Herd NGINX config, but the problem remains https://laravel.com/docs/11.x/reverb#web-server

location / {
        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header SERVER_PORT $server_port;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";

        proxy_pass http://0.0.0.0:8080;
    }

[paul-adams-985]

Could you give me more direction on what info would best help? Huge, enormous thanks :)

[vdev-chris]

I am having the same issue. It's a brand new laravel 11 project. Installed broadcasting with reverb. It looks like the issue is related to the https connection. All of the guides I am finding are people using unsecure connections. Our local setup through herd secures the connection.

Any insight would be helpful.

Env looks like:

REVERB_APP_ID=local-app-id REVERB_APP_KEY=local-app-key REVERB_APP_SECRET=local-app-secret REVERB_HOST="local-site-name.test" REVERB_PORT=8080 REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}" VITE_REVERB_HOST="${REVERB_HOST}" VITE_REVERB_PORT="${REVERB_PORT}" VITE_REVERB_SCHEME="${REVERB_SCHEME}"

The error on page load is:

"WebSocket connection to 'wss://local-site-name.test:8080/app/a6l43rqquqjiesdgphb7?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: "

[driesvints]

@paul-adams-985 just labeling this that this needs more info from Joe before proceeding.

[joedixon]

Hey @paul-adams-985 and @vdev-chris - could you please let me know which browser you are using?

Adittionally, please can you try the following steps:

1. Attempt to connect via WSS and confirm you see the error
2. Navigate to https://site.test:8080 in the browser (replacing site.test with your domain) - you should see a 404 here
3. Attempt to connect via WSS again

I have seen previously that navigating to the URL in the browser informs the browser to trust the certificate allowing the subsequent WSS connection.

[vdev-chris]

@joedixon I was using Chrome.

Out of curiosity, I tried Firefox before following your instructions and Firefox was actually working fine.

I then followed your instructions and it began working.

Is this something that would need to happen every session?

Chrome is up to date, just as a further FYI.

[paul-adams-985]

Hello! Appologies for the delayed response.

It did not work for me. However, I do not get a regular 404, I get a "Not found." message.

I tried both Chrome and Firefox with my nginx modifications and then again with nginx returned to the original setup.

Here is the message on firefox.

[vdev-chris]

Hello! Appologies for the delayed response.

It did not work for me. However, I do not get a regular 404, I get a "Not found." message.

I tried both Chrome and Firefox with my nginx modifications and then again with nginx returned to the original setup.

Here is the message on firefox.

That's the intended response, I believe. After you've loaded this page, you should be able to close it and refresh the page that is connecting to your local site. It immediately update for me.

To be clear, I had vite server up and running (through npm run dev). If you don't, you may need to rebuild?

[vdev-chris]

Also, the port should still be 8080.

[paul-adams-985]

OMG. I noticed a differnce between the port setting on your config and mine. I had previously tried with your setup. But this time, after the http://site.test:8080 trick, it worked!!!

I now have another bug to work through. Most likely my bad coding and nothing to do with Reverb.

Thanks guys. Keep up the good work...

P.S. Is it worth putting something in the docs?

[vdev-chris]

Still bizarre that the out-of-the-box install has issues with browser certificate recognition.

[paul-adams-985]

Indeed. These things can take hours out of your day. I have posted a solution on the Laracasts Forum.

[paul-adams-985]

@joedixon and @driesvints Super-huge thanks for your fast responses and help. We're all very appreciative of all that you do. If you would like me to submit a PR with a note in the documentation, let me know.

[joedixon]

Still bizarre that the out-of-the-box install has issues with browser certificate recognition.

I agree, but unfortunately, it's not that straightforward 🥴

Reverb uses the certificates provided by Valet or Herd. As I understand it, they add a trusted certificate authority to the keychain and use that to sign the ceritificate for the site. So, the certificates should be trusted and they are in Firefox and Safari. For some reason, Chrome doesn't trust them until the host has been accessed over HTTPS first.

I'll keep looking into it and see if anything can be done.

[vdev-chris]

Appreciate it. It's quite ironic to me that Chrome would be the oddball in this case. Considering that both Safari and Firefox are known for tighter security lol

[paul-adams-985]

Quite. It's Chrome who needs to sort their game out on this one.

[kevinrrm]

I'm still having the same error as you have. I have a server in cloudaways and they opened a port 6001 when I access the link with http://serverIP:6001 it returns the Not Found.

I'm having the NS_ERROR_NET_TIMEOUT in FireFox

[bulgar989]

Так в итоге как решить проблему, на https невозможно использовать ws