Представьте себе, что вы создаете веб-приложения, которые реагируют мгновенно, в которых обновление данных и взаимодействие происходит в мгновение ока. Добро пожаловать в мир веб-разработки в реальном времени. В этой статье мы попробуем создать простой пример того, как использовать WebSocket-соединение в приложении Laravel с помощью Soketi.
Мы представим Soketi, настроим необходимые инструменты и настроим Laravel для работы с WebSockets. К концу этой статьи у вас будет базовая система WebSocket, готовая к работе.
Что такое Сокети?
Soketi — это простой, быстрый и отказоустойчивый сервер WebSockets с открытым исходным кодом. Это упрощает процесс настройки WebSocket, позволяя сосредоточиться на создании функций в режиме реального времени без сложностей, связанных с управлением сервером WebSocket.
Установка
Вы можете прочитать больше об инструкциях по установке Soketi в официальной документации Soketi.
Перед установкой сервера CLI Soketi WebSockets убедитесь, что у вас есть необходимые инструменты:
- Python 3.x
- ЖКТ
- Компилятор gcc и зависимости для сборки
Подробнее об установке CLI читайте здесь.
Шаг 1: Установите Soketi Начните с глобальной установки Soketi
через npm. Откройте терминал и выполните следующую команду:
npm install -g @soketi/soketi
Эта команда установит Soketi в вашей системе, что позволит вам запускать его из командной строки.
Шаг 2: Запустите сервер Soketi После установки Soketi запустите сервер
WebSocket с помощью этой команды:
Soketi теперь будет служить сервером WebSocket для вашего приложения Laravel.
Шаг 3: Установите необходимые пакеты
Мы будем использовать протокол Pusher с Soketi. Библиотека pusher/pusher-php-server предоставляет PHP-интерфейс для Pusher API, который позволяет отправлять и получать сообщения из каналов Pusher.
composer require pusher/pusher-php-server
Для получения событий на стороне клиента вам также нужно будет установить два пакета с помощью NPM:
npm install --save-dev laravel-echo pusher-js
Эти шаги настроят нас на бесперебойную коммуникацию в режиме реального времени в нашем приложении Laravel.
Шаг 4: Настройте трансляцию Далее настройте трансляцию
в Laravel. config/broadcasting.php Откройте файл и добавьте или измените конфигурацию Pusher следующим образом:
'connections' => [
'pusher' => [
'driver' => 'pusher',
'key' => env('PUSHER_APP_KEY'),
'secret' => env('PUSHER_APP_SECRET'),
'app_id' => env('PUSHER_APP_ID'),
'options' => [
'cluster' => env('PUSHER_APP_CLUSTER'),
'host' => env('PUSHER_HOST') ?: 'api-'.env('PUSHER_APP_CLUSTER', 'mt1').'.pusher.com',
'port' => env('PUSHER_PORT', 443),
'scheme' => env('PUSHER_SCHEME', 'https'),
'encrypted' => true,
'useTLS' => env('PUSHER_SCHEME', 'https') === 'https',
],
'client_options' => [
// Guzzle client options: https://docs.guzzlephp.org/en/stable/request-options.html
],
],
// ...
Эта конфигурация настраивает Pusher в качестве драйвера вещания для WebSockets.
Читайте также:
Шаг 5: Установите переменные среды Теперь
настройте переменные среды Pusher в вашем .env файле. Замените заполнители учетными данными Pusher:
BROADCAST_DRIVER=pusher
# other keys ...
PUSHER_APP_ID=app-id
PUSHER_APP_KEY=app-key
PUSHER_APP_SECRET=app-secret
PUSHER_HOST=127.0.0.1
PUSHER_PORT=6001
PUSHER_SCHEME=http
PUSHER_APP_CLUSTER=mt1
VITE_APP_NAME="${APP_NAME}"
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
Эти переменные необходимы для подключения Laravel к серверу WebSocket.
По умолчанию, когда мы запускаем сервер Soketi без дополнительной настройки, он будет работать и 127.0.0.1:6001 использовать следующие учетные данные приложения:
- Идентификатор приложения: идентификатор приложения
- Ключ приложения: ключ приложения
- Секрет: app-secret
Эти учетные данные играют решающую роль в аутентификации клиентских и серверных приложений, позволяя им отправлять и получать сообщения в режиме реального времени. Важно отметить, что для использования в производственной среде следует серьезно подумать об изменении этих параметров по умолчанию, чтобы повысить безопасность и обеспечить бесперебойную работу Soketi.
Шаг 6: Настройте JavaScript для Laravel Echo
В вашем файле JavaScript (обычноresources/js/bootstrap.js) настройте Laravel Echo для использования Pusher:
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,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
wsHost: import.meta.env.VITE_PUSHER_HOST ? 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'],
});
Эта настройка JavaScript позволяет вашему фронтенд-приложению Laravel взаимодействовать с сервером WebSocket.
Шаг 7: Создайте событие трансляции Теперь
давайте создадим событие Laravel, которое вы хотите транслировать с помощью WebSockets. Для этого примера мы создадим простое событие с именем NewEvent. Создайте новый файл в каталоге с именем app/Events NewEvent.php. Мы можем сделать событие следующей командой:Обновить со следующими NewEvent.php кодами:
php artisan make:event NewEvent
namespace App\Events;
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;
// make sure to implement the ShouldBroadcast interface.
// This is needed so that Laravel knows to broadcast the event over a WebSocket connection
class NewEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn(): array
{
return [
// we'll broadcast the event on a public channel called new-public-channel.
new Channel('new-public-channel'),
];
}
}
Это событие будет транслироваться на указанный канал.
Шаг 8: Трансляция события В ваших маршрутах Laravel (например, ) создайте маршрут, который отправляет событие:
Этот маршрут будет отправлять NewEvent событие при доступе, routes/web.phpимитируя триггер события
use App\Events\NewEvent;
Route::get('/event', function () {
NewEvent::dispatch(request()->msg);
return 'Message sent!';
});
в реальном времени.
Шаг 9: Прослушивание события в JavaScript Теперь в JavaScript
вы можете прослушивать транслируемое событие и обрабатывать его соответствующим образом. Например:
// resources/js/bootstrap.js
window.Echo = new Echo({
// ...
});
window.Echo.channel("new-public-channel").listen("NewEvent", (e) => {
console.log(e);
});
Этот код JavaScript прослушивает широковещательную NewEvent трансляцию на и new-public-channel регистрирует данные события.
Читайте также:
Шаг 10: Включите app.js в наш веб-интерфейс Laravel Чтобы включить прием событий, нам нужно включить app.js, который импортирует bootstrap.js, в наш веб-интерфейс
Laravel. Например, давайте включим его в welcome.blade.php файл:Шаг 11: Протестируйте WebSocket Чтобы протестировать реализацию WebSocket
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
<!-- Styles -->
<style>
<!-- long css -->
</style>
<!-- include app.js -->
@vite(['resources/js/app.js'])
</head>
, выполните следующие действия:
- Visit the home page that serves
welcome.blade.php(e.g.,http://127.0.0.1:8000) and open the Developer Tools and navigate to Console tab.
- Open a new tab in your web browser.
- Visit the
/eventroute in your Laravel application. - Add an additional query parameter, for example,
/event?msg=itworks, to send an event with a message. This action will dispatch theNewEventevent and trigger the JavaScript listener, allowing you to test and verify your WebSocket functionality.
- Back to the home page tab and check the Dev Tools Console.
Поздравляем! Вы успешно настроили основу для Laravel WebSockets с помощью Soketi.
Заключение
Мы научились настраивать WebSocket-сервер, транслировать события и делать так, чтобы наше приложение мгновенно реагировало на действия пользователей. Это похоже на то, как если бы ваше приложение ожило!
Приложения реального времени могут делать удивительные вещи, например, позволять людям мгновенно общаться в чате или слаженно работать вместе. С Laravel и Soketi у вас есть инструменты, чтобы воплотить эти крутые вещи в жизнь. Удачного программирования!
Репозиторий для этого примера можно найти по адресу fajarwz/blog-laravel-soketi.
