Echo not using the websocket server

[tpharaoh]

I used the pusher config from the docs, as you can see below, but, the site still tries to use pusher, see the URL below the code

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});

https://sockjs.pusher.com/pusher/app/taito/908/eh3ik378/xhr_streaming?protocol=7&client=js&version=4.3.1&t=1547327336169&n=1

[tpharaoh]

I think I need to first resolve the server side.

This is deployed on forge, with letsencrypt ssl. I checked a few other issues, and so far didn't find solution.

In server, when I click connect, it tries to access the sockets, and I get this in console:

pusher.min.js:8 WebSocket connection to 'wss://domain.com:6001/app/taito?protocol=7&client=js&version=4.3.1&flash=false' failed: WebSocket is closed before the connection is established.

[RicardoRamirezR]

I'm in local host, turned off Wifi then in the console:

OPTIONS https://sockjs.pusher.com/pusher/app/aa6a47362e706bc8c5/839/pglltvvk/xhr_streaming?protocol=7&client=js&version=4.3.1&t=1547385904611&n=1 net::ERR_INTERNET_DISCONNECTED

[RicardoRamirezR]

Just setting encryptedto falseworks for me.

[jafar-albadarneh]

Having the same issue here! been digging for hours! Here is the sequence of my console log:

WebSocket connection to 'wss://domain.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: WebSocket is closed before the connection is established.

WebSocket connection to 'wss://domain.com.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: WebSocket opening handshake timed out

WebSocket connection to 'wss://domain.com.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

@tpharaoh can you explain how did you setup it up with let's encrypt!

[enzonotario]

try to use enabledTransports, like:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'], // <-- only use ws and wss as valid transports
});

[tpharaoh]

Having the same issue here! been digging for hours! Here is the sequence of my console log:

WebSocket connection to 'wss://domain.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: WebSocket is closed before the connection is established.

WebSocket connection to 'wss://domain.com.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: WebSocket opening handshake timed out

WebSocket connection to 'wss://domain.com.com:6001/app/SomeAppKey?protocol=7&client=js&version=4.3.1&flash=false' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT

@tpharaoh can you explain how did you setup it up with let's encrypt!

Sorry, I didn't yet succeed. Although, I found another issue with more info on it. So I try to follow it. Check issue 30

[jafar-albadarneh]

try to use enabledTransports, like:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'], // <-- only use ws and wss as valid transports
});

It's already there dear. It did not work.

[kerrsmith]

I saw similar messages when I was setting this up using SSL - if you visit the documentation page:

https://docs.beyondco.de/laravel-websockets/1.0/basic-usage/ssl.html#configuration

and then go to the 'Usage with Laravel Valet' section and do exactly what is described in this section it might help. I am not using Valet but the settings work perfectly and stop all the errors you are seeing in your browser.

Also, make sure your Let's Encrypt key files are accessible by the user your website is running as - mine were only accessible by 'root' so I had to make a change so Laravel could access them (basically I made a copy of them and put them in my web user's home directory - this is not ideal but it works for now until I figure out a better way to do it). I had to do this as I use ISPConfig for my server and each domain runs as its own user rather than just a single www-data Apache user which may have access by default to these files.

One more thing you may need to do is set:

'perform_dns_lookup' => true,

to the config/websockets.php file, this is not mentioned in the instructions I mentioned above but may be needed.

[tpharaoh]

https://youtu.be/wknGvg0sTAc

Perfect tutorial

[princessjohn]

try to use enabledTransports, like:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    encrypted: true,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'], // <-- only use ws and wss as valid transports
});

Thanks a lot.

[ajcastro]

In my experience it is because of this: So by default encrypted should be set to false

[princessjohn]

Thank you very much

[benounnas]

i will drop this here may be some one will use it

window.Echo = new Echo({
    namespace: '',
    broadcaster: 'pusher',
    encrypted: process.env.MIX_WEBSOCKETS_APP_ENCRYPTED,
    key: process.env.MIX_WEBSOCKETS_APP_KEY,
    wsHost: process.env.MIX_WEBSOCKETS_APP_HOST,
    wsPort: process.env.MIX_WEBSOCKETS_APP_PORT,
    wssPort: process.env.MIX_WEBSOCKETS_APP_PORT,
    disableStats: true,
    enabledTransports: ['ws', 'wss']
});

the webserver didn't work for the first time so, make sure to put all these Envs

[CodeKJ]

I had tough time trying to make this work having my production app behind cloudflared tunnel. But I figured it out, and might be helpful for someone.

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: 'ws.yourdomain.com',
    wsPort: 6001,
    wssPort: 443,
    enabledTransports: ['ws', 'wss'],
    cluster: 'eu',
});

Cloudflare Zero Trust - Tunnel Configuration:

# Public hostname
ws.yourdomain.com

# Service
http://internal_ip:6001