Why doesn't my subscription work? #2636

Thank you very much for your detailed response ! I'm really looking forward to applying the tips and will report back here about my results. Thank you again for your help !

In the meantime, I was able to continue working on this problem. Thanks again for your advice. Unfortunately, I haven't made any progress yet.

I couldn't install the package: beyondcode/laravel-websockets. Various dependencies always prevented this. The latest release 1.14.1 is from August 30, 2023 and doesn't work with my more recent Laravel installation. Beyondcode has stopped further development and refers to reverb.

Then I tried reverb. I installed it with:
php artisan install:broadcasting

Then I set the following .env parameters:
LIGHTHOUSE_SUBSCRIPTION_STORAGE="database"
LIGHTHOUSE_BROADCASTER="reverb"
GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8099/graphql"
REVERB_APP_ID=883890
REVERB_APP_KEY=vn7cgn0g6p87veynhzsq
REVERB_APP_SECRET=cynaqy5qubdlioly3lec
REVERB_HOST="localhost"
REVERB_PORT=8099
REVERB_SCHEME=http
REVERB_SERVER_PORT="${REVERB_PORT}"

Then I started the websocket server with "php artisan reverb:start" and ran "php artisan queue:work".

If I now want to register the subscription with graphiQL, using the graphql query:
"subscription MySubscription {blogInserted {id}}"
, I get the following error message:
"Your GraphiQL createFetcher is not properly configured for websocket subscriptions yet. Please provide subscriptionUrl, wsClient or legacyClient option first."

Maybe the value "GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8099/graphql"" is wrong, but how do I find the correct value ?

If I insert a record regardless, appears in the queue:
2025年01月20日 15:09:31 Nuwave\Lighthouse\Subscriptions\BroadcastSubscriptionJob ................................................................. RUNNING
2025年01月20日 15:09:31 Nuwave\Lighthouse\Subscriptions\BroadcastSubscriptionJob ............................................................ 73.56ms DONE

And there is nothing about this in the output of the websocketserver reverb.

Do you have another tip for me?

1. Ensure Proper Configuration for Reverb
   Reverb is the recommended alternative to beyondcode/laravel-websockets and needs correct setup in your .env file. Based on your configuration:

Check These Points:

Ensure the WebSocket server is running on the specified port:

php artisan reverb:start
Double-check your .env values:

REVERB_HOST="127.0.0.1" # Use IP instead of localhost if unsure.
REVERB_PORT=8099
REVERB_SCHEME=http
LIGHTHOUSE_BROADCASTER="reverb"
LIGHTHOUSE_SUBSCRIPTION_STORAGE="database"
GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8099/graphql"
Verify WebSocket Server Logs: Run php artisan reverb:start and observe its output for startup errors.

2. GraphiQL Subscription Configuration
   GraphiQL requires an explicit WebSocket setup for subscriptions. To resolve the createFetcher error:

Solution: Edit the config/graphiql.php to define the WebSocket URL. For example:

'subscription_url' => env('GRAPHIQL_SUBSCRIPTION_ENDPOINT', 'ws://127.0.0.1:8099/graphql'),
Then, set the GRAPHIQL_SUBSCRIPTION_ENDPOINT in .env:

GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8099/graphql"
Restart Services: After making changes, restart the WebSocket server and queue workers:

php artisan reverb:start
php artisan queue:work
3. Database and Queue Integration
Verify that the database and queue systems are correctly set up for Lighthouse to store and dispatch subscription events.

Ensure Tables Are Migrated: Run migrations for the required tables:

php artisan migrate
Queue Worker: Ensure your queue worker is running and processing jobs correctly:

php artisan queue:work
4. Debug WebSocket Server and Client
To confirm that the server is operational and the client can connect:

Test the WebSocket Connection: Use a WebSocket client like wscat to connect to the Reverb WebSocket server:

wscat -c ws://127.0.0.1:8099/graphql
If the connection fails, there may be an issue with the server setup.

Enable Debug Logs: Modify your .env file to enable debugging:

APP_DEBUG=true
LOG_CHANNEL=stack
Manually Trigger Subscriptions: Broadcast a test event using the Laravel broadcast helper:

event(new \Nuwave\Lighthouse\Subscriptions\Events\BroadcastSubscription($data));
5. Verify Flutter Integration
If your Laravel backend works correctly, but your Flutter app is still not receiving updates, check:

The graphql_flutter configuration.
Ensure the WebSocket endpoint matches ws://127.0.0.1:8099/graphql.
Sample Setup:

final httpLink = HttpLink('http://localhost/graphql');
final websocketLink = WebSocketLink('ws://127.0.0.1:8099/graphql');

final link = Link.split(
(request) => request.isSubscription,
websocketLink,
httpLink,
);

