Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 12, 2022 09:10 pm GMT

Flutter Pusher with Laravel WebSockets

Hey everyone,
Today I'm going to demonstrate achieving WebSocket Communication between Laravel web application and Flutter mobile application using our own WebSocket Server.

This article shall be divided as following:

  1. Laravel & Web Socket Server Configuration
  2. Flutter Configuration

let's get start ..

1.Laravel Setup

Fresh Laravel Installation

Their is different ways to install Laravel, one is using Composer as following:

composer update --prefer-distcomposer create-project laravel/laravel LaraIo --prefer-dist

After being satisfied with your fresh installation, we shall go to next step.

Installing Laravel-WebSockets 

composer require beyondcode/laravel-websockets
php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="migrations"

Now it's time to migrate some tables related to WebSockets that holds the Statistical data over your server

php artisan migrate

Then, Publishing Configuration file

php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"

Here we will get configuration file under /config/websockets.php which holds configurations of the hole WebSocket Server.

For Now, we will not change any thing in this websockets.php file. On the other hand we shall update our configuration in the .env file.

Pusher Replacement

As mentioned on the official web site of LaravelWebSockets that The easiest way to get started with Laravel WebSockets is by using it as a Pusher replacement.
Then we need to install the official Pusher PHP SDK Package.

composer require pusher/pusher-php-server "~3.0"

now it's time to do configuration thing :

  • Head to config/broadcasting.php and update the file as following:
'connections' => [        'pusher' => [            'driver' => 'pusher',            'key' => env('PUSHER_APP_KEY'),            'secret' => env('PUSHER_APP_SECRET'),            'app_id' => env('PUSHER_APP_ID'),            'options' => [                'cluster' => env('PUSHER_APP_CLUSTER'),//                'useTLS' => true, comment it                'host'  => '127.0.0.1', // for localhost installation                'port'  => 6001, // standard port                'scheme'    => 'http',            ],        ],
  • Make sure to apply this configurations .env
BROADCAST_DRIVER=pusherPUSHER_APP_ID="AnyPusherID"PUSHER_APP_KEY="AnyPusherKey"PUSHER_APP_SECRET="AnyPusherSecret"PUSHER_APP_CLUSTER="mt1"

Now It's Time to Test Our WebSocket Server

We will need to create an event, let us call it TestEvent

php artisan make:event TestEvent

This will generate file looks like this

<?phpnamespace 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 TestEvent{    use Dispatchable, InteractsWithSockets, SerializesModels;    /**     * Get the channels the event should broadcast on.     *     * @return \Illuminate\Broadcasting\Channel|array     */    public function broadcastOn()    {        return new Channel('channle');    }}

Lets do some changes

<?phpnamespace 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 TestEvent {+ class TestEvent implements ShouldBroadcast {    use Dispatchable, InteractsWithSockets, SerializesModels;+ +    public $message = '';+    /**+     * Create a new event instance.+     *+     * @return void+     */+    public function __construct($message)+    {+        $this->message = $message;+    }    /**     * Get the channels the event should broadcast on.     *     * @return \Illuminate\Broadcasting\Channel|array     */    public function broadcastOn()    {-        return new Channel('channle');+        return ['test-channel'];    }+ +    public function broadcastAs(){+        return 'test-event';+    }}

Note That WebSocket Server come with monitoring web page that give us live updates about what is currently happening.
We can Access this page Through
LaraIO.test/laravel-websockets
That looks like this:

Laravel WebSockets Dashboard

You only have to Press Connect button to start listening for updates

Now We need to fire our TestEvent by using Laravel Tinker

php artisan tinker
event(new \App\Events\TestEvent("Hello World"));

Verify that the event triggered by checking WebSocket Dashboard.
Now It's Time to move on to then next Section of our Article.

2.Flutter Configurations

Installing Packages

heading to your flutter application opening pubspec.yaml file and add the following dependency

dependencies:  flutter:    sdk: flutter  laravel_flutter_pusher: ^0.0.4

Then do Pub get Command to install it. And you can access the Official Page on pub.dev Here

Writing Some Code

Inside the Lib folder create services/PusherWebSockets/pusher.dart file with the following code:

import 'package:laravel_flutter_pusher/laravel_flutter_pusher.dart';class PusherService {    /// Init Pusher Listener  LaravelFlutterPusher initPusher(String appKey, String host, int port, String cluster) {    return LaravelFlutterPusher(        appKey,        PusherOptions(            host: host,            port: port,            encrypted: false,            cluster: cluster        ),        enableLogging: true,        onConnectionStateChange: (status){ print(status); }    );  }  /// Subscribe to Channel & Event  void listen(LaravelFlutterPusher pusher, String channel, String event){    pusher.subscribe(channel).bind(event, (event) {      print("SocketID: ");      print(pusher.getSocketId());      print(event);    });  }}

Then we could use This Service Class as following

/// Init Pusher ListenerLaravelFlutterPusher pusher = pusherService.initPusher("AnyPusherKey", "10.0.2.2", 6001, "mt1");/// Subscribe to ChannelpusherService.listen(pusher, "test-channel", "test-event");

If we fire the TestEvent again using Tinker, We will get console log in android studio as following

I/flutter (10748): SocketID: I/flutter (10748): 106601092.70854279I/flutter (10748): {message: Hello World"}

So far so GOOD.
I hope you enjoy it.
Good Luck


Original Link: https://dev.to/aeromohamed/flutter-pusher-with-laravel-websockets-4a1d

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To