how to use CloudFlare SSL in Laravel-websockets

Question

my project hosted in digitalocean and I have connected domain to server using cloudflare. I using SSL. But WSS connection does not work. I got this error message WebSocket connection to 'wss://mywebsite.com/app/ABCDEFG?protocol=7&client=js&version=6.0.3&flash=false' failed: Error during WebSocket handshake: Unexpected response code: 404

I have apache2 server

my config/broadcasting.php looks like

'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'app_id' => env('PUSHER_APP_ID'),
        'options' => [
            'cluster' => env('PUSHER_APP_CLUSTER'),
            'useTLS' => false,
            'encrypted'=>true,
            'host'=>'127.0.0.1',
            'port'=>2053,
            'scheme'=>'https',
            'curl_options'=> [
                CURLOPT_SSL_VERIFYHOST => 0,
                CURLOPT_SSL_VERIFYPEER => 0,
            ]
        ],
    ],

and client side bootstrap.js looks like

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: false,
    encrypted:true,
    wsHost: window.location.hostname,
    wsPort: 2053,
    wssPort: 2053,
    disableStats: true,
    enabledTransports:['ws','wss'],

});

and I running command php artisan websockets:serve --port=2053

if you want any additional information please write comment. anyone have solution? thanks

new error failed: WebSocket is closed before the connection is established.

there is a SSL property in `websockets.php`. Did you assign your `CERTIFICATE_FILE` and `CERTIFICATE_KEY` to it? Post it here as well. — Uzair Riaz, Jun 14 '20 at 18:39
Do you mind working with WS instead of WSS? Or you strongly prefer wss? — GTHell, Jun 27 '20 at 08:48

score 0 · Answer 1 · answered Feb 25 '23 at 08:53

You need to configure Apache Proxy Web Socket Tunnel module or Proxy Http module: https://httpd.apache.org/docs/2.4/mod/mod_proxy_wstunnel.html https://httpd.apache.org/docs/2.4/mod/mod_proxy_http.html

When check connection and proxy pass it to WS backend:

RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^/?(.*) "ws://127.0.0.1:2053/$1" [P,L]

how to use CloudFlare SSL in Laravel-websockets

1 Answers1