Уявіть, що ви створюєте веб-додатки, які миттєво реагують, де оновлення даних і взаємодія відбуваються в одну мить. Ласкаво просимо у світ веб-розробки в реальному часі. У цій статті ми спробуємо створити простий приклад того, як використовувати підключення WebSocket у додатку Laravel за допомогою Soketi.
Ми представимо Soketi, налаштуємо необхідні інструменти та налаштуємо Laravel для роботи з WebSockets. До кінця цієї статті у вас буде готова базова
система WebSocket.Що таке Сокеті?
Soketi — це простий, швидкий і стійкий сервер WebSockets з відкритим вихідним кодом. Це спрощує процес налаштування WebSocket, дозволяючи вам зосередитися на створенні функцій у реальному часі без складнощів керування
сервером WebSocket.Встановлення
Ви можете прочитати більше про інструкції зі встановлення Soketi в офіційній документації Soketi.
Перед встановленням сервера CLI Soketi WebSockets переконайтеся, що у вас є необхідні інструменти:
- Python 3.x
- GIT
- Компілятор 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-id
- Ключ програми: клавіша додатка
- Секрет: додаток-секрет
Ці облікові дані відіграють вирішальну роль у автентифікації ваших інтерфейсних і внутрішніх програм, дозволяючи їм надсилати та отримувати повідомлення в режимі реального часу. Важливо зазначити, що для промислового використання вам слід настійно розглянути можливість зміни цих налаштувань за замовчуванням, щоб підвищити безпеку та забезпечити безперебійну роботу 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 подію
use App\Events\NewEvent;
Route::get('/event', function () {
NewEvent::dispatch(request()->msg);
return 'Message sent!';
});
при доступі, routes/web.phpімітуючи тригер події в реальному часі.
Крок 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: Включіть додаток.js у наш інтерфейс Laravel Щоб увімкнути прийом подій, нам потрібно включити app.js, який імпортує bootstrap.js, у наш інтерфейс
Laravel. Наприклад, давайте включимо його у файл
<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>
:Крок 11: Протестуйте WebSocket Щоб протестувати реалізацію WebSocket
, виконайте такі дії:welcome.blade.php
- 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.
