Laravel Websockets: Egy átfogó útmutató valós idejű webalkalmazásokhoz

A mai világban egyre fontosabbá válik a valós idejű kommunikáció a webalkalmazásokban. A felhasználók elvárják, hogy az frissítések és értesítések azonnal megjelenjenek, anélkül, hogy frissíteniük kellene az oldalt. Ez, amikor a Laravel Websockets bejön a képbe. A Laravel Websockets egy olyan csomag, amely lehetővé teszi a fejlesztők számára, hogy könnyen valós idejű alkalmazásokat hozzanak létre a Laravel segítségével.

Ebben a bejegyzésben feltárjuk, hogy mi a Laravel Websockets, hogyan működik és néhány kulcsfontosságú jellemzője.

Hogyan találjuk meg a megfelelő websocket hátteret a Laravel számára

Ha megfelelő WebSocket háttérrendszert szeretne találni a Laravel számára, először áttekintést kell kapnia arról, hogy mely megoldások felelnek meg a célnak.
Mivel több megoldás is elérhető, először a leggyakrabban használtakat értékeltük, mielőtt valamelyiket választanánk. Tekintse meg az alábbi listát, hogy megtalálja az egyes lehetséges megvalósítások előnyeit és hátrányait.

Név	Technológia	Licensz	Aktualitás	Skálázhatóság	Protokoll
Laravel Echo Server	NodeJS	MIT	medium	high	socket.io
Laravel Websockets	PHP	MIT	high	ok, v2-beta	pusher
Soketi	C, NodeJS	MIT	medium	top	pusher
Pusher.com	Saas	commercial	high	top	pusher
Ably	Saas	commercial	high	top	pusher

Laravel Echo szerver

A Laravel Echo Server a NodeJS-en és a népszerű websocket.io könyvtáron alapul. Ez volt az első ajánlott Websocket szerver implementáció a Laravel számára. A "laravel-echo-server" a NodeJS-től elvárható módon nagyon gyorsan és stabilan fut. A projektet azonban jelenleg csak egy maroknyi önkéntes tartja karban, aminek következtében az idő múlásával felhalmozódik néhány probléma.

Például a Laravel Echo Server legutóbbi verziója (1.6.2, a cikk írásakor), amely 2020 májusában jelent meg, nem működik a legújabb Socket.io klienskönyvtárakkal, és nem tartalmaz biztonsági és stabilitási javításokat. Egy kis plusz pont: a skálázhatóság a Redis segítségével általában támogatott. A Laravel Echo Server jövőbeli fejlesztése azonban bizonytalannak tűnik.

Soketi

A nyílt forráskódú Websocket háttérrendszer soketi még viszonylag új a piacon. A gyors μWebSockets háttérrendszerre épül, amely az eredeti C könyvtár NodeJS portja. A Soketi a Pusher-Protocolt valósítja meg, amelyet a Laravel teljesen támogat. A Websocket szerver modern felépítése mellett Docker konténerben is optimálisan üzemeltethető és skálázható. A soketi szerver figyelése Prometheusszal és számos adatbázis-háttérrel szintén támogatott.

Mi az a Laravel Websockets csomag?

A Githubon több mint 4.000 csillaggal rendelkező Laravel Websockets jelenleg a legnépszerűbb Websocket megoldás a Laravel számára – és ez teljesen jogos. Ideális azoknak a fejlesztőknek, akik először dolgoznak a WebSockets szolgáltatással, vagy azoknak, akik gyorsan szeretnék üzembe helyezni. A Laravel Wessockets az egyetlen elérhető megoldás, amely natívan PHP-n fut, és ezért közvetlenül a Laravel alkalmazás mellett ülhet.

A Laravel Websockets egy olyan csomag, amely egyszerű és hatékony megoldást nyújt a valós idejű alkalmazások létrehozásához a Laravel segítségével. Lehetővé teszi a fejlesztők számára, hogy könnyedén beállítsanak egy Websocket szervert, és használják azt valós idejű kommunikáció kezelésére a kliensek és a szerverek között.A rendkívül stabil és erőforrás-takarékos szerver, a népszerű PHP React könyvtáron alapul, továbbá egy praktikus hibakereső irányítópultot is tartalmaz. Az irányítópult lehetővé teszi bármely esemény gyors tesztelését és hibakeresését.

