Komunikacija u realnom vremenu uz Laravel emitiranje i reverb

Komunikacija u realnom vremenu, u web aplikacijama, odnosi se na mogućnost korisnika da razmjenjuju informacije trenutno ili sa minimalnim kašnjenjem.

Neki primjeri komunikacije u stvarnom vremenu su: razgovori uživo, suradnja u stvarnom vremenu, obavijesti i ažuriranja koja se javljaju bez ručnog osvježavanja stranice…

Tehnologije kao što su WebSockets, serverski poslani događaji (SSE) i dugo ispitivanje obično se koriste za omogućavanje komunikacije u realnom vremenu, omogućavajući web aplikacijama da isporuče interaktivna i dinamična iskustva korisnicima.

7 minute

Zamolili su vas da razvijete live chat za e-trgovinu, a vi ne znate koju tehnologiju da koristite. Neke od vaših kolega su vam pričale o nekim tehnologijama kao što su websockets, ali nemate pojma kako implementirati uslugu emitovanje.

Došli ste na pravo mjesto u pravo vrijeme: u nastavku ću vam, zapravo, dati sva potrebna uputstva kako biste iskoristili prednosti laravel emitiranje, e laravel reverb za upravljanje komunikacijom u realnom vremenu, a zatim implementirati live chat. Ne brinite, ovo nisu složene operacije, važno je imati jasne ideje kako sve organizirati i strukturirati: naučit ćete šta vam je potrebno za početak u toku ovog članka.

Dakle, šta mislite o poduzimanju mjera sada? Sjednite udobno, odvojite nekoliko minuta vremena za sebe i pročitajte sve što imam da vam kažem na laravel emitovanju e laravel reverb: Siguran sam da ćete na kraju vodiča biti savršeno sposobni da uradite odličan posao. Rekavši to, sve što mogu da uradim je da vam poželim srećno čitanje i dobar rad!

Laravel Reverb to je alat za komunikaciju u realnom vremenu za aplikacije Laravel. Dozvoljava veze WebSockets između klijenta i servera, omogućavajući ažuriranja i interakcije u realnom vremenu bez stalnog osvježavanja stranice. Reverb često se koristi u aplikacijama koje zahtijevaju ažuriranja u realnom vremenu ili mogućnosti razmjene trenutnih poruka, pružajući lak i efikasan način upravljanja razmjenom podataka u realnom vremenu.

Šta je Laravel Reverb

Laravel Reverb je koncept koji kombinuje Laravel, popularni PHP okvir poznat po svojoj elegantnoj sintaksi i moćnim karakteristikama, sa Reverb, WebSocket serverom dizajniranim za komunikaciju u realnom vremenu u web aplikacijama.

U ovom kontekstu, Reverb je WebSocket server prve strane izgrađen eksplicitno za Laravel aplikacije. Olakšava komunikaciju u realnom vremenu između klijenta (pretraživača) i serverske strane, omogućavajući funkcije kao što su ažuriranja uživo, razmjena trenutnih poruka, obavještenja i funkcije saradnje bez stalnog osvježavanja stranice.

Integracijom Laravela sa Reverbom, programeri mogu kreirati interaktivne i responzivne web aplikacije koje korisnicima pružaju glatko i dinamično iskustvo.

Ključne karakteristike Laravel Reverb

· Ažuriranja u realnom vremenu: Trenutačno ažurirajte sučelje klijenta novim podacima bez ponovnog učitavanja stranice.

· Live Chat: Omogućava razmenu poruka u realnom vremenu i komunikaciju između korisnika.

· Obaveštenja: Pošaljite push obaveštenja korisnicima u realnom vremenu radi pravovremenih ažuriranja.

· Zajedničko uređivanje: Olakšava simultano uređivanje zajedničkih dokumenata ili projekata.

· Skalabilnost: Efikasno obrađuje veliki broj istovremenih veza.

