Flutter app does not receive Events fired from Laravel Soketi server

[mwangaben]

Please assist on where do i go wrong on the Flutter app testing on the Google pixel mobile phone using common Ip address
My ip is 192.168.0.102

Soketi configurations

{
adapter: {
 driver: 'local',
 redis: {
   requestsTimeout: 5000,
   prefix: '',
   redisPubOptions: {},
   redisSubOptions: {},
   clusterMode: false
 },
 cluster: { requestsTimeout: 5000 },
 nats: {
   requestsTimeout: 5000,
   prefix: '',
   servers: [ '127.0.0.1:4222' ],
   user: null,
   pass: null,
   token: null,
   timeout: 10000,
   nodesNumber: null
 }
},
appManager: {
 driver: 'array',
 cache: { enabled: false, ttl: -1 },
 array: {
   apps: [ { id: 'app-id', key: 'app-key', secret: 'app-secret' } ]
 },
 dynamodb: { table: 'apps', region: 'us-east-1', endpoint: null },
 mysql: { table: 'apps', version: '8.0', useMysql2: false },
 postgres: { table: 'apps', version: '13.3' }
},
cache: { driver: 'memory', redis: { redisOptions: {}, clusterMode: false } },
channelLimits: { maxNameLength: 200, cacheTtl: 3600 },
cluster: {
 hostname: '0.0.0.0',
 helloInterval: 500,
 checkInterval: 500,
 nodeTimeout: 2000,
 masterTimeout: 2000,
 port: 11002,
 prefix: '',
 ignoreProcess: true,
 broadcast: '255.255.255.255',
 unicast: null,
 multicast: null
},
cors: {
 credentials: true,
 origin: [ '*' ],
 methods: [ 'GET', 'POST', 'PUT', 'DELETE', 'OPTIONS' ],
 allowedHeaders: [
   'Origin',
   'Content-Type',
   'X-Auth-Token',
   'X-Requested-With',
   'Accept',
   'Authorization',
   'X-CSRF-TOKEN',
   'XSRF-TOKEN',
   'X-Socket-Id'
 ]
},
database: {
 mysql: {
   host: '127.0.0.1',
   port: 3306,
   user: 'root',
   password: 'password',
   database: 'main'
 },
 postgres: {
   host: '127.0.0.1',
   port: 5432,
   user: 'postgres',
   password: 'password',
   database: 'main'
 },
 redis: {
   host: '127.0.0.1',
   port: 6379,
   db: 0,
   username: null,
   password: null,
   keyPrefix: '',
   sentinels: null,
   sentinelPassword: null,
   name: 'mymaster',
   clusterNodes: []
 }
},
databasePooling: { enabled: false, min: 0, max: 7 },
debug: true,
eventLimits: {
 maxChannelsAtOnce: 100,
 maxNameLength: 200,
 maxPayloadInKb: 100,
 maxBatchSize: 10
},
host: '192.168.0.102',
httpApi: { requestLimitInMb: 100, acceptTraffic: { memoryThreshold: 85 } },
instance: { process_id: 31230 },
metrics: {
 enabled: false,
 driver: 'prometheus',
 host: '0.0.0.0',
 prometheus: { prefix: 'soketi_' },
 port: 9601
},
mode: 'full',
port: 6002,
pathPrefix: '',
presence: { maxMembersPerChannel: 100, maxMemberSizeInKb: 2 },
queue: {
 driver: 'sync',
 redis: { concurrency: 1, redisOptions: {}, clusterMode: false },
 sqs: {
   region: 'us-east-1',
   endpoint: null,
   clientOptions: {},
   consumerOptions: {},
   queueUrl: '',
   processBatch: false,
   batchSize: 1,
   pollingWaitTimeMs: 0
 }
},
rateLimiter: { driver: 'local', redis: { redisOptions: {}, clusterMode: false } },
shutdownGracePeriod: 3000,
ssl: { certPath: '', keyPath: '', passphrase: '', caPath: '' },
userAuthenticationTimeout: 30000,
webhooks: { batching: { enabled: false, duration: 50 } }
}
📡 soketi initialization....
⚡ Initializing the HTTP API & Websockets Server...
⚡ Initializing the Websocket listeners and channels...
⚡ Initializing the HTTP webserver...
🕵️‍♂️ Initiating metrics endpoints...