Mi lehet a gond ? A Laravel Websockets jelenleg stabil, `1.x` és `2.x` béta verzióban érhető el. A "2.x" verzió egy teljes újraírás, amely lehetőséget kínál a Websocket szerver skálázhatóságára. Annál inkább sajnálatos, hogy a `2.x` verzió eddig csak béta verzióban volt elérhető.

Hogyan működik?

A Laravel Websockets a kliens és a szerver között egy tartós kapcsolatot hoz létre. Ez a kapcsolat a Websocket protokoll segítségével jön létre, amely lehetővé teszi a kliens és a szerver közötti kétirányú kommunikációt.

Miután a kapcsolatot létrehozták, a szerver üzeneteket küldhet a kliensnek, és fordítva is. Ezeket az üzeneteket valós idejű frissítésre, értesítések küldésére és sok más dologra is lehet használni.

A Laravel Websockets Redis-t használ pub/sub üzenetközvetítőként, hogy lehetővé tegye a több szerver közötti kommunikációt. Ez azt jelenti, hogy ha több szerver futtatja az alkalmazását, azok minden Redis-t használva kommunikálhatnak egymással.

A Laravel WebSockets főbb jellemzői

Egyszerű beállítás: A Laravel WebSockets használata rendkívül egyszerű és gyors. A csomagot telepíthetjük Composer segítségével, majd a konfigurációs fájlban megadhatjuk a beállításokat.

Redis integráció: A Laravel WebSockets Redis-t használ pub/sub üzenetközvetítőként, hogy lehetővé tegye a több szerver közötti kommunikációt. Ez azt jelenti, hogy ha több szerver futtatja az alkalmazását, azok minden Redis-t használva kommunikálhatnak egymással.

Beépített jelenlétkezelés: A Laravel WebSockets-ben beépített jelenlétkezelő rendszer található, amely lehetővé teszi a felhasználók jelenlétét és az aktív csatornákat követni. Ez különösen hasznos lehet olyan alkalmazásokban, amelyek valós idejű csevegést és közösségi funkciókat tartalmaznak.

Csatornakezelés: A Laravel WebSockets lehetővé teszi a különböző csatornák létrehozását a kliensek és a szerverek közötti kommunikációhoz. A csatornák a Redis pub/sub rendszerén alapulnak, és lehetővé teszik a valós idejű adatok küldését és fogadását.

Telepítés néhány lépésben

A Laravel WebSockets és a Pusher SDK az 5.0-s verzióban egyszerűen telepíthető a megfelelő Laravel projektbe a következő parancsokkal:

composer require beyondcode/laravel-websockets "^2.0"
composer require pusher/pusher-php-server "^5.0"

A Laravel Websockets 2.0-s verziójának telepítése előtt állunk, mert a Redis-t szeretnénk használni háttérként és a Websocket szerver vízszintes méretezhetőségére.

Most fel kell készítenünk a DB migrációkat a megfelelő működésre a következő paranccsal:

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

php artisan migrate

A háttérben a Laravel adatbázisban készülnek el a Websocket szerver hibakeresési irányítópultjához szükséges táblák. Most a `config/websockets.php` fájlban lévő Websocket szerver konfigurálása:

// config/websockets.php

