Как использовать Soketi с Laravel

ЧАСТЬ 1
ЧАСТЬ 2
ЧАСТЬ 3

В сегодняшней статье мы рассмотрим, как использовать Soketi в качестве сервера WebSockets с Laravel. В этой статье мы будем использовать все локально, а в части 2 мы развернем Soketi на EC2.

Необходимые условия:

— Проект Laravel 9.
— Node js
— Python 3.x
— GIT
— Компилятор gcc и зависимости для сборки

Убедитесь, что все вышеперечисленные инструменты установлены на вашей машине, прежде чем приступать к работе.

ПРИМЕЧАНИЕ: существует несколько способов установки Soketi, ознакомьтесь с официальной документацией.

ПРИМЕЧАНИЕ2: если вы используете Mac OS, как в моем случае, используйте brew для установки всех трех вышеперечисленных пакетов:

brew install gcc
...
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 1: Установка и запуск Soketi

Теперь установите Soketi глобально на вашу машину, запустив его:

npm install -g @soketi/soketi
Войти в полноэкранный режим Выйти из полноэкранного режима

После завершения установки запустите:

soketi start
Войти в полноэкранный режим Выйти из полноэкранного режима

У вас должно получиться что-то вроде этого:

Шаг 2: Установка сопутствующих пакетов Laravel (клиент, сервер)

Чтобы использовать драйвер pusher с Laravel, необходимо установить Pusher Channels PHP SDK с помощью менеджера пакетов Composer:

composer require pusher/pusher-php-server
Войдите в полноэкранный режим Выйти из полноэкранного режима

Чтобы получать события на стороне клиента, необходимо установить эти два пакета, бросив NPM:

npm install --save-dev laravel-echo pusher-js
Войти в полноэкранный режим Выйти из полноэкранного режима

И последнее, установите laravel/breeze:

composer require laravel/breeze

php artisan breeze:install
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 3: Настройте Soketi с помощью Laravel

Сначала откройте файл config/broadcasting.php и измените драйвер pusher на следующий:

'connections' => [

    // ...

    'pusher' => [
        'driver' => 'pusher',
        'key' => env('PUSHER_APP_KEY', 'app-key'),
        'secret' => env('PUSHER_APP_SECRET', 'app-secret'),
        'app_id' => env('PUSHER_APP_ID', 'app-id'),
        'options' => [
            'host' => env('PUSHER_HOST', '127.0.0.1'),
            'port' => env('PUSHER_PORT', 6001),
            'scheme' => env('PUSHER_SCHEME', 'http'),
            'encrypted' => true,
            'useTLS' => env('PUSHER_SCHEME') === 'https',
        ],
    ],
],
Войти в полноэкранный режим Выйти из полноэкранного режима

Нам нужно обновить наш файл .env с новыми деталями конфигурации:

PUSHER_APP_KEY=app-key
PUSHER_APP_ID=app-id
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
Войти в полноэкранный режим Выйти из полноэкранного режима

Также в файле .env измените BROADCAST_DRIVER на pusher.

Теперь перейдите в файл resources/js/bootstrap.js и откомментируйте последние строки:

import Echo from "laravel-echo";

import Pusher from "pusher-js";
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: "pusher",
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost:
        import.meta.env.VITE_PUSHER_HOST ??
        `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? "https") === "https",
    enabledTransports: ["ws", "wss"],
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Шаг 4: Используйте Soketi с Laravel

Создайте новое событие php artisan make:event OrderStatusUpdated.

Откройте его и измените следующим образом:

class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct()
    {
    }

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Затем в resources/js/bootstrap.js в конце добавьте этот код:

window.Echo.channel("orders").listen("OrderStatusUpdated", (e) => {
    console.log(e);
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Это простой слушатель событий для прослушивания OrderStatusUpdated, когда он сработает.

Теперь перейдите в web.php и создайте новый маршрут для запуска события

Route::get('/fire', function () {
    OrderStatusUpdated::dispatch();

    return 'Event has been sent!';
});
Войдите в полноэкранный режим Выйти из полноэкранного режима

Шаг 5: Тестирование

Откройте две вкладки в браузере:

Первая soketi.test/dashboard и откройте консоль, чтобы просто увидеть событие.

Вторая — запустите событие, посетив soketi.test/fire.

После перехода по второму URL вы должны увидеть событие в первой вкладке в РЕАЛЬНОМ ВРЕМЕНИ 🙂

========== Конец =============

Другие полезные ресурсы:

1- Курс Laracast, в котором подробно рассказывается о вещании событий в Laravel.

2- Всегда проверяйте официальную документацию Soketi для получения более подробной информации.

Увидимся в PT.2 🙂

Оцените статью
devanswers.ru
Добавить комментарий