Laravel reverb not working with SSL on production with apache

[pranavmankar]

I am using Let's Encrypt SSL. PHP 8.3.12 — Laravel 11.29.0

In terminal after running: php artisan reverb:start --debug
It shows: Starting server on 0.0.0.0:8080 (example.com).

Getting this error in the console of the receive-notification blade file.

WebSocket connection to 'wss://localhost:8080/app/m0ym3fxag51pkwyz7n6u?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

My event code

class SendNotification implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

     public $msg;

    public function __construct($msg)
    {
        //
        $this->msg = $msg;

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn()
    {
        return new Channel('noti');
    }

    public function broadcastAs()
    {
        return "notify";
    }

    public function broadcastWith()
    {
        return [
            "message" => $this->msg
        ];
    }
}

.env file

REVERB_APP_ID=APP_ID
REVERB_APP_KEY=APP_key
REVERB_APP_SECRET=APP_SECRET
REVERB_HOST="example.com"
REVERB_SERVER_PORT=8080
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}"

echo.js file

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'],
});

receive-notification.blade.php JavaScript code

@vite('resources/js/app.js')
<script type="module">
   window.Echo.channel("noti").
    listen(".notify", (e) => {
      console.log(e);
    } )
</script>

virtual host conf file

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "/www/wwwroot/example.com/public"
    ServerName ea68ca5f.example.com
    ServerAlias example.com www.example.com
    #errorDocument 404 /404.html
    ErrorLog "/www/wwwlogs/example.com-error_log"
    CustomLog "/www/wwwlogs/example.com-access_log" combined
    #HTTP_TO_HTTPS_START
    <IfModule mod_rewrite.c>
        RewriteEngine on
        RewriteCond %{SERVER_PORT} !^443$
        RewriteRule (.*) https://%{SERVER_NAME}$1 [L,R=301]
    </IfModule>
    #HTTP_TO_HTTPS_END

    #DENY FILES
     <Files ~ (\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)$>
       Order allow,deny
       Deny from all
    </Files>
    
    #PHP
    <FilesMatch \.php$>
            SetHandler "proxy:unix:/tmp/php-cgi-83.sock|fcgi://localhost"
    </FilesMatch>
    
    #PATH
    <Directory "/www/wwwroot/example.com/public">
        SetOutputFilter DEFLATE
        Options FollowSymLinks
        AllowOverride All
        Require all granted
        DirectoryIndex index.php index.html index.htm default.php default.html default.htm
    </Directory>

    
</VirtualHost>
<VirtualHost *:443>
    ServerAdmin [email protected]
    DocumentRoot "/www/wwwroot/example.com/public"
    ServerName SSL.example.com
    ServerAlias www.example.com example.com 
    #errorDocument 404 /404.html
    ErrorLog "/www/wwwlogs/example.com-error_log"
    CustomLog "/www/wwwlogs/example.com-access_log" combined
    
    #SSL
    SSLEngine On
    SSLCertificateFile /www/server/panel/vhost/cert/example.com/fullchain.pem
    SSLCertificateKeyFile /www/server/panel/vhost/cert/example.com/privkey.pem
    SSLCipherSuite EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5
    SSLProtocol All -SSLv2 -SSLv3 -TLSv1
    SSLHonorCipherOrder On
    
    
    #PHP
    <FilesMatch \.php$>
            SetHandler "proxy:unix:/tmp/php-cgi-83.sock|fcgi://localhost"
    </FilesMatch>
    

    #DENY FILES
     <Files ~ (\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)$>
       Order allow,deny
       Deny from all
    </Files>

    #PATH
    <Directory "/www/wwwroot/example.com/public">
        SetOutputFilter DEFLATE
        Options FollowSymLinks
        AllowOverride All
        Require all granted
        DirectoryIndex index.php index.html index.htm default.php default.html default.htm
    </Directory>
</VirtualHost>
ProxyPreserveHost On
<Location /app>
        ProxyPass ws://0.0.0.0:8080/app
        ProxyPassReverse ws://0.0.0.0:8080/app
</Location>
<Location /apps>
        ProxyPass http://0.0.0.0:8080/apps
        ProxyPassReverse http://0.0.0.0:8080/apps
</Location>

[pranavmankar]

I just ran npm install and npm run build on production, and the problem is solved.

[php-dev-umesh]

I am also facing same issue as your can you help me out with that ?