Laravel 10. Уведомления в реальном времени. Часть 1.

Для настройки уведомлений в реальном времени будем использовать сервис Ably.

В бесплатном пакете:

• 6 млн сообщений в месяц
• 70 сообщений в секунду
• 200 одновременных подключений
• 200 каналов подключения

Для небольшого проекта - более чем достаточно.

Регистрируемся на сайте сервиса, создаем приложение и забираем ключ (API Key).

Сохраняем ключ в файле .env и там же меняем опцию драйвера:

...

BROADCAST_DRIVER=ably
ABLY_KEY=ROOT_API_KEY_COPIED_FROM_ABLY_WEB_DASHBOARD

...

Далее необходимо установить и скомпилировать пакеты:

php composer require ably/laravel-broadcaster

npm install @ably/laravel-echo ably
npm run dev

Также нам понадобится таблица для хранения уведомлений. Она входит в Laravel - надо просто ее достать и запустить миграцию:

php artisan notifications:table

php artisan migrate

Настраиваем приложение. Сперва необходимо в файле config/app.php раскоментировать строку, подключающую провайдер:

...
/*
* Application Service Providers...
*/
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
App\Providers\BroadcastServiceProvider::class,      # Раскомментировать
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
...

В файле config/broadcasting.php, в секции connections, должны присутствовать следующие строки:

...
'ably' => [
    'driver' => 'ably',
    'key' => env('ABLY_KEY'),
],
...

В файле resources/js/bootstrap.js прописываем следующие строки:

...
import Echo from '@ably/laravel-echo';
import * as Ably from 'ably';

window.Ably = Ably;
window.Echo = new Echo({
    broadcaster: 'ably',
});
...

Теперь нам уже доступен сервис Ably. Проверить можно дописав ниже следующие строки:

window.Echo.connector.ably.connection.on(stateChange => {
    if (stateChange.current === 'connected') {
        console.log('connected to ably server');
    }
});

В консоли браузера должны увидеть: connected to ably server