Integration of Laravel Reverb with Flutter Mobile App WebSocket

[najeeb-anwari]

Description:
I'm currently working on a project where I've implemented Laravel Reverb for WebSocket communication on the backend. Now, I'm in the process of developing a mobile app using Flutter for the client side. I'm seeking advice on the best approach to integrate the WebSocket functionality from Laravel Reverb into my Flutter mobile app.

Specifically, I'd like guidance on:

Setting up WebSocket connection handling in Flutter.
Establishing communication between the Flutter app and the Laravel backend via WebSocket.
Handling events and data transmission between the Flutter client and Laravel server effectively.
Any potential pitfalls or best practices to keep in mind during the integration process.
Any insights, code snippets, or recommended libraries would be greatly appreciated. Thank you in advance for your assistance!

[mrbohem]

Have you find any solution

[najeeb-anwari]

Not yet.

[n4ff4h]

I use this https://pub.dev/packages/dart_pusher_channels. The only one maintained well so far according to my research. Couldn't get to work with private channels though. Public channels does work however.

[najeeb-anwari]

Oh really!
Could you share the solution here. Your help is appreciated.

[juliansteenbakker]

I tried this package, however with private channels, even when adding the authorization header, i still receive null on the $user in:

Broadcast::channel('App.Models.User.{id}', function ($user, $id) {
    return (int) $user->id === (int) $id;
});

How did you solve this @oolayemi ?

[arefmoradipasha]

did anyone find solution for that ?

[najeeb-anwari]

Mr. @mkarimshahbaz found a package that works fine.
web_socket_channel

[mkarimshahbaz]

You can use web_socket_channel.

[najeeb-anwari]

Thank you very much. That really works. You saved my life.

[eslam-eng]

Could you share the solution here. Your help is appreciated

[EvgenyDavydenko]

could you show an example of the source code for connecting to a private channel? I can't pass the authorization token in such a way that I get a key like

"auth": "d6afo3fjzrmflyhq6mrg:418a1159a7b726e809ff9300a9b9440fd70109ee979a59ef9e9c3fbfdd5e9fc9"

[musibaforreal]

@EvgenyDavydenko did you have any luck with finding the solution

[newQuery]

@najeeb-anwari were you able to connect to private channels ?

[Hybiekay]

please i need help on this also

[EzekielWachira]

What about on android, what's the best library I can use?

[Cxatek18]

Have you found the answer?

[jbeduya]

I also have this problem for a long time. This is how I was able to make it work using dart_pusher_channels.

I added the following in my bootstrap/app.php (source)

    ...
    ->withBroadcasting(
        channels: __DIR__ . '/../routes/channels.php',
        attributes: ['prefix' => 'api', 'middleware' => ['auth:sanctum']],
    )
   ...

Then did this in flutter.

import 'dart:async';

import 'package:dart_pusher_channels/dart_pusher_channels.dart';

Future<void> connect() async {
  const hostOptions = PusherChannelsOptions.fromHost(
    scheme: 'ws',
    host: '192.168.1.2',
    key: '<YOUR REVERB KEY>',
    shouldSupplyMetadataQueries: true,
    metadata: PusherChannelsOptionsMetadata.byDefault(),
    port: 8080,
  );

  final client = PusherChannelsClient.websocket(
      options: hostOptions,
      connectionErrorHandler: (exception, trace, refresh) {
        refresh();
      });

  final channel = client.publicChannel(
    'user.5.wallet',
  );

  final private = client.privateChannel(
    'private-App.Models.User.5',
    authorizationDelegate:
        EndpointAuthorizableChannelTokenAuthorizationDelegate.forPrivateChannel(
      authorizationEndpoint: Uri.parse('http://192.168.1.2:8000/api/broadcasting/auth'),
      headers: const {
        'Authorization': 'Bearer <USER SANCTUM TOKEN>',
      },
    ),
  );

  StreamSubscription<ChannelReadEvent> channelSubscription =
      channel.bind('App\\Events\\WalletUpdatedEvent').listen((event) {
    print('Event received: ${event.data}');
  });

  StreamSubscription<ChannelReadEvent> privateSubscription =
      private.bind('App\\Events\\WalletUpdatedEvent').listen((event) {
    print('Private event received: ${event.data}');
  });

  client.onConnectionEstablished.listen((s) {
    print('Connection established');
    channel.subscribe();
    private.subscribe();
  });

  await client.connect();
}

