Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't connect the form to the server socket #78

Closed
michaelnabil230 opened this issue Mar 13, 2024 · 51 comments
Closed

Don't connect the form to the server socket #78

michaelnabil230 opened this issue Mar 13, 2024 · 51 comments
Assignees

Comments

@michaelnabil230
Copy link
Contributor

michaelnabil230 commented Mar 13, 2024

Reverb Version

1.0@beta

Laravel Version

v11.0.5

PHP Version

8.3

Description

I tried with the Postman and is connected well and returns the data and socket ID but javascript does not work I don't know where the issue

env file

APP_URL=https://reverb.test

BROADCAST_CONNECTION=reverb

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

REVERB_APP_ID=218623
REVERB_APP_KEY=laravel-key
REVERB_APP_SECRET=laravel-secret
REVERB_HOST="reverb.test"
REVERB_PORT=8080
REVERB_SCHEME=https

VITE_APP_NAME="${APP_NAME}"
VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

echo.js

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});
Screenshot 2024-03-13 at 9 25 55 PM

Steps To Reproduce

...

@tarreislam
Copy link

where does reverb.test go? I suspect you want to type localhost or another hostname directing to an IP

@michaelnabil230
Copy link
Contributor Author

When set in hostname localhost on the env, prints in the console error and doesn't connect

Screenshot 2024-03-13 at 9 38 16 PM

@joedixon
Copy link
Collaborator

If you don't have an SSL certificate for the domain (common for local development), you should set the REVERB_SCHEME=http rather than https. This will prevent Echo from connecting via secure WebSockets (wss).

@michaelnabil230
Copy link
Contributor Author

I'm using Herd and the SSL is created by Herd

Screenshot 2024-03-13 at 10 26 48 PM

@joedixon
Copy link
Collaborator

If you start the server with the --debug option, do you see the connection attempt?

@michaelnabil230
Copy link
Contributor Author

Is printing after 3 times failed a request from echo

Screenshot 2024-03-13 at 11 05 08 PM Screenshot 2024-03-13 at 11 04 58 PM

@aj-norman
Copy link

aj-norman commented Mar 13, 2024

+1 here - Not to sure if this helps, but I have the same error on Safari as well

[Error] WebSocket connection to 'wss://0.0.0.0:8080/app/laravel-herd?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: bad URL

I'm using Herd Pro to manage the reverb service. My config used for reverb is as show in the Herd Pro screenshot, and the error occurs regardless if REVERB_SCHEME is set to http or https. I logged the output of window.Echo.options to my console and this it is as follows:

{
    "broadcaster": "reverb",
    "enabledTransports": ["ws", "wss"],
    "forceTLS": true,
    "key": "laravel-herd",
    "wsHost": "0.0.0.0",
    "wsPort": "8080",
    "wssPort": "8080,",
}

My steps to reproduce

  • Create new L11 project via Herd
  • Create Reverb service via Herd
  • run artisan broadcasting:install, install deps and use Reverb
  • import @vite directive into welcome.blade.php
Screenshot 2024-03-13 at 22 00 00

@fylzero
Copy link

fylzero commented Mar 14, 2024

+1 here as well. Same issue - Herd Pro, using reverb service, with SSL (via Herd)...

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="demoapp.test" // Using the name of the project as it says in the Herd instructions
REVERB_PORT=8080
// REVERB_SCHEME defaults to https so leaving that unset

@fylzero
Copy link

fylzero commented Mar 14, 2024

Turning off SSL in Herd, changing the APP_URL to http..., and updating the .env settings for Reverb:

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="0.0.0.0"
# REVERB_HOST="deskninja.test"
REVERB_PORT=8080
REVERB_SCHEME=http

Got this working locally. Likely an issue with the SSL. I saw in the docs you could target the SSL cert by entering it in the settings, going to mess around and see if that fixes it.

@aj-norman
Copy link

aj-norman commented Mar 14, 2024

I can confirm @fylzero findings - Removing SSL on Herd and setting REVERB_SCHEME to http does seem to fix the issue and allows a Reverb connection.

Using SSL is a different story. I can get a connection with the following below with SSL switched on in Herd, however it seems to disconnect after 30ish seconds with the same WebSocket connection to 'wss://0.0.0.0:8080...' failed: bad URL

APP_URL=https://reverb-test.test

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="reverb-test.test"
REVERB_PORT=8080
REVERB_SCHEME=https     # Force TLS

@joedixon
Copy link
Collaborator

I just ran through the SSL setup with the following steps and am able to connect (FF, Safari and Chrome) with no issues over wss using the following steps:

  • Install Laravel 11 app (reverb-ssl available at reverb-ssl.test)
  • Secure with Herd
  • Install broadcasting php artisan install:broadcasting
  • Update REVERB_HOST=reverb-ssl.test in my environment
  • Rebuild assets

Reverb lets me know I'm starting a secure server:

Screenshot 2024-03-14 at 14 54 38

And I'm able to connect:

Screenshot 2024-03-14 at 14 48 05 Screenshot 2024-03-14 at 14 55 28

@aj-norman, if you're seeing Echo trying to connect to 0.0.0.0, it's likely you either haven't rebuilt your frontend since updating REVERB_HOST or your VITE_REVERB_HOST variable hasn't been updated.

@fylzero The built-in Reverb service doesn't have SSL support (yet).

@lsdevelop
Copy link

I believe it must be something in the migration from Laravel 10 to 11, I had 10 with laravel websockets running fine, but after the update I'm no longer able to do so.

I just ran through the SSL setup with the following steps and am able to connect (FF, Safari and Chrome) with no issues over wss using the following steps:

  • Install Laravel 11 app (reverb-ssl available at reverb-ssl.test)
  • Secure with Herd
  • Install broadcasting php artisan install:broadcasting
  • Update REVERB_HOST=reverb-ssl.test in my environment
  • Rebuild assets

Reverb lets me know I'm starting a secure server:

Screenshot 2024-03-14 at 14 54 38 And I'm able to connect:

Screenshot 2024-03-14 at 14 48 05 Screenshot 2024-03-14 at 14 55 28
@aj-norman, if you're seeing Echo trying to connect to 0.0.0.0, it's likely you either haven't rebuilt your frontend since updating REVERB_HOST or your VITE_REVERB_HOST variable hasn't been updated.

@fylzero The built-in Reverb service doesn't have SSL support (yet).

@lsdevelop
Copy link

in my tests, run npm run dev "vite dev" the connection of websockets return success but in vite port
image
after build assets, not return error and connection more.

@aj-norman
Copy link

@joedixon - Apologies, I should have made it clearer above - I changed the 0.0.0.0 to my reverb-test.test domain and that worked on a http connection, but SSL still has issues when trying https. However I think you've cleared it up with the following statement above

The built-in Reverb service doesn't have SSL support (yet).

@joedixon
Copy link
Collaborator

in my tests, run npm run dev "vite dev" the connection of websockets return success but in vite port

@lsdevelop that's not the Reverb socket server, that's part of the Vite dev server which is why you don't see it after building your assets for production.

@lsdevelop
Copy link

lsdevelop commented Mar 14, 2024

in my tests, run npm run dev "vite dev" the connection of websockets return success but in vite port

@lsdevelop that's not the Reverb socket server, that's part of the Vite dev server which is why you don't see it after building your assets for production.

Yeah, my f** stupidity

@joedixon
Copy link
Collaborator

So is your issue resolved now @lsdevelop?

@lsdevelop
Copy link

So is your issue resolved now @lsdevelop?

Nope, I'm start trying create new laravel project with broadcasting to validate my migrated files (10 with laravel websockets to 11 with reverb)

@fylzero
Copy link

fylzero commented Mar 14, 2024

It sounds to me like this is an issue with Herd not supporting SSL for their Reverb service. Maybe this is also the cause of the Safari issue? Going to experiment more today.

@fylzero
Copy link

fylzero commented Mar 14, 2024

@lsdevelop I can say that I do not believe this is related to the upgrade. I did a diff check on a fresh project and made sure everything was setup the same as a new project. That said, when I upgraded, it did not add the broadcast config for Reverb....but this did not resolve my issue.

Note: The upgrade/broadcast config issue was just resolved here - #84

@joedixon Can you share the Reverb start command you used for SSL? Did you just run php artisan reverb:start or was it more than that?

@joedixon
Copy link
Collaborator

@fylzero just php artisan reverb:start, but you need to ensure REVERB_HOSTNAME is set to a domain served by Herd and that domain must be secured by Herd. Reverb will detect the rest.

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon I just tried this and Reverb does not work this way. I'm a bit confused, in Herd when using the Reverb service, it provides the REVERB_APP_ID, REVERB_APP_KEY, and REVERB_APP_SECRET. When removing the Herd Reverb service and using php artisan reverb:start how do we/does it know what these values should be?

Currently:

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="myapp.test"
REVERB_PORT=8080
REVERB_SCHEME=https

Also, I think about you meant REVERB_HOST as REVERB_HOSTNAME is not referenced in any configs - though the config key is hostname.

I've opened a bug with Herd: beyondcode/herd-community#467

@lsdevelop
Copy link

@lsdevelop I can say that I do not believe this is related to the upgrade. I did a diff check on a fresh project and made sure everything was setup the same as a new project. That said, when I upgraded, it did not add the broadcast config for Reverb....but this did not resolve my issue.

Note: The upgrade/broadcast config issue was just resolved here - #84

@joedixon Can you share the Reverb start command you used for SSL? Did you just run php artisan reverb:start or was it more than that?

After update broadcast.php, the connection has return this, i`m continue trying.
image

@joedixon
Copy link
Collaborator

@joedixon I just tried this and Reverb does not work this way. I'm a bit confused, in Herd when using the Reverb service, it provides the REVERB_APP_ID, REVERB_APP_KEY, and REVERB_APP_SECRET. When removing the Herd Reverb service and using php artisan reverb:start how do we/does it know what these values should be?

Currently:

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="myapp.test"
REVERB_PORT=8080
REVERB_SCHEME=https

Also, I think about you meant REVERB_HOST as REVERB_HOSTNAME is not referenced in any configs - though the config key is hostname.

I've opened a bug with Herd: beyondcode/herd-community#467

I'm not sure it's a bug with Herd, it's just not supported on the built-in service yet.

The app key, id and secret can be anything, but if you remove them all from your .env and run reverb:install, they will be populated for you.

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon Apologies. I'm not sure I understand the difference between Herd's Reverb service and the built-in service. Can you clarify that?

Also, that's great those can be anything. Then do you have any thoughts as to why this isn't working for me with the reverb:start command?

Thanks!

@joedixon
Copy link
Collaborator

Herd's service is completely separate from your application. It's essentially a standalone Laravel application running Reverb which any of your own applications can connect to. It's really for use in scenarios where you want to use Reverb, but not have it running alongside your application.

What's the error you're seeing when trying to start the server with reverb:start?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon Ok, so - using the Herd Reverb service without SSL, everything with Reverb works.

If I...

  • Turn ON the SSL in Herd for the site
  • Set APP_URL=https... in .env
  • Change REVERB_SCHEME=https in .env
  • Stop and remove the Reverb service from Herd
  • Then run php artisan reverb:start

I get the error:
WebSocket connection to 'wss://myapp.test:8080/app/laravel-herd?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

...and the websocket event does nothing. No other errors.

@joedixon
Copy link
Collaborator

What is displayed in the console after running the reverb:start command?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon

INFO Starting secure server on 0.0.0.0:8080 (myapp.test).

@joedixon
Copy link
Collaborator

Can you use the --debug option when starting the command to see if any connection events are being sent to the server?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon Did --debug, tried executing a Reverb event again. Nothing more is outputting there - and as I mentioned, the browser console shows connection failed.

I do see (after a second or two):
Pruning Stale Connections ........................................................................................................................
Pinging Inactive Connections .....................................................................................................................

@joedixon
Copy link
Collaborator

Ok, if you hit https://myapp.test:8080/app/laravel-herd in the browser, do you get an SSL error or a server error?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon Says "Internal server error"

@joedixon
Copy link
Collaborator

Can you share all of your REVERB_ and VITE_REVERB_ prefixed environment variables and your echo configuration?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon

REVERB_APP_ID=1001
REVERB_APP_KEY=laravel-herd
REVERB_APP_SECRET=secret
REVERB_HOST="myapp.test"
REVERB_PORT=8080
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

@joedixon
Copy link
Collaborator

Just tested with the exact same configuration and can't replicate it!

Is this a brand new app or existing? If existing, can you send over how Echo is being instantiated?

Can you also let me know the browser and send a screenshot of the error and anything relevant in the console?

@fylzero
Copy link

fylzero commented Mar 14, 2024

@joedixon Existing/upgraded app. Testing in Brave (shields off - basically Chrome). I'm not seeing any errors that haven't been shared already.

I put the Echo code directly in my app.js:

// Echo
import Echo from 'laravel-echo'

import Pusher from 'pusher-js'
window.Pusher = Pusher

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
})

My vue code:

onMounted(() => {
    Echo.private(`branch.${page.props.authUser.branch_id}`).listen('IssueCreatedEvent', (event) => {
        router.reload({ only: ['issues'] })
    })
})

onUnmounted(() => {
    Echo.leave(`branch.${page.props.authUser.branch_id}`)
})

I mean this all works without SSL - so I don't think anything is misconfigured. If youre open to it, we can jump on a Google Meet or something to walk through this. My email is just my github username at gmail dot com. I just had ankle surgery so I'm laid up with a laptop and nothing to do. Really appreciate your help here!

@lsdevelop
Copy link

Really, non secure working fine, tomorrow i deploy to my staging environment with reverb and ssl to starting tests in similarly production environment

@joedixon
Copy link
Collaborator

@fylzero can you try a brand new project just so we can rule out anything specific to the project / host?

@fylzero
Copy link

fylzero commented Mar 15, 2024

@joedixon Will do. ...but I've already diff checked to make sure nothing was missing compared to a fresh project. Also, the fact that it works sans-SSL should I think rule that out as an issue.

@lsdevelop
Copy link

Update, in production, works fine with SSL, the problem is local and specify from herd/valet.

@trydalcoholic
Copy link

Hi @joedixon!
I have a similar problem. At first I tried to connect Reverb on the current project, but I got the error WebSocket connection to... in the browser console.
Then I did a clean install of Laravel using docker in a WSL environment. And I still get the same error: WebSocket connection to 'ws://localhost:8080/app/vorzsu5irbdva48qipku?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

image

sail artisan reverb:start --debug:

INFO  Starting server on 0.0.0.0:8080 (localhost).

Pruning Stale Connections ...................................................................  
Pinging Inactive Connections ................................................................  
Pruning Stale Connections ...................................................................  
Pinging Inactive Connections ................................................................  

.env:

APP_URL=http://localhost

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=222435
REVERB_APP_KEY=vorzsu5irbdva48qipku
REVERB_APP_SECRET=uig8whxhdpkafmocbn4u
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

echo.js:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

I use WSL and Laravel Sail. The server is started using the command sail artisan serve

@Cloner311
Copy link

I have exactly the same problem

Web server: Lightspeed
Laravel: version 11

error :

app-CamLVODr.js:13 WebSocket connection to 'wss://mydomain.com/app/cmjnsrygmqfjkdrsmxib?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

@pilutiful
Copy link

pilutiful commented Mar 17, 2024

Hi @joedixon! I have a similar problem. At first I tried to connect Reverb on the current project, but I got the error WebSocket connection to... in the browser console. Then I did a clean install of Laravel using docker in a WSL environment. And I still get the same error: WebSocket connection to 'ws://localhost:8080/app/vorzsu5irbdva48qipku?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed:

image

sail artisan reverb:start --debug:

INFO  Starting server on 0.0.0.0:8080 (localhost).

Pruning Stale Connections ...................................................................  
Pinging Inactive Connections ................................................................  
Pruning Stale Connections ...................................................................  
Pinging Inactive Connections ................................................................  

.env:

APP_URL=http://localhost

BROADCAST_CONNECTION=reverb

REVERB_APP_ID=222435
REVERB_APP_KEY=vorzsu5irbdva48qipku
REVERB_APP_SECRET=uig8whxhdpkafmocbn4u
REVERB_HOST="localhost"
REVERB_PORT=8080
REVERB_SCHEME=http

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

echo.js:

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

I use WSL and Laravel Sail. The server is started using the command sail artisan serve

I also encountered this using Laravel Sail (Windows, WSL, Laravel 10 upgraded to 11).

By adding port 8080 (used by Reverb) to docker-compose.yml solved the problem.

Udklip

@trydalcoholic
Copy link

@pilutiful
That's great! It really works now. Thank you very much!

@joedixon
Copy link
Collaborator

Closing this now as we have a few different problems merged into the same issue. If you are still running into a problem, please open a new issue.

@ritwikBiswas007
Copy link

cluster: 'Redis',

Add this line in your Echo options

@claudiodekker
Copy link

Also ran into this one today 😅

Basically, the pusher-js library (internally used by Echo) will force-enable the useTLS option regardless of your preferences whenever it detects the browser is on a https (secure) connection.

Or, in other words, regardless of what you're instructing Reverb/Pusher to do, it's going to demand a "secure" websocket connection, as visible in your browser by the fact that it'll try to connect to wss:// instead of ws://.

To fix this, there's two things you can do:

  1. As mentioned before, you can turn off SSL for the domain
  2. Run the Reverb server as documented here: https://laravel.com/docs/11.x/reverb#ssl

(If you're running Reverb inside Herd, and as long as those flags are missing, don't forget to turn off that service first, or you'll run into errors regarding the port already being in use!)

@peligro
Copy link

peligro commented Sep 26, 2024

hola, lo resolví de la siguiente forma:

agregué la IP en la variable:

REVERB_HOST="192.168.1.88"

y reconstruí con npm un build para que tome los cambios.

Funcionó perfecto!!! incluso lo probé de otros equipos conectados a la misma red de manera exitosa.

Saludos desde Viña del Mar, Chile

@Silomalo
Copy link

Silomalo commented Nov 23, 2024

Update, in production, works fine with SSL, the problem is local and specify from herd/valet.

No, getting error:
WebSocket connection to 'wss://domain.com:8080/app/hoxt1tdbscobu52wqeqf?protocol=7&client=js&version=8.4.0-rc2&flash=false' failed: WebSocket is closed before the connection is established.

Local is working, but in production , the error persists and connection can not be established

@SeyamMs
Copy link

SeyamMs commented Nov 28, 2024

well I faced this problem as well and this helped me, consider taking a look here
https://gist.github.com/maxkostinevich/97c9e14f9b4ab8076582de9912e6524d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests