LARAVEL REVERB PRODUCTION | Laravel 11 reverb + inertia-vue | Pagoda server | Issue: WebSocket is closed before the connection is established

[janzcio]

I have tried all the suggestions mentioned here, 50675 but none of them works.

Currently, I'm using laravel 11 inertia-vue, reverb and mysql, redis combo. The real time chat works on my local machine, but not on production.

On my server, I've used the supervisor for the reverb and schedulers.

This is my my config

This is my application

No issue with setting up except, making the broadcasting works.

My objective is to make the broadcasting work and resolve the issue with WebSocket.

If you have an idea and have the same problem, please let me hear you thoughts thank you so much!

[wilianmaique]

The solution is here, follow all the steps and it will work! https://stackoverflow.com/questions/78383337/solution-laravel-reverb-does-not-work-in-production-with-apache

Note: you need a subdomain for it to work correctly on localhost you need to access the website on http instead of https

[janzcio]

Hi! Will this work on nginx? I'm using a nginx and trying this at the moment. I'll just comment/reply back if something good happen.

[wilianmaique]

Hi! Will this work on nginx? I'm using a nginx and trying this at the moment. I'll just comment/reply back if something good happen.

it works, but it's another syntax, maybe chatgpt will help you convert

[janzcio]

It is now up and running, thanks to Franz Marvin Horfilla.

Here are his configurations, which I have copied exactly

nginx.conf

He added a /ws prefix to the location. You should be careful here instead of using the /app or any existing prefix that will lead you to conflict that fails the wss

location /ws/ {
        proxy_pass                          http://127.0.0.1:6050/;
        
        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";
    }

.env

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="test-imsupport.xxxxx.xxxxx"
VITE_REVERB_PORT="443"
VITE_REVERB_SCHEME="https"
VITE_REVERB_PATH="/ws"

echo.js
wsPath is the prefix, /ws

window.Echo = new Echo({
  broadcaster: "reverb",
  key: import.meta.env.VITE_REVERB_APP_KEY,
  wsHost: import.meta.env.VITE_REVERB_HOST,
  wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
  wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
  wsPath: import.meta.env.VITE_REVERB_PATH ?? "",
  forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? "https") === "https",
  enabledTransports: ["ws", "wss"],
});

** directions **

• make sure to restart the nginx after you change the conf
• if you have also a changes on .env and you are using vite make sure to build it after config:clear

here are my snips that it works well.