search

laravel / reverb

Laravel Reverb provides a real-time WebSocket communication backend for Laravel applications.
https://reverb.laravel.com
MIT License
1.11k stars 90 forks source link

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

Closed michaelnabil230 closed 7 months ago

michaelnabil230 commented 7 months ago

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 commented 7 months ago

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

michaelnabil230 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

Screenshot 2024-03-13 at 10 26 48 PM
joedixon commented 7 months ago

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

michaelnabil230 commented 7 months ago

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 commented 7 months ago

+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

Screenshot 2024-03-13 at 22 00 00
fylzero commented 7 months ago

+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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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:

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

So is your issue resolved now @lsdevelop?

lsdevelop commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 - https://github.com/laravel/reverb/pull/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 commented 7 months ago

@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 commented 7 months ago

@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: https://github.com/beyondcode/herd-community/issues/467

lsdevelop commented 7 months ago

@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 commented 7 months ago

@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 commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

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

If I...

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 commented 7 months ago

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

fylzero commented 7 months ago

@joedixon

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

joedixon commented 7 months ago

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

fylzero commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

@joedixon Says "Internal server error"

joedixon commented 7 months ago

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

fylzero commented 7 months ago

@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 commented 7 months ago

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 commented 7 months ago

@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 commented 7 months ago

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

joedixon commented 7 months ago

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

fylzero commented 7 months ago

@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 commented 7 months ago

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

trydalcoholic commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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

joedixon commented 7 months ago

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 commented 6 months ago

cluster: 'Redis',

Add this line in your Echo options

claudiodekker commented 5 months ago

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 commented 1 month ago

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