(`orders.${orderId}`, "OrderShipmentStatusUpdated", (e) => {
console.log(e.order.id);
console.log(e.order.user.id);
});
```
Хук `useEcho` автоматично виходить з каналів, коли компонент, який його використовує, демонтується; проте за потреби ви можете скористатися поверненими функціями, щоб програмно зупиняти / поновлювати прослуховування каналів вручну:
```js tab=React
import { useEcho } from "@laravel/echo-react";
const { leaveChannel, leave, stopListening, listen } = useEcho(
`orders.${orderId}`,
"OrderShipmentStatusUpdated",
(e) => {
console.log(e.order);
},
);
// Stop listening without leaving channel...
stopListening();
// Start listening again...
listen();
// Leave channel...
leaveChannel();
// Leave a channel and also its associated private and presence channels...
leave();
```
```vue tab=Vue
```
```svelte tab=Svelte
```
#### Підключення до публічних каналів
Щоб підключитися до публічного каналу, скористайтеся хуком `useEchoPublic`:
```js tab=React
import { useEchoPublic } from "@laravel/echo-react";
useEchoPublic("posts", "PostPublished", (e) => {
console.log(e.post);
});
```
```vue tab=Vue
```
```svelte tab=Svelte
```
#### Підключення до каналів присутності
Щоб підключитися до каналу присутності, скористайтеся хуком `useEchoPresence`:
```js tab=React
import { useEchoPresence } from "@laravel/echo-react";
useEchoPresence("posts", "PostPublished", (e) => {
console.log(e.post);
});
```
```vue tab=Vue
```
```svelte tab=Svelte
```
#### Статус з'єднання
Отримати поточний статус WebSocket-з'єднання можна хуком `useConnectionStatus`, який надає реактивний статус, що автоматично оновлюється зі зміною стану з'єднання:
```js tab=React
import { useConnectionStatus } from "@laravel/echo-react";
function ConnectionIndicator() {
const status = useConnectionStatus();
return Connection: {status}
;
}
```
```vue tab=Vue
Connection: {{ status }}
```
```svelte tab=Svelte
Connection: {status()}
```
Можливі значення статусу:
- `connected` - успішно підключено до WebSocket-сервера.
- `connecting` - триває початкова спроба підключення.
- `reconnecting` - триває спроба перепідключитися після розриву.
- `disconnected` - не підключено й спроб перепідключитися немає.
- `failed` - підключення не вдалося, повторів не буде.
#### ID сокета
Отримати поточний ID WebSocket-сокета можна хуком `useSocketId`, який надає реактивне значення, що автоматично оновлюється, коли з'єднання перепідключається з новим ID сокета:
```js tab=React
import { useSocketId } from "@laravel/echo-react";
function SocketIndicator() {
const socketId = useSocketId();
return Socket ID: {socketId}
;
}
```
```vue tab=Vue
Socket ID: {{ socketId }}
```
```svelte tab=Svelte
Socket ID: {socketId()}
```
## Канали присутності
Канали присутності будуються на безпеці приватних каналів, додаючи можливість знати, хто підписаний на канал. Це спрощує створення потужних спільних можливостей - наприклад, сповіщати користувачів, що ту саму сторінку переглядає хтось іще, або показувати список учасників чату.
### Авторизація каналів присутності
Усі канали присутності є також приватними, тому користувачі мають бути [авторизовані для доступу до них](#authorizing-channels). Проте, описуючи колбеки авторизації для каналів присутності, ви не повертаєте `true`, коли користувач має право приєднатися до каналу. Натомість вам слід повернути масив даних про користувача.
Дані, які повернув колбек авторизації, стануть доступні слухачам подій каналу присутності у вашому застосунку на JavaScript. Якщо користувач не має права приєднатися до каналу присутності, поверніть `false` або `null`:
```php
use App\Models\User;
Broadcast::channel('chat.{roomId}', function (User $user, int $roomId) {
if ($user->canJoinRoom($roomId)) {
return ['id' => $user->id, 'name' => $user->name];
}
});
```
### Приєднання до каналів присутності
Щоб приєднатися до каналу присутності, скористайтеся методом `join` з Echo. Метод `join` поверне реалізацію `PresenceChannel`, яка, окрім методу `listen`, дозволяє підписатися на події `here`, `joining` та `leaving`.
```js
Echo.join(`chat.${roomId}`)
.here((users) => {
// ...
})
.joining((user) => {
console.log(user.name);
})
.leaving((user) => {
console.log(user.name);
})
.error((error) => {
console.error(error);
});
```
Колбек `here` виконається одразу після успішного приєднання до каналу й отримає масив з інформацією про всіх інших користувачів, які наразі підписані на канал. Метод `joining` виконається, коли до каналу приєднається новий користувач, а метод `leaving` - коли користувач залишить канал. Метод `error` виконається, коли точка автентифікації поверне HTTP-статус, відмінний від 200, або якщо виникне проблема з розбором повернутого JSON.
### Бродкастинг у канали присутності
Канали присутності можуть отримувати події так само, як публічні чи приватні канали. На прикладі чат-кімнати ми можемо захотіти надсилати події `NewMessage` до каналу присутності кімнати. Для цього повернемо екземпляр `PresenceChannel` з методу `broadcastOn` події:
```php
/**
* Get the channels the event should broadcast on.
*
* @return array
*/
public function broadcastOn(): array
{
return [
new PresenceChannel('chat.'.$this->message->room_id),
];
}
```
Як і з іншими подіями, ви можете скористатися хелпером `broadcast` і методом `toOthers`, щоб виключити поточного користувача з отримувачів бродкасту:
```php
broadcast(new NewMessage($message));
broadcast(new NewMessage($message))->toOthers();
```
Як і для інших типів подій, слухати події, надіслані до каналів присутності, можна методом `listen` з Echo:
```js
Echo.join(`chat.${roomId}`)
.here(/* ... */)
.joining(/* ... */)
.leaving(/* ... */)
.listen('NewMessage', (e) => {
// ...
});
```
## Бродкастинг моделей
> [!WARNING]
> Перш ніж читати документацію нижче про бродкастинг моделей, радимо ознайомитися із загальними концепціями сервісів бродкастингу моделей у Laravel, а також із тим, як вручну створювати й слухати події бродкастингу.
Часто буває потрібно надсилати події, коли [моделі Eloquent](/docs/{{version}}/eloquent) вашого застосунку створюються, оновлюються чи видаляються. Звісно, це легко зробити, вручну [описавши власні події для змін стану моделі Eloquent](/docs/{{version}}/eloquent#events) і позначивши ці події інтерфейсом `ShouldBroadcast`.
Проте, якщо ви не використовуєте ці події для чогось іще у своєму застосунку, створювати класи подій лише заради бродкастингу може бути обтяжливо. Щоб зарадити цьому, Laravel дозволяє вказати, що модель Eloquent має автоматично надсилати свої зміни стану.
Для початку ваша модель Eloquent має використовувати трейт `Illuminate\Database\Eloquent\BroadcastsEvents`. Крім того, модель має описати метод `broadcastOn`, який поверне масив каналів, у які слід надсилати події моделі:
```php
belongsTo(User::class);
}
/**
* Get the channels that model events should broadcast on.
*
* @return array
*/
public function broadcastOn(string $event): array
{
return [$this, $this->user];
}
}
```
Щойно ваша модель містить цей трейт і описує свої канали бродкастингу, вона почне автоматично надсилати події, коли екземпляр моделі створюється, оновлюється, видаляється, потрапляє в кошик чи відновлюється.
Крім того, ви могли помітити, що метод `broadcastOn` отримує рядковий аргумент `$event`. Цей аргумент містить тип події, що сталася з моделлю, і матиме значення `created`, `updated`, `deleted`, `trashed` або `restored`. Перевіряючи значення цієї змінної, ви можете визначити, у які канали (якщо взагалі в якісь) модель має надсилати конкретну подію:
```php
/**
* Get the channels that model events should broadcast on.
*
* @return array>
*/
public function broadcastOn(string $event): array
{
return match ($event) {
'deleted' => [],
default => [$this, $this->user],
};
}
```
#### Налаштування створення події бродкастингу моделі
Інколи вам може захотітися змінити те, як Laravel створює подію бродкастингу моделі під капотом. Зробити це можна, описавши в моделі Eloquent метод `newBroadcastableEvent`. Цей метод має повернути екземпляр `Illuminate\Database\Eloquent\BroadcastableModelEventOccurred`:
```php
use Illuminate\Database\Eloquent\BroadcastableModelEventOccurred;
/**
* Create a new broadcastable model event for the model.
*/
protected function newBroadcastableEvent(string $event): BroadcastableModelEventOccurred
{
return (new BroadcastableModelEventOccurred(
$this, $event
))->dontBroadcastToCurrentUser();
}
```
### Домовленості бродкастингу моделей
#### Домовленості щодо каналів
Як ви могли помітити, метод `broadcastOn` у прикладі моделі вище повертав не екземпляри `Channel`. Натомість поверталися самі моделі Eloquent. Якщо метод `broadcastOn` вашої моделі повертає екземпляр моделі Eloquent (або містить його в поверненому масиві), Laravel автоматично створить екземпляр приватного каналу для моделі, використавши як ім'я каналу назву класу моделі та її первинний ключ.
Тож модель `App\Models\User` з `id` `1` перетвориться на екземпляр `Illuminate\Broadcasting\PrivateChannel` з іменем `App.Models.User.1`. Звісно, окрім повернення екземплярів моделей Eloquent із методу `broadcastOn`, ви можете повертати повноцінні екземпляри `Channel`, щоб повністю контролювати імена каналів моделі:
```php
use Illuminate\Broadcasting\PrivateChannel;
/**
* Get the channels that model events should broadcast on.
*
* @return array
*/
public function broadcastOn(string $event): array
{
return [
new PrivateChannel('user.'.$this->id)
];
}
```
Якщо ви плануєте явно повертати екземпляр каналу з методу `broadcastOn` моделі, ви можете передати екземпляр моделі Eloquent у конструктор каналу. У такому разі Laravel скористається домовленостями щодо каналів моделей, описаними вище, щоб перетворити модель Eloquent на рядкове ім'я каналу:
```php
return [new Channel($this->user)];
```
Якщо вам потрібно дізнатися ім'я каналу моделі, викличте метод `broadcastChannel` на будь-якому екземплярі моделі. Наприклад, для моделі `App\Models\User` з `id` `1` цей метод поверне рядок `App.Models.User.1`:
```php
$user->broadcastChannel();
```
#### Домовленості щодо подій
Оскільки події бродкастингу моделей не пов'язані зі «справжньою» подією в каталозі `App\Events` вашого застосунку, ім'я та дані їм призначаються за домовленостями. Домовленість Laravel така: подія надсилається під назвою класу моделі (без простору імен) і назвою події моделі, яка спричинила бродкаст.
Тож, наприклад, оновлення моделі `App\Models\Post` надішле до вашого клієнтського застосунку подію `PostUpdated` з такими даними:
```json
{
"model": {
"id": 1,
"title": "My first post"
...
},
...
"socket": "someSocketId"
}
```
Видалення моделі `App\Models\User` надішле подію з назвою `UserDeleted`.
За бажанням ви можете описати власні ім'я бродкасту й дані, додавши до моделі методи `broadcastAs` і `broadcastWith`. Ці методи отримують назву події / операції моделі, що відбувається, дозволяючи налаштувати ім'я та дані події для кожної операції з моделлю. Якщо метод `broadcastAs` повертає `null`, надсилаючи подію, Laravel скористається домовленостями щодо імен подій бродкастингу моделей, описаними вище:
```php
/**
* The model event's broadcast name.
*/
public function broadcastAs(string $event): string|null
{
return match ($event) {
'created' => 'post.created',
default => null,
};
}
/**
* Get the data to broadcast for the model.
*
* @return array
*/
public function broadcastWith(string $event): array
{
return match ($event) {
'created' => ['title' => $this->title],
default => ['model' => $this],
};
}
```
### Прослуховування бродкастів моделей
Щойно ви додали до моделі трейт `BroadcastsEvents` і описали її метод `broadcastOn`, можна починати слухати надіслані події моделі у клієнтському застосунку. Перш ніж почати, вам може бути корисно переглянути повну документацію про [прослуховування подій](#listening-for-events).
Спершу отримайте екземпляр каналу методом `private`, а потім викличте метод `listen`, щоб слухати вказану подію. Зазвичай ім'я каналу, передане методу `private`, має відповідати [домовленостям бродкастингу моделей](#model-broadcasting-conventions) у Laravel.
Отримавши екземпляр каналу, ви можете слухати конкретну подію методом `listen`. Оскільки події бродкастингу моделей не пов'язані зі «справжньою» подією в каталозі `App\Events` вашого застосунку, [ім'я події](#model-broadcasting-event-conventions) має мати префікс `.`, який вказує, що вона не належить до жодного простору імен. Кожна подія бродкастингу моделі має властивість `model`, яка містить усі властивості моделі, придатні для бродкастингу:
```js
Echo.private(`App.Models.User.${this.user.id}`)
.listen('.UserUpdated', (e) => {
console.log(e.model);
});
```
#### Використання React, Vue чи Svelte
Якщо ви користуєтеся React, Vue чи Svelte, для зручного прослуховування бродкастів моделей скористайтеся хуком `useEchoModel`, який входить до Laravel Echo:
```js tab=React
import { useEchoModel } from "@laravel/echo-react";
useEchoModel("App.Models.User", userId, ["UserUpdated"], (e) => {
console.log(e.model);
});
```
```vue tab=Vue
```
```svelte tab=Svelte
```
Ви також можете описати форму даних події моделі, отримавши кращу типобезпеку й зручність редагування:
```ts
type User = {
id: number;
name: string;
email: string;
};
useEchoModel("App.Models.User", userId, ["UserUpdated"], (e) => {
console.log(e.model.id);
console.log(e.model.name);
});
```
## Клієнтські події
> [!NOTE]
> Користуючись [Pusher Channels](https://pusher.com/channels), ви маєте увімкнути опцію «Client Events» у розділі «App Settings» вашої [панелі застосунку](https://dashboard.pusher.com/), щоб надсилати клієнтські події.
Інколи вам може захотітися надіслати подію іншим підключеним клієнтам, узагалі не звертаючись до застосунку Laravel. Це особливо корисно для речей на кшталт сповіщень «набирає повідомлення», коли ви хочете попередити користувачів застосунку, що інший користувач набирає повідомлення на певному екрані.
Щоб надсилати клієнтські події, скористайтеся методом `whisper` з Echo:
```js tab=JavaScript
Echo.private(`chat.${roomId}`)
.whisper('typing', {
name: this.user.name
});
```
```js tab=React
import { useEcho } from "@laravel/echo-react";
const { channel } = useEcho(`chat.${roomId}`, ['update'], (e) => {
console.log('Chat event received:', e);
});
channel().whisper('typing', { name: user.name });
```
```vue tab=Vue
```
```svelte tab=Svelte
```
Щоб слухати клієнтські події, скористайтеся методом `listenForWhisper`:
```js tab=JavaScript
Echo.private(`chat.${roomId}`)
.listenForWhisper('typing', (e) => {
console.log(e.name);
});
```
```js tab=React
import { useEcho } from "@laravel/echo-react";
const { channel } = useEcho(`chat.${roomId}`, ['update'], (e) => {
console.log('Chat event received:', e);
});
channel().listenForWhisper('typing', (e) => {
console.log(e.name);
});
```
```vue tab=Vue
```
```svelte tab=Svelte
```
## Сповіщення
Поєднавши бродкастинг подій зі [сповіщеннями](/docs/{{version}}/notifications), ваш застосунок на JavaScript зможе отримувати нові сповіщення щойно вони з'являються, без оновлення сторінки. Перш ніж почати, обов'язково прочитайте документацію про [канал сповіщень broadcast](/docs/{{version}}/notifications#broadcast-notifications).
Щойно ви налаштували сповіщення на використання каналу broadcast, слухати події бродкастингу можна методом `notification` з Echo. Пам'ятайте: ім'я каналу має збігатися з назвою класу сутності, яка отримує сповіщення:
```js tab=JavaScript
Echo.private(`App.Models.User.${userId}`)
.notification((notification) => {
console.log(notification.type);
});
```
```js tab=React
import { useEchoModel } from "@laravel/echo-react";
const { channel } = useEchoModel('App.Models.User', userId);
channel().notification((notification) => {
console.log(notification.type);
});
```
```vue tab=Vue
```
```svelte tab=Svelte
```
У цьому прикладі всі сповіщення, надіслані екземплярам `App\Models\User` через канал `broadcast`, отримуватиме колбек. Колбек авторизації каналу `App.Models.User.{id}` уже є у файлі `routes/channels.php` вашого застосунку.
#### Припинення прослуховування сповіщень
Якщо ви хочете перестати слухати сповіщення, не [виходячи з каналу](#leaving-a-channel), скористайтеся методом `stopListeningForNotification`:
```js
const callback = (notification) => {
console.log(notification.type);
}
// Start listening...
Echo.private(`App.Models.User.${userId}`)
.notification(callback);
// Stop listening (callback must be the same)...
Echo.private(`App.Models.User.${userId}`)
.stopListeningForNotification(callback);
```