Flutter - Pusher & EchoClient - Connecting but not receiving events from channel

Question

I'm trying to connect my flutter application to a laravel websocket using Pusher as a broadcaster.

I was able to connect my Flutter application to the laravel websocket using the following Flutter Code:

Echo echoSetup(token, pusherClient) {
  return new Echo({
    'broadcaster': 'pusher',
    'client': pusherClient,
    "wsHost": 'laravel-server.test',
    "httpHost": 'laravel-server.test',
    "wsPort": 6001,
    'auth': {
      "headers": {'Authorization': 'Bearer $token'}
    },
    'authEndpoint': 'http://laravel-server.test/api/broadcasting/auth',
    "disableStats": true,
    "forceTLS": false,
    "enabledTransports": ['ws', 'wss']
  });
}

FlutterPusher getPusherClient(String token) {
  PusherOptions options = PusherOptions(
      encrypted: false,
      host: 'laravel-server.test',
      cluster: 'mt1',
      port: 6001,
      auth: PusherAuth('http://laravel-server.test/api/broadcasting/auth',
          headers: {'Authorization': 'Bearer $token'}));
  return FlutterPusher('********************', options, enableLogging: true);
}

void _setUpEcho() {
    final token = Prefer.prefs.getString('api_token');

    pusherClient = getPusherClient(token);
    echo = echoSetup(token, pusherClient);
    pusherClient.connect(onConnectionStateChange: onConnectionStateChange);
    echo.join("app")
      ..here((users) => print('users'))
      ..listenForWhisper("typing", (event) {
        // log(User.fromJson((event)['user']).username);
        // typingTimer.cancel();
        print("Typing");
      })
      ..listen("MessageSent", (event) {
        print("MessageSent");
        print(event);
      })
      ..listen("MessageRead", (event) {
        print("MessageRead");
      })
      ..joining((user) {
        print(user);
      })
      ..leaving((user) {
        print(user);
      });
  }

On laravel, I'm handling the websockets using beyondcode/laravel-websockets package, by running the command:

php artisan config:clear && php artisan websockets:clean && php artisan websockets:serve

The connection from the flutter app is being received successfully:

Starting the WebSocket server on port 6001...
New connection opened for app key d90a096cb11a24224e65.
Connection id 539868010.286231392 sending message {"event":"pusher:connection_established","data":"{\"socket_id\":\"539868010.286231392\",\"activity_timeout\":30}"}

The problem is, that whenever I send an event, the Flutter app does not receive the event, but the laravel log shows the following:

Connection id 522168000.296786193 sending message {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"08:53:23","details":"Channel: app, Event: MessageSent","data":"[]"}}

This is my .env file on laravel:

APP_NAME=Doggo
APP_ENV=local
APP_KEY=base64:4McNATirACsK+TIbKd0mWTh3gYX14eF97iHW9lZTD6Q=
APP_DEBUG=true
APP_HOST=laravel-server.test
APP_URL=http://laravel-server.test/

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=******
PUSHER_APP_KEY=*********
PUSHER_APP_SECRET=********
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

API_PREFIX=api

Why is Flutter only able to connect, but not receive events?

Answer 1

The event needs to be namespaced to App\Events\....

Answer 2

You need to ensure your client is subscribing to the same channel that the event is broadcast on, and the client also needs to bind to the event of the same name.