return [
    // ...

    'apps' => [
        [
            'id' => env('PUSHER_ID', 'test'),
            'name' => env('APP_NAME', 'test'),
            'host' => env('PUSHER_HOST', 'test.test'),
            'key' => env('PUSHER_KEY', 'test'),
            'secret' => env('PUSHER_SECRET'),
            'path' => env('PUSHER_PATH'),
            'capacity' => null,
            'enable_client_messages' => false,
            'enable_statistics' => true,
            'allowed_origins' => [
                env('LARAVEL_WEBSOCKETS_DOMAIN'),
            ],
        ],
    ],

    'replication' => [
        'mode' => env('WEBSOCKETS_REPLICATION_MODE', 'redis'),
        'modes' => [
            // ...

            'redis' => [
                'connection' => env('WEBSOCKETS_REDIS_REPLICATION_CONNECTION', 'websocket'),
                'channel_manager' => App\Service\WebSockets\RedisChannelManager::class,

            // ...
        ],

    // ...
];

A WebSocket szerver sikeres konfigurációjához a PUSHER_ID, PUSHER_HOST, PUSHER_KEY és PUSHER_SECRET környezeti változókat megfelelően kell használni. Ha azt tervezi, hogy a WebSocket Servert egy külön szerveren futtatja, a LARAVEL_WEBSOCKETS_DOMAIN környezeti változó elengedhetetlen a CORS (Cross-Origin-Resource-Sharing) problémák elkerülése érdekében.

Példa változók az .env-ben:

BROADCAST_DRIVER=pusher
WEBSOCKETS_REPLICATION_MODE=redis
PUSHER_ID=app
PUSHER_HOST=app.test
PUSHER_SCHEME=http
PUSHER_KEY=app
PUSHER_SECRET=80f5dd30-c24e-4088-87ae-d57d0059f109

php artisan websockets:serve

Event-Broadcasting beállítása

A WebSocket szerver üzembe helyezése után felvetődik a kérdés, hogy a Laravel alkalmazás a szerveroldali Laravel alkalmazásból adatokat – úgynevezett broadcast eseményeket – küldjön a kliensnek a WebSocketen keresztül.

Azonban, mint korábban említettük, ez a beállítás gyerekjáték, mivel a Laravel Framework beépített támogatással érkezik a push szerverrel történő kommunikációhoz.

Ezután a korábban telepített Laravel Websockets szervert a `config/broadcasting.php` fájlban konfiguráljuk.

// config/broadcasting.php

return [
    // ...

    'default' => env('BROADCAST_DRIVER', 'pusher'),

    'connections' => [
        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_KEY'),
            'secret' => env('PUSHER_SECRET'),
            'app_id' => env('PUSHER_ID'),
            'options' => [
                'host' => env('PUSHER_PUSH_HOST', 'api'),
                'port' => env('PUSHER_PUSH_PORT', 6001),
                'scheme' => env('PUSHER_PUSH_SCHEME', 'http'),
                'encrypted' => true,
            ],
        ],

        // ...
    ],

    // ...
];

Győződjön meg arról, hogy a konfigurált pusher megegyezik a "config/websocket.php" fájlban beállított értékkel, mivel az alkalmazásnak ugyanazzal a névvel kell kommunikálnia a pusher szerverrel. Például egy Docker-alapú beállításnál itt választanánk ki a Docker-tároló nevét.

Egyébként, ahogy az a Laravelnél lenni szokott, minden változót az .env fájlban kell definiálni, nem pedig a konfigurációs fájlba írni. Az env parancs ábrázolt második paraméterei csak akkor alapértelmezett értékek, ha a megfelelő környezeti változó nincs megadva.

Az alkalmazásazonosítónak meg kell egyeznie a pusher kliensben később használt alkalmazásazonosítóval.

Aktiválnunk kell a broadcast szolgáltatót a Laravel projektben. Ezt úgy tehetjük meg, hogy hozzáadjuk BroadcastServiceProvidert a `config/app.php`-hoz:

// config/app.php

return [
    // ...

    'providers' => [
        //...

        // Enable default broadcast service provider
        App\Providers\BroadcastServiceProvider::class,

        // ...
    ],

    // ...
];

Események küldése

Most, hogy a broadcastot és a Websocket szervert beállítottuk a Laravelben, megkezdhetjük az első események küldését az alkalmazásból. Szerencsére ez bonyolultabbnak hangzik, mint amilyen.

Esemény létrehozása a ShouldBroadcast segítségével

Ahhoz, hogy egy eseményt Websocketen keresztül közvetítsünk az ügyfélnek, csak az Event osztályainkat kell kibővítenünk a Laravel által biztosított ShouldBroadcast osztállyal. A többit a Laravel automatikusan intézi. Ha – mint esetünkben – azt szeretnénk elérni, hogy az esemény ne minden felhasználóhoz, hanem csak egy meghatározott bejelentkezett felhasználóhoz jusson el, ezt a `broadcastOn` metódusban definiálhatja. Esetünkben a `BackgroundJob` objektum `user_id`-jét használjuk arra, hogy az eseményt csak az adott felhasználói azonosítóval rendelkező felhasználó privát csatornájára küldjük (például `App.Models.User.2348792`).

// app/Events/BackgroundJob.php

use App\Models\BackgroundJob;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class BackgroundJobUpdated implements ShouldBroadcast
{
    public function __construct(
        public BackgroundJob $backgroundJob
    ) {}

    public function broadcastOn()
    {
        return new PrivateChannel('App.Models.User.' . $this->backgroundJob->user_id);
    }

    // ...
}

Ha a WebSocket kapcsolat megfelelően van konfigurálva, akkor ezek az adatok azonnal elküldésre kerülnek a csatlakoztatott WebSocket ügyfeleknek.

Események fogadása

Aki A-t mond, annak B-t is kell mondania – aki küld, annak kapnia is kell. Itt jön képbe a Laravel WebSocket szerver megfelelője – a Laravel echo Javascript kliens. Ez egy karcsú Javascript-könyvtár, amely a socket.io vagy a pusher Javascript klienssel is működtethető. Példánkban az echo klienst használjuk a pusher Javascript klienssel.

Az echo kliens és a pusher könyvtár a webes kezelőfelületen (például egy kis SPA NuxtJS-szel) telepítve van a következő parancsokkal:

npm install laravel-echo pusher-js

Ezt követően néhány metódushívással WebSocket kapcsolat létesíthető a Laravel WebSocket szerverrel:

const echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.PUSHER_KEY,
    wsHost: process.env.PUSHER_HOST,
    wsPort: 443,
    forceTLS: true,
})

echo.private(`App.Models.User.${currentUser.id}`)
    .listen('BackgroundJobUpdated', event => console.log(event));

Az Echo kliens inicializálása után könnyen meghatározhatjuk azokat a csatornákat, amelyeket meg akarunk hallgatni az új eseményekhez. A fenti példában csak egy "BackgroundJobUpdated" esemény kimenetét naplózzuk a konzolra, miután a háttérrendszer elküldte azt az aktuális felhasználónak.

Hitelesítés és privát csatornák

Elvileg minden kliens először bejelentkezhet a Laravel WebSocket szerverre. A WebSocket kliensnek azonban hitelesítenie kell magát, amikor csatlakozik a privát üzenetekhez.

Ebből a célból a Laravel WebSockets biztosítja az útvonalat/közvetítést/hitelesítést. A Laravel echo kliens a kapcsolat létrejöttekor automatikusan megpróbálja hitelesíteni a WebSocket felhasználót a privát csatornák használatához.

Ez a BroadcastServiceProvider rendszerindítási metódusában határozható meg.

// app/Providers/BroadcastServiceProvider.php
public function boot()
{
    Broadcast::routes();

    require base_path('routes/channels.php');
}

A csatornák lehetnek például privát csatornák, például a felhasználói adatok frissítésére szolgáló csatorna. Az alábbi konfigurációval biztosítjuk, hogy a bejelentkezett felhasználó csak a felhasználói adataival és a neki szánt frissítésekkel férhessen hozzá a broadcast csatornához. Ebben az esetben a csatornanév végén található felhasználói azonosítónak meg kell egyeznie a bejelentkezett felhasználó azonosítójával - egyszerű, de hatékony!

// routes/channels.php

use Illuminate\Support\Facades\Broadcast;

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

Oszd meg, HA TETSZETT

Megosztom Tweetelem Megosztom

Laravel Websockets