Laravel Pusher Websocket Not Working on HTTPS
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.
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
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.