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

Any errors in your console log out network tab in your browser? — Maarten Veerman, Jun 26 '20 at 21:30
Try turning encrypted off? Usually when there's no log or error, make sure the driver is correctly set to pusher and the app_key should be the same. If then should out put handshake error or authentication error in front-end console. — GTHell, Jun 27 '20 at 08:32
@MaartenVeerman : I checked on firefox, I happen to see error on console as your predicted. now. — code-8, Jun 27 '20 at 21:24
I think the port number is incorrect. You are connecting to port 6001, pusher uses the standard 443 for secure connections. See https://support.pusher.com/hc/en-us/articles/360019420773-What-ports-do-I-need-to-open-in-my-Firewall-to-allow-Channels-to-connect- — Maarten Veerman, Jun 28 '20 at 09:09
@MaartenVeerman Do you think I should have 2 settings for local and prod ? — code-8, Jun 28 '20 at 11:28

Maarten Veerman · Accepted Answer · 2020-07-05T19:05:52.697

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.

_Don't forget to rebuild your frontend_ and clear browser caches caching javascript files ;) — dbf, Jul 17 '20 at 12:00

Pavel Cechir · Answer 2 · 2020-07-15T10:20:59.633

1

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

edited Jul 15 '20 at 10:20

answered Jul 15 '20 at 10:14

Pavel Cechir

111
1
7

score 0 · Answer 3 · answered Jul 22 '20 at 00:25

Since you mentioned, this is happening locally, you may want to check out this issue as it may be related to what you are experiencing... essentially there is a workaround outlined, to get firefox to work with self signed certificates, on sockets...

Additionally, what happens if you remove 'wss' from this your constructor:

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, <-- Should these be commented out?
    // wssPort: 6001, <-- Should these be commented out?
    disableStats: true,
    forceTLS: true,
    enabledTransports: ['ws'] // removed wss
});

Furthermore, you have your ports commented out... that seems odd, as you need to have a port to the socket service.

Laravel Pusher Websocket Not Working on HTTPS

3 Answers3