[sarmaRandeepGithub12345]

Do you have events that fire that you can listen to?
changes I have made in bootstrap/app.php

`return Application::configure(basePath: dirname(DIR))
->withRouting(
web: DIR.'/../routes/web.php',
api: DIR.'/../routes/api.php',
commands: DIR.'/../routes/console.php',
// channels: DIR.'/../routes/channels.php',
health: '/up',
)
->withBroadcasting(
channels: DIR.'/../routes/channels.php',
attributes: ['prefix' => 'api', 'middleware' => ['auth:sanctum']],
)
->withMiddleware(function (Middleware $middleware) {
//
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();

changes in routes/channels.php for authentication
Broadcast::channel('chat-channel.{id}', function (User $user, $id) {
return $user->id === $id;
});code to fire the event broadcast(new MessageSent($message))->toOthers();`

[sarmaRandeepGithub12345]

Do you have events that fire that you can listen to?

my dart code to connect to reverb and listen to events :
`
Future dartconnect() async {
try {
final auth = Provider.of(context, listen: false);
const hostOptions = PusherChannelsOptions.fromHost(
scheme: 'ws',
host: '171.48.95.80',
key: 'reverb_key',
shouldSupplyMetadataQueries: true,
metadata: PusherChannelsOptionsMetadata.byDefault(),
port: 8080,
);

      final client = PusherChannelsClient.websocket(
          options: hostOptions,
          connectionErrorHandler: (exception, trace, refresh) {
            refresh();
          });

      final private = client.privateChannel(
        'chat-channel.${auth.user!.id}',
        authorizationDelegate:
            EndpointAuthorizableChannelTokenAuthorizationDelegate
                .forPrivateChannel(
          authorizationEndpoint: Uri.parse('$domain/api/broadcasting/auth'),
          headers: {
            'Authorization': 'Bearer ${auth.loginToken}',
            'Content-Type': 'application/json',
          },
        ),
      );

          StreamSubscription<ChannelReadEvent> privateSubscription =
              private.bind('App\\Events\\MessageSent').listen((event) {
            print('Private event received:${event.data} ');
          });
    
          client.onConnectionEstablished.listen((s) {
            print('Connection established');
            private.subscribe();
          });
          print("just before request");
          await client.connect();
          print("just after request");
        } catch (e) {
          print("Datetime ${DateTime.now()} error $e");
        }
      }

`

[sarmaRandeepGithub12345]

Do you have events that fire that you can listen to?

Bro please help me🙏

[musibaforreal]

@jbeduya what form authorization were you using for the private channels were you using laravel sanctum tokens or any other forms of auth

[musibaforreal]

@sarmaRandeepGithub12345 please check your event names as they are case sensitive please make sure the name of the event in laravel match with the flutter one exactly

[jbeduya]

I am using Sanctum.

…

On Fri, Nov 22, 2024 at 12:06 PM musibaforreal ***@***.***> wrote: @jbeduya <https://github.com/jbeduya> what form authorization were you using for the private channels were you using laravel sanctum tokens or any other forms of auth — Reply to this email directly, view it on GitHub <#51766 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AALXSAO5XL5SW5Z5K2E7NMD2B2UT7AVCNFSM6AAAAABJD3A7BSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZUGQYTKNQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[musibaforreal]

would you mind sharing your project as i am having a problem with the auth for connecting with private channels always sending back a 403 error code when truing to connect

[musibaforreal]

i found the solution the channels are case sensitive so if your channel is User and tried to connect using user it will not work

[reach-211]

It's kinda late here, but I wrote a blog post that describes how you can actually accomplish this: https://blog.niy.ai/2025/01/28/integrating-flutter-with-laravel-reverb-a-practical-guide/

[amargiovanni]

if it can be helpful: https://github.com/Oltrematica/flutter_reverb