🎉 Server is up and running!
📡 The Websockets server is available at 127.0.0.1:6002
🔗 The HTTP API server is available at http://127.0.0.1:6002
🎊 The /usage endpoint is available on port 9601.

(node:31230) NOTE: The AWS SDK for JavaScript (v2) is in maintenance mode.
SDK releases are limited to address critical bug fixes and security issues only.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the blog post at https://a.co/cUPnyil
(Use `node --trace-warnings ...` to show where the warning was created)
[Mon Nov 04 2024 22:01:40 GMT+0300 (East Africa Time)] Promoted from node to master.
{
isMaster: true,
isMasterEligible: true,
weight: -0.1730746900058,
address: '127.0.0.1',
advertisement: undefined
}

Flutter Code

import 'package:block101/http/app_store.dart';
import 'package:laravel_echo_null/laravel_echo_null.dart';
import 'package:pusher_client_socket/pusher_client_socket.dart' as PUSHER;


const String host ='192.168.0.102';
const int wsPort = 6002;
const String key = "app-key";
const String hostAuthEndPoint = "http://192.168.0.102/broadcasting/auth";

Echo<PUSHER.PusherClient, PusherChannel> echo = Echo.pusher(
  key,
  authEndPoint: hostAuthEndPoint, // String?: auth host
  authHeaders: { // authenticate headers
    'Authorization': 'Bearer ${AppStore.getAccessToken()}',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  // cluster: 'PUSHER_CLUSTER', // String?: pusher cluster
  host: host,
  wsPort: wsPort,
  wssPort: 443,
  encrypted: false,
  activityTimeout: 120000,
  pongTimeout: 30000,
  // maxReconnectionAttempts: 6,
  reconnectGap: const Duration(seconds: 2),
  enableLogging: true,
  autoConnect: false, // bool: client connection automatically
  nameSpace: 'App\\Events',
);

Flutter code that listen from the sever events

class PostsView extends StatefulWidget {
  const PostsView({super.key});

  @override
  State<PostsView> createState() => _PostsViewsState();
}

class _PostsViewsState extends State<PostsView> {
  void fetchPost() {
    final postCubit = context.read<PostCubit>();

    postCubit.fetchPosts();
  }

  @override
  void initState() {
    // fetchPost();

    Channel publicChannel = echo.channel('comments');
    publicChannel.listen('CommentCreated', (data){
      log('on log $data');
      print('on print $data');
    });

    super.initState();
  }

[AbdoPrDZ]

hi,
i try it with soketi server with laravel 11 its works for me

soketi-config.json:

{
  "appManager.array.apps.0.id": "683209",
  "appManager.array.apps.0.key": "bn7hwopydolie3rpqcvz",
  "appManager.array.apps.0.secret": "faal2pttghy3bntyxkld",
  "appManager.array.apps.0.enableClientMessages": true,
  "debug": true,
  "port": 6002
}

.env:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:FA21PRdtrEwL0d7/9dPHUUNKa99lPcO654x9mkNX6Vw=
APP_DEBUG=true
APP_TIMEZONE=UTC
APP_URL=http://localhost

APP_LOCALE=en
APP_FALLBACK_LOCALE=en
APP_FAKER_LOCALE=en_US

APP_MAINTENANCE_DRIVER=file
# APP_MAINTENANCE_STORE=database

PHP_CLI_SERVER_WORKERS=4

BCRYPT_ROUNDS=12

LOG_CHANNEL=stack
LOG_STACK=single
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

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

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

BROADCAST_CONNECTION=pusher
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync

CACHE_STORE=database
CACHE_PREFIX=

MEMCACHED_HOST=127.0.0.1

REDIS_CLIENT=phpredis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=log
MAIL_HOST=127.0.0.1
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

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

VITE_APP_NAME="${APP_NAME}"

PUSHER_APP_ID=683209
PUSHER_APP_KEY=bn7hwopydolie3rpqcvz
PUSHER_APP_SECRET=faal2pttghy3bntyxkld
PUSHER_HOST="localhost"
PUSHER_PORT=6002
PUSHER_SCHEME=http

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"

bootstrap/app.php

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Laravel\Sanctum\Http\Middleware\CheckAbilities;
use Laravel\Sanctum\Http\Middleware\CheckForAnyAbility;

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(
    __DIR__.'/../routes/channels.php',
    [
      'prefix' => 'api',
      'middleware' => ['auth:sanctum'],
    ],
  )
  ->withMiddleware(function (Middleware $middleware) {

    $middleware->alias([
      'abilities' => CheckAbilities::class,
      'ability' => CheckForAnyAbility::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
      //
  })->create();

routes/api.php

<?php

use App\Events\CommentCreated;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;

Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');

Route::post('/auth', function (Request $request) {
  $credentials = $request->only('username', 'password');

  $request->validate([
    'username' => 'required',
    'password' => 'required',
  ]);

  $user = User::where('username', $credentials['username'])->first();

  if (!$user) {
    User::create([
      'username' => $credentials['username'],
      'password' => bcrypt($credentials['password']),
    ]);
  }

  if (Auth::attempt($credentials)) {
    $token = $request->user()->createToken('auth_token')->plainTextToken;

    return response()->json([
      'token' => $token,
      'user_id' => $request->user()->id,
    ]);
  }

  return response()->json([
    'message' => 'Unauthorized',
  ], 401);
});

Route::post('/comments', function (Request $request) {
  $request->validate([
    'user_id' => 'required|integer',
    'comment' => 'required|string',
  ]);

  broadcast(new CommentCreated($request->user_id, $request->comment));

  return response()->json([
    'message' => 'Comment created',
  ]);
});

app/Events/CommentCreated.php

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class CommentCreated implements ShouldBroadcast
{
  use Dispatchable, InteractsWithSockets, SerializesModels;

  /**
   * Create a new event instance.
   */
  public function __construct(public int $user_id, public string $comment)
  {
    //
  }

  /**
   * Get the channels the event should broadcast on.
   *
   * @return array<int, \Illuminate\Broadcasting\Channel>
   */
  public function broadcastOn(): array
  {
    return [
      new PrivateChannel("App.Models.User.{$this->user_id}"),
    ];
  }

  /**
   * Get the data to broadcast.
   *
   * @return array<string, string>
   */
  public function broadcastWith(): array
  {
    return [
      'user_id' => $this->user_id,
      'comment' => $this->comment,
    ];
  }
}

main.dart

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:laravel_echo_null/laravel_echo_null.dart';
import 'package:pusher_client_socket/pusher_client_socket.dart' as PUSHER;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Echo<PUSHER.PusherClient, PusherChannel> echo;
  String? token;
  int? userId;

  bool loading = false;
  bool connected = false;

  void auth() async {
    loading = true;
    setState(() {});

    const String username = 'AbdoPrDZ';
    const String password = '12345678';

    final response = await post(
      Uri.parse('http://192.168.1.81:8000/api/auth'),
      body: {'username': username, 'password': password},
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      token = data['token'];
      userId = data['user_id'];
    }
    loading = false;
    setState(() {});
  }

  void connect() {
    const String host = '192.168.1.81';
    const int wsPort = 6002;
    const String key = "bn7hwopydolie3rpqcvz";
    const String hostAuthEndPoint =
        "http://192.168.1.81:8000/api/broadcasting/auth";

    echo = Echo.pusher(
      key,
      authEndPoint: hostAuthEndPoint,
      authHeaders: {
        'Authorization': 'Bearer $token',
        'Accept': 'application/json',
      },
      host: host,
      wsPort: wsPort,
      wssPort: 443,
      encrypted: false,
      activityTimeout: 120000,
      pongTimeout: 30000,
      maxReconnectionAttempts: 6,
      reconnectGap: const Duration(seconds: 2),
      enableLogging: true,
      autoConnect: false,
      nameSpace: 'App\\Events',
    );
    echo.connect();
    echo.connector.onConnect((data) {
      print('Connected');
      connected = true;
      setState(() {});
    });
    echo.private('App.Models.User.$userId').listen('CommentCreated', (event) {
      print('CommentCreated: $event');
    });
    echo.connector.onDisconnect((data) {
      print('Disconnected');
      connected = false;
      setState(() {});
    });
  }

  void disconnect() {
    echo.disconnect();
    connected = false;
    setState(() {});
  }

  void createComment() async {
    loading = true;
    setState(() {});

    await post(
      Uri.parse('http://192.168.1.81:8000/api/comments'),
      body: {
        'user_id': userId.toString(),
        'comment': 'Hello from Flutter ${DateTime.now().toIso8601String()}',
      },
      headers: {
        'Accept': 'application/json',
        'Authorization': 'Bearer $token',
      },
    );

    loading = false;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: loading
            ? const CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  if (token != null) ...[
                    ElevatedButton(
                      onPressed: connected ? disconnect : connect,
                      child: Text(
                        connected ? 'Disconnect' : 'Connect',
                        style: TextStyle(
                          color: connected ? Colors.green : Colors.red,
                        ),
                      ),
                    ),
                    if (connected)
                      ElevatedButton(
                        onPressed: createComment,
                        child: const Text('Create Comment'),
                      ),
                  ] else
                    ElevatedButton(
                      onPressed: auth,
                      child: const Text('Get Token'),
                    ),
                ],
              ),
      ),
    );
  }
}

app log:

[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: connection_error
[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: pusher:connection_established
[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: pusher:ping
[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: pusher:pong
[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: pusher:connection_established
[log] [PUSHER_CHANNEL_EVENT_BINDING]
        channel: event: disconnected
[log] [PUSHER_CONNECTION_STATE_CHANGED]
        the connection state changed from DISCONNECTED to CONNECTING
[log] [PUSHER_CONNECTION_STATE_CHANGED]
        the connection state changed from CONNECTING to CONNECTED
[log] [PUSHER_MESSAGE_RECEIVED]
        {"event":"pusher:connection_established","data":"{\"socket_id\":\"7348902904.3009868494\",\"activity_timeout\":30}"}
[log] [PUSHER_CONNECTION_ESTABLISHED]
        data: {socket_id: 7348902904.3009868494, activity_timeout: 30}
[log] [PUSHER_CHANNEL_SUBSCRIBE]
        channel: private-App.Models.User.1
I/flutter ( 8346): Connected
[log] [PUSHER_CHANNEL_AUTH_RESPONSE]
        channel: private-App.Models.User.1
        options: AuthOptions(endpoint: http://192.168.1.81:8000/api/broadcasting/auth, headers: {Authorization: Bearer 11|P8WtLK5n7oTVzFSbW9seuiJhqLQX5o7P6TkeunDpc9df30ba, Accept: application/json})
        payload: {channel_name: private-App.Models.User.1, socket_id: 7348902904.3009868494}
        response: {"auth":"bn7hwopydolie3rpqcvz:5d853f0918482eb09e2abee7e02b204c79d615989b767cd3afbe3dd9ec24adca"}
[log] [PUSHER_SEND_EVENT]
        event: pusher:subscribe
        data: {channel: private-App.Models.User.1, auth: bn7hwopydolie3rpqcvz:5d853f0918482eb09e2abee7e02b204c79d615989b767cd3afbe3dd9ec24adca, channel_data: null}
[log] [PUSHER_MESSAGE_RECEIVED]
        {"event":"pusher_internal:subscription_succeeded","channel":"private-App.Models.User.1"}
[log] [PUSHER_CHANNEL_EVENT]
        channel: private-App.Models.User.1
        event: pusher:subscription_succeeded
        data: null
[log] [PUSHER_CHANNEL_SUBSCRIPTION_SUCCESS]
        channel: private-App.Models.User.1
        data: null
I/flutter ( 8346): CommentCreated: {user_id: 1, comment: Hello from Flutter 2024-11-06T14:47:55.711549}
[log] [PUSHER_MESSAGE_RECEIVED]
        {"event":"App\\Events\\CommentCreated","channel":"private-App.Models.User.1","data":"{\"user_id\":1,\"comment\":\"Hello from Flutter 2024-11-06T14:47:55.711549\"}"}
[log] [PUSHER_CHANNEL_EVENT]
        channel: private-App.Models.User.1
        event: App\Events\CommentCreated
        data: {user_id: 1, comment: Hello from Flutter 2024-11-06T14:47:55.711549}

[mwangaben]

@AbdoPrDZ thanks for replying, have done has mentioned above but all have got is connected to the Server but no Events is capture when fire from other part of the app

Soketi configuration

{
  "debug": true,
  "port": 6002,
  "host": "192.168.0.100",
  "appManager.array.apps": [
    {
      "id": "app-id",
      "key": "app-key",
      "secret": "app-secret"
    }
  ]
}

Laravel .env pusher settings

PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=192.168.0.100
PUSHER_PORT=6002
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1

Dart .env.development

BASE_URL=http://192.168.0.100:8000
URI=/graphql
HOST=192.168.0.100
PORT=6002
WS_APP_KEY=app-key

Flutter config file

import 'package:block101/http/app_store.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:laravel_echo_null/laravel_echo_null.dart';
import 'package:pusher_client_socket/pusher_client_socket.dart' as PUSHER;


 String host = dotenv.env['HOST'] ?? 'no host assigned';
 int wsPort =  int.parse((dotenv.env['PORT']?? '6001'));
 String key = dotenv.env['WS_APP_KEY'] ?? 'app-key';
 String hostAuthEndPoint = "http://$host/broadcasting/auth";

Echo<PUSHER.PusherClient, PusherChannel> echo = Echo.pusher(
  key,
  authEndPoint: hostAuthEndPoint, // String?: auth host
  authHeaders: { // authenticate headers
    'Authorization': 'Bearer ${AppStore.getAccessToken()}',
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  },
  // cluster: 'PUSHER_CLUSTER', // String?: pusher cluster
  host: host,
  wsPort: wsPort,
  // wssPort: 443,
  encrypted: false,
  // activityTimeout: 120000,
  // pongTimeout: 30000,
  // maxReconnectionAttempts: 6,
  // reconnectGap: const Duration(seconds: 2),
  enableLogging: true,
  autoConnect: false, // bool: client connection automatically
  nameSpace: 'App\\Events',
);

on Post initState i am listening for the the event

   @override
  void initState() {


      echo.connect();
      echo.connector.onConnect((data) {
        print('connected Guys...............');
        print(data);
      });

      echo.channel('comments').listen("CommentCreated", (event){
          log('Message from the server $event');
      });


    super.initState();
  }

All i receive is connected part and listen comments part is not output antthing when comment is created.

[log] [PUSHER_CONNECTION_STATE_CHANGED]
  the connection state changed from null to RECONNECTING
[log] [PUSHER_CONNECTION_STATE_CHANGED]
  the connection state changed from RECONNECTING to RECONNECTED
I/flutter (31295): connected Guys...............
I/flutter (31295): {socket_id: 1742332130.3355519273, activity_timeout: 30}
[log] [PUSHER_MESSAGE_RECEIVED]
  {"event":"pusher:connection_established","data":"{\"socket_id\":\"1742332130.3355519273\",\"activity_timeout\":30}"}
[log] [PUSHER_CONNECTION_ESTABLISHED]
  data: {socket_id: 1742332130.3355519273, activity_timeout: 30}
    

PLEASE HELP WHAT IS THE MATTER HERE