reverb-zero-trust

Setup WSS on subdomain for reverb

What you need:

• VPS (me is Ubuntu)
• Domain linked in your cloudflare account (Optional)
• Zero Trust Cloudflare

1. Setup zero trust

   • Open Zero Trust in Left sidebar
   • Go to Networks -> Tunnels
   • Select Cloudflared and click next
   • Enter Tunnel name
   • On next tab/page you'll be showed for cloudflared installation choose your platform
     • on linux run this sudo cloudflared service install *GENERATED TOKEN*
   • You'll be asked to add public hostname
     • subdomain: wss
     • domain: domain.com -select linked domain on your account-
     • Service type: http
     • Service URL: 0.0.0.0:8080
     • -> Save Tunnel now your wss.domain.com is listening to 0.0.0.0:8080 on vps and ready to accept connection from wss://wss.domain.com and redirect the request to 0.0.0.0:8080 IMPORTANT: check if cloudflared.service is active and enabled by systemctl status cloudflared this could be your issue if you still didn't manage to solve the entire thing of wss

2. .env

# For artisan
REVERB_SERVER_HOST=0.0.0.0  
REVERB_SERVER_PORT=8080
# For frontend
REVERB_HOST="wss.domain.com"
REVERB_PORT=443  
REVERB_SCHEME=https

1. run reverb

php artisan reverb:start

Now try to open your application and check wss connection initiated from your page

Configuration you might need if you are on inertia with typescript: add this code into resources/js/echo.ts

import Echo from 'laravel-echo';  
import Pusher from 'pusher-js';  
  
window.Pusher = Pusher;  
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,  
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',  
    enabledTransports: ['ws', 'wss'],  
});

// You don't need this for echo.js
declare global {  
    interface Window {  
        Echo: Echo;  
        Pusher: typeof Pusher;  
    }
}

and import in resources/js/bootstrap.ts

import axios from 'axios';
import './echo'

window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';