DEV Community: Nikola Domazetovikj

Laravel Reverb - Bidirectional Communication

Nikola Domazetovikj — Sun, 31 Mar 2024 15:07:57 +0000

Hello fellow artisans! Today, I'm excited to share with you how to use Laravel Reverb as a WebSocket server for two-way communication between the server and the client.

In many tutorials and blogs I've come across, they only cover server-to-client communication. For instance, in a real-time chat app, the client sends a message to the server through an API request, and then the server distributes it to other clients. But this approach isn't ideal because it involves numerous API calls for each message, which can become inefficient as the volume of messages grows.

What is Reverb?

Reverb is a first-party WebSocket server for Laravel applications, bringing real-time communication between client and server directly to your fingertips. Open source and an Artisan command away.
Check Documentation

Setup Reverb

If you are using Laravel 11, first you will need to install Broadcasting:

php artisan install:broadcasting

This command will set Reverb as your default broadcaster.

If you are still on Laravel 10, you will need some additional steps to setup Reverb:

composer require laravel/reverb:@beta 

php artisan reverb:install

Next, you need to enable broadcasting:

In your config/app.php uncomment the BrodacastServiceProvider

 'providers' => ServiceProvider::defaultProviders()->merge([
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class, 
    ])->toArray(),

How to send message from the client to the server

First register an event that will broadcast the message:

<?php

namespace App\Events;

use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Log;

class SendMessage implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public readonly array $data; // this will depend based on your logic

    /**
     * Create a new event instance.
     */
    public function __construct(array $data)
    {
        $this->data = $data;

    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): PrivateChannel|array
    {
        return new PrivateChannel('channel.name');

    }
}

Laravel Reverb uses own event called MessageReceived which receives an event directly in Laravel application. To listen received events you need to register own listener.

For e.g.

<?php

namespace App\Listeners;

use App\Events\SendMessage;
use Laravel\Reverb\Events\MessageReceived;

class BroadcastMessage
{
    /**
     * Create the event listener.
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     */
    public function handle(MessageReceived $event): void
    {
        $message = json_decode($event->message);

        $data = $message->data;

        if ($message->event === 'SendMessage') {

            // your logic goes here...

            $data = json_decode($data);

            $data = $data->messageData;

            broadcast(new SendMessage($data))->toOthers();

        }

    }
}

Do not forget to register your listener:

Laravel 10

In your EventServiceProvider:

<?php

namespace App\Providers;

use App\Listeners\BroadcastMessage;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
use Illuminate\Support\Facades\Event;
use Laravel\Reverb\Events\MessageReceived;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event to listener mappings for the application.
     *
     * @var array<class-string, array<int, class-string>>
     */
    protected $listen = [

    ];

    /**
     * Register any events for your application.
     */
    public function boot(): void
    {
        Event::listen(
            MessageReceived::class,
            BroadcastMessage::class
        );
    }

    /**
     * Determine if events and listeners should be automatically discovered.
     */
    public function shouldDiscoverEvents(): bool
    {
        return false;
    }
}

In Laravel 11:

In your AppServiceProvider class:

use App\Listeners\BroadcastMessage;
use Laravel\Reverb\Events\MessageReceived;
use Illuminate\Support\Facades\Event;

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
     Event::listen(
            MessageReceived::class,
            BroadcastMessage::class
        );
}

For more detail check the Documentation

Send from Client to Server

Finally how can we send a message to the server. In my example I am using Laravel Echo package which uses Pusher protocols.

Echo.connector.pusher.send_event('SendMessage',
                JSON.stringify({ messageData }), 'channel.name');

Note that this is just a quick start on how you can set up bidirectional communication for your Laravel application. Based on your logic and your needs you will need to check the official Laravel documentation.

Resources:

https://laravel.com/docs/11.x/reverb
https://laravel.com/docs/11.x/broadcasting
https://laravel.com/docs/11.x/broadcasting#broadcasting-events
Joe Dixon - LaraconEU Talk

Laravel Roadmap

Nikola Domazetovikj — Fri, 08 Mar 2024 01:32:30 +0000

In this blog post, I'm excited to share the learning journey that helped me master Laravel. I'll walk you through the resources I found most helpful and the strategies I used to become a proficient Laravel developer. Whether you're just starting out or looking to enhance your skills, this guide will provide valuable insights to steer you in the right direction.

Start Point

Your very first starting point should be the Laravel documentation. Known for its clear explanations and user-friendly layout, the Laravel documentation makes setup a breeze, ensuring you get off to the best possible start.

What Should I check first?

When starting your journey with Laravel, many developers will advise you to begin by exploring routes, and they're absolutely right. Routes are the entry points of your application, defining the URLs and corresponding controller actions. The homepage route, in particular, is the first thing you'll encounter when navigating your Laravel project. It serves as the gateway to your application, setting the stage for further exploration and development. Understanding routes is fundamental to mastering Laravel, so take the time to familiarize yourself with them early on.

Understand MVC

Before you start coding, it's important to understand MVC. In MVC, "M" stands for Model. Models are like connectors to databases, managing data and how it's handled. "C" stands for Controller. Controllers are like messengers between Models and Views. They handle user requests and make sure the Views show the right information. Finally, "V" stands for View. Views are what users see on their screens. They're like the face of the application. By using MVC, we can organize our code better, making it easier to manage and update.

Roadmap

Here, I'll share helpful links and resources to guide you through your developer journey. I've divided them into three roadmaps: for beginners, junior to middle-level developers, and middle-level developers. These resources will make your learning experience smoother and more structured, regardless of your current skill level.

Beginner

Topic	Resources
Routes	Routing
	Named Routes
Controllers	Controller
Views	Views
	Blade
Migrations	Migrations
Database	Setup
	Queries
	Query Builder
Model	Eloquent
	Retrieving Model
	Relationships

Junior to Middle

Topic	Resources
Routes	Route Biding
Middleware	Middlewares
Session	Sessions
Database	Advanced Queries
	Polymorphic Relationships
Authentication	Auth
	Authorization
	Request Validation
	Hashing
API	Routes

Middle

Topic	Resources
Routes	Route Caching
	Rate Limit
Sanctum	Sanctum
Database	Observers
	Mutators
	Redis
	Resources
Notifications	Mail
	Notifications
Jobs	Queues
Channels	Broadcasting
Commands	Custom Commands
API	Laravel Passport
Controllers	Dependency Injection

In summary, this roadmap highlights the essential elements necessary for navigating Laravel effectively. Mastering it requires dedication and persistence as you invest time and effort into the learning process.

Useful Resources

To stay updated on the latest developments and continue learning, I suggest utilizing the following resources:
Laravel News
Laracast
Code with Gio
Laravel Daily
Taylor Otwell Twitter Page
Nuno Maduro Twitter Page
Laravel Package Ocean
Spatie

Laravel - Setup Expo Push Notifications

Nikola Domazetovikj — Mon, 29 Jan 2024 20:31:13 +0000

Hey there, fellow developers! Today, I'll guide you through each step on how to make your Laravel app send Expo push notifications. I'll break it down into simple, easy-to-understand explanations. Let's make your app shout out with Expo push notifications!

In this example I will use the following package:
https://github.com/Alymosul/laravel-exponent-push-notifications

Before we begin, make sure you've got Laravel installed and know a bit about notifications in Laravel. Also, have a working React or React Native app ready to roll.

Install package:

composer require alymosul/laravel-exponent-push-notifications

In your .env file add this variables:

EXPONENT_PUSH_NOTIFICATION_INTERESTS_STORAGE_DRIVER=database
EXPONENT_PUSH_NOTIFICATION_DEBUG=true

Next, step is to publish the migration files:

php artisan vendor:publish --provider="NotificationChannels\ExpoPushNotifications\ExpoPushNotificationsServiceProvider" --tag="migrations"

Run the migrations:

php artisan migrate

This step is optional, you may use it if you want to customize the configuration

php artisan vendor:publish --provider="NotificationChannels\ExpoPushNotifications\ExpoPushNotificationsServiceProvider" --tag="config"

Add following lines in your routes/api.php file:

Route::group(['prefix' => 'api/exponent/devices', 'middleware' => 'expo.middleware'], function () {
    Route::post('subscribe', [
        'as'    =>  'register-interest',
        'uses'  =>  'NotificationChannels\ExpoPushNotifications\Http\ExpoController@subscribe',
    ]);

    Route::post('unsubscribe', [
        'as'    =>  'remove-interest',
        'uses'  =>  'NotificationChannels\ExpoPushNotifications\Http\ExpoController@unsubscribe',
    ]);
});

Feel free to change things up as per your requirements

Create notification class:

php artisan make:notification ExpoNotification

In your notification class you will need to add following lines of code:

 public function via($notifiable)
    {
        return [ExpoChannel::class];
    }

    public function toExpoPush($notifiable)
    {
        return ExpoMessage::create()
            ->badge(1)
            ->enableSound()
            ->title("Congratulations!")
            ->body("Your {$notifiable->service} account was approved!");
    }

In order to send notification:

$user->notify(new ExpoNotification());

Just a heads up – feel free to change any initial files as you see fit. The migration files set up a new table with two columns: key and value. When a user logs into the app, you'll need to use the subscribe API with the expo_token in the body. And when a user logs out, just use the unsubscribe API. Keep it simple and make it work for you!

{
    "expo_token" : "the value of your token"
}

This article shows you how to integrate Expo push notifications into your Laravel app. I hope you find this guide helpful! 🚀📲