6. Test Alternative Lighthouse Broadcasters
   If Reverb does not work as expected, consider using other broadcasters, such as Pusher or Ably. Update the LIGHTHOUSE_BROADCASTER and test their integration.

Debug Checklist
Is the WebSocket server running and accessible at ws://127.0.0.1:8099?
Are queue jobs processing successfully (no failed jobs in the database)?
Can you see any WebSocket activity in the Reverb logs when you create a new blog?
If these steps don't resolve your issue, sharing specific errors or logs from Reverb and Laravel will help diagnose further.

To resolve the issues with your Laravel + Lighthouse + Reverb WebSocket subscription setup, let’s address each potential problem systematically:

Key Observations
Reverb Server Connection Issues
You successfully connected using wscat with the URL format:
ws://127.0.0.1:8099/app/${REVERB_APP_KEY}
This confirms that the Reverb server is running but requires the correct URL for authentication.

GraphiQL Error (errors: [{ "isTrusted": true }])
This error often indicates a failure in handling the WebSocket connection or parsing server responses.

Broadcast Subscription Not Reaching Reverb
Despite successful job execution, Reverb does not log the subscription or handle events, likely due to mismatched configuration.

Action Plan

1. Verify Reverb Server Setup
   Ensure the Reverb server is properly configured to handle subscriptions:

Check .env Settings:

REVERB_HOST="127.0.0.1"
REVERB_PORT=8099
REVERB_SCHEME=http
REVERB_APP_KEY=zbtonb7eoebrcbzi5rfi
REVERB_APP_SECRET=your-app-secret
LIGHTHOUSE_BROADCASTER="reverb"
LIGHTHOUSE_SUBSCRIPTION_STORAGE="database"
GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8099/app/${REVERB_APP_KEY}"

Start Reverb in Debug Mode:
php artisan reverb:start --debug

2. Correct Subscription Endpoint for GraphiQL
   Update config/graphiql.php to use the correct WebSocket URL:

'subscription_url' => env('GRAPHIQL_SUBSCRIPTION_ENDPOINT', 'ws://127.0.0.1:8099/app/zbtonb7eoebrcbzi5rfi'),
Restart the Reverb server and try registering the subscription.

3. Handle WebSocket 404 Errors
   If you encounter a 404 error using wscat or in GraphiQL, ensure the Reverb server is configured to recognize the /graphql route.

Check Lighthouse Configuration: Lighthouse must correctly forward subscription queries to the broadcaster:

Open config/lighthouse.php and verify:
'subscriptions' => [
'storage' => env('LIGHTHOUSE_SUBSCRIPTION_STORAGE', 'database'),
'broadcaster' => env('LIGHTHOUSE_BROADCASTER', 'reverb'),
'path' => 'graphql',
],
Ensure the graphql route is registered in routes/graphql.php:
use Nuwave\Lighthouse\Support\Http\Controllers\GraphQLController;
Route::post('/graphql', [GraphQLController::class, 'query']);
Route::webSockets('/graphql', [GraphQLController::class, 'webSocket']);

4. Inspect Laravel Logs
   Enable verbose logging to capture any issues during subscription handling:

APP_DEBUG=true
LOG_CHANNEL=stack
LOG_LEVEL=debug
Restart Laravel services:

php artisan reverb:start --debug
php artisan queue:work
5. Test Subscription Flow
Manually test if Reverb receives subscription events:

Register a subscription using Altair or GraphiQL:

subscription {
blogInserted {
id
title
}
}

Insert a new blog:
mutation {
createBlog(input: { title: "Test Blog", content: "Content", author: { connect: "1" } }) {
id
title
}
}

Verify:
Reverb server logs show the subscription.
Laravel queue worker logs the BroadcastSubscriptionJob.

6. Debug Client-Side JavaScript
   The errors: [{ "isTrusted": true }] issue might stem from client-side code failing to parse the server response. This could happen due to:

Incorrect subscription endpoint.
Missing or malformed WebSocket responses.
Check Chrome DevTools (Network → WS) for any errors or empty responses. Ensure Reverb is properly responding to subscription requests.

Advanced Debugging
If the issue persists:

Inspect Reverb Logs: Run php artisan reverb:start --debug and monitor output during subscriptions.
Test Direct Pusher Integration: If Reverb fails, fallback to testing with Pusher directly.
Simplify Lighthouse Setup: Use a minimal schema to isolate the subscription functionality and ensure it works end-to-end.
Flutter Integration
Once backend subscriptions work, configure graphql_flutter to handle subscriptions:

final httpLink = HttpLink('http://localhost/graphql');
final websocketLink = WebSocketLink(
'ws://127.0.0.1:8099/app/zbtonb7eoebrcbzi5rfi',
);

final link = Link.split(
(request) => request.isSubscription,
websocketLink,
httpLink,
);