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?
