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

[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?
I tried to print the error ,this is what i get:
I/flutter (23614): error of socket is : SocketException: Connection timed out (OS Error: Connection timed out, errno = 110), address = 171.48.95.81, port = 44880

my message event
`
class MessageSent implements ShouldBroadcastNow
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}

/**
 * Get the channels the event should broadcast on.
 *
 * @return array<int, \Illuminate\Broadcasting\Channel>
 */
public function broadcastOn(): array
{
    $channels = [];

    $participants = ChatParticipants::where('chat_id', $this->message->chat_id)->pluck('user_id');

    foreach ($participants as $userId) {
        $channels[] = new PrivateChannel('chat-channel.' . $userId);
    }
    return $channels;
}
// public function broadcastAs(): string
// {
//     return 'message.sent';
// }

}`

[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

[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