· Prilagođavanje: Sposobnost prilagođavanja funkcionalnosti u realnom vremenu specifičnim potrebama aplikacije.

Glavne prednosti korištenja Laravel Reverb

Laravel Reverb je menjač igre za programere koji žele da kreiraju dinamične web aplikacije koje reaguju sa komunikacijskim mogućnostima u realnom vremenu. Evo nekih od glavnih prednosti koje nudi Laravel Reverb:

Brze performanse: Doživite izuzetnu brzinu uz optimizovanu arhitekturu Laravel Reverb, koja osigurava nesmetan protok podataka i korisnički interfejs koji reaguje čak i pod velikim opterećenjem.

Integracija bez napora: Besprekorno integriše Laravel Reverb sa Laravelovim mogućnostima emitovanja, bez napora postavljajući i koristeći Laravel Forge da pojednostavi pretplate na kanale i upravljanje događajima.

Pojednostavljena skalabilnost: Skalirajte svoju aplikaciju bez napora uz Laravel Reverb ugrađenu podršku za horizontalno skaliranje, efikasno upravljanje vezama i kanalima na više servera kako biste zadovoljili rastuće zahtjeve prometa.

Kompatibilnost sa Pusher protokolom: koristi snagu Laravel Pusher protokola za WebSockets sa Laravel Reverb, neprimetno se integrišući sa Laravel Broadcasting i Echo za brzu i efikasnu implementaciju komunikacije u realnom vremenu.

Majstorstvo praćenja: Koristi Pulseovu ugrađenu podršku u Laravel Reverb za praćenje u realnom vremenu, osiguravajući nesmetan rad i zdravlje sistema za besprijekorno korisničko iskustvo.

Laravel instalacija emitiranja

Ako trebate dodati kapacitet prijenosa svom novom projektu, onda to treba učiniti ovako. Ako radite na postojećem projektu, pokrenite sljedeće naredbe:

composer install
php artisan broadcast:install

Ova naredba kreira potrebne konfiguracije i potrebne datoteke:

Ako pogledate u folder resources/js, naći ćete novo generiranu datoteku echo.js, koji upravlja vezama WebSockets.

Konfiguracijski fajlovi Laravel Broadcasting: config/broadcasting.php

reverb konfiguracijski fajl : config/reverb.php

Konfigurirajte upravljački program za emitiranje

Za konfiguraciju drajvera Brodcast morate podesiti parametre u datoteci .env di Laravel, tako da je vozač broadcast budi na Reverb. Dakle, evo primjera:

BROADCAST_DRIVER=reverb
REVERB_APP_ID=your_app_id
REVERB_APP_KEY=your_app_key
REVERB_APP_SECRET=your_app_secret
REVERB_HOST="yourhost.test"
REVERB_PORT=8080
REVERB_SCHEME=https

VITE_REVERB_APP_KEY="${REVERB_APP_KEY}"
VITE_REVERB_HOST="${REVERB_HOST}"
VITE_REVERB_PORT="${REVERB_PORT}"
VITE_REVERB_SCHEME="${REVERB_SCHEME}"

Definirajte kanale emitiranja

Prije kreiranja događaja potrebno je definirati kanale na kojima će se događaji emitovati. Da bismo to uradili moramo da otvorimo fajl routes/channels.php i dodajte definicije kanala koje želimo koristiti. Kanali mogu biti privatni i javni:

• primjer privatnog kanala:

Broadcast::channel('App.User.{id}', function ($user, $id) {
    return $user->id === $id;
});

• primjer javnog kanala:

Ako želite emitirati na javnom kanalu, jednostavno definirajte javnu rutu bez ikakvih provjera autentičnosti:

Broadcast::channel('public-updates', function () {
    return true;
});

Kreirajte klasu Event

Da biste slali poruke u realnom vremenu, potrebno je da definišete događaj koji će biti emitovan. Da biste to uradili, morate pokrenuti sljedeću naredbu artisan:

php artisan make:event UserEvent

Razred UserEvent generisan, implementira interfejs ShouldBroadcast i dodajte uvoze potrebne za emitiranje događaja. Evo primjera implementacije:

primjer privatnog kanala

namespace App\Events;

use App\Models\User;
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 UserEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(public $downloadURL, public User $user)
    {
        //
    }

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

    public function broadcastWith(): array
    {
        return array(
            'username' => __('app.welcome_message', ['username' => $this->user->name]),
            'message' => __('events.download_hawb_ready'),
        );
    }

    public function broadcastAs(): string
    {
        return 'user.notification';
    }

}

Primjer javnog kanala:

namespace App\Events;

use App\Models\User;
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 UserEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(public $downloadURL)
    {
        //
    }

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

    public function broadcastWith(): array
    {
        return array(
            'message' => __('events.download_hawb_ready'),
        );
    }

    public function broadcastAs(): string
    {
        return 'public.notification';
    }

}

Događaji aktivacije

Za emitovanje događaja koristite broadcast()pomoćnik u vašem kontroleru. Evo kako se možete prijaviti UserEvent:

use App\Events\UserEvent;

 broadcast(new UserEvent($data));

Postavite slušanje na frontendu

Sada morate slušati događaje koji se emituju na frontendu. Možete koristiti Laravel Echo con Reverb WebSocket da to uradim. Otvorite datoteku resources/js/echo.js i dodajte sljedeće slušalac:

window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

document.addEventListener('DOMContentLoaded', function () {
    const userID = window.userID;

    window.Echo.private(`App.User.${userID}`)
        .listen('.user.notification', (response) => {
            console.log("Event received:", response);
            showNotification(response);
        });
});

Popunite Imovina

Nakon postavljanja vašeg događaja slušalac, morate kompajlirati frontend resurse kako biste bili sigurni da su promjene primijenjene. Pokrenite sljedeću naredbu:

npm run dev

Ova komanda vam omogućava da kompajlirate sredstva, tj. fajlove JavaScript, uključujući i Slušaoci odjeka.

Pokrenite slušalac čekanja

Il laravel emitiranje radi asinhrono, tako da morate pokrenuti queue listener za obradu događaja u redu čekanja. Za početak red morate pokrenuti naredbu:

php artisan queue:listen

Ova komanda pokreće obradu događaja u realnom vremenu i osigurava ispravan rad prijenosa.

Provjera konfiguracije kanala

Kako biste bili sigurni da su vaši kanali ispravno postavljeni, provjerite svoju konfiguraciju routes/channels.php. Također, pokrenite sljedeću naredbu da izlistate sve registrovane kanale:

php artisan channel:list

Ova komanda će prikazati sve emitovane kanale konfigurisane u vašoj aplikaciji.

Pokrenite reverb laravel

Zatim morate pokrenuti server Reverb WebSocket. Pokrenite sljedeću naredbu, pazeći da postavite parametar --hostname pisanje vaše domene ili lokalnog okruženja:

php artisan reverb:start --host="0.0.0.0" --port=8080 --hostname="yourhost.test" --debug

Ovo pokreće Reverb server na navedenom portu.

Konfiguriranje usmjeravanja aplikacija

Uvjerite se da je usmjeravanje vaše aplikacije ispravno konfigurirano da uključuje emitirane kanale. Rute možete konfigurirati na sljedeći način:

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__ . '/../routes/web.php',
        commands: __DIR__ . '/../routes/console.php',
        channels: __DIR__ . '/../routes/channels.php',
        health: '/up',
    );

Prateći ove korake, možete uspješno postaviti emitiranje sa Reverb in Laravel 11. Kada sve bude ispravno podešeno, moći ćete da emitujete poruke u realnom vremenu, obezbeđujući besprekorna ažuriranja u vašoj aplikaciji. Ne zaboravite provjeriti svoju konfiguraciju i koristiti naredbu php artisan channel:list da provjerite konfiguraciju kanala.