Laravel Pusher Websocket Not Working on HTTPS

Question

I'm using Laravel 5.8, and we're using a web socket with PUSHER in our application. It's broadcast perfectly locally or when I am on HTTP mode. When I update my set up to HTTPS, Broadcasting is no longer works.

Any hints on this ? anyone ?

I've tried

#Client Side

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

and

#Server Side

'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'),
        'scheme' => 'http',
        'useTLS' => true,
        'debug' => true,
        'curl_options' => [
            CURLOPT_SSL_VERIFYHOST => 0,
            CURLOPT_SSL_VERIFYPEER => 0,
            CURLOPT_IPRESOLVE => CURL_IPRESOLVE_V4
        ]
    ],
],

Same Result! Not working!

It working perfectly on Chrome locally, but firefox

I see this in console

Answer 1

You are not connecting to the correct port, or the default port is by Echo is not the default you should use for pusher. Define the correct port inside your JavaScript frontend .env file. (I don't know your repositories settings, but sometimes you can use a .env.local file, for example in a Vue setup).

Pusher seems to use default web ports 80 and 443, as described here: https://pusher.com/docs/channels/library_auth_reference/pusher-websockets-protocol

After you defined the port inside your .env, change your JavaScript code:

wsPort: process.env.MIX_PUSHER_WS_PORT, 
wssPort: process.env.MIX_PUSHER_WSS_PORT,

Don't forget to rebuild your frontend.

Answer 2

I can't write comments due to my low reputation, so I will write here:

Try changing HTTP to HTTPS in 'scheme' => 'http'

Check this option in websockets.php

'verify_peer' => false,

Also take a look at config samples in this article:
https://www.digitalocean.com/community/questions/how-to-configure-laravel-websockets-with-ssl-on-nginx