Покращена установка та фронтенд-хуки в Laravel Echo 2.1

Команда Laravel нещодавно представила суттєві оновлення для Laravel Echo — JavaScript-бібліотеки для трансляції подій в реальному часі.

# Поліпшений процес встановлення

По-перше, вдосконалено процес встановлення. Тепер, запустивши команду install:broadcasting в Artisan, ви отримаєте запит на введення необхідних даних, а відповідні змінні .env автоматично будуть внесені у систему.

# Новий хук useEcho

По-друге, додано хук useEcho для React та Vue. Він спростить прослуховування подій та автоматичне відключення від каналів у потрібний момент. Наприклад, у Vue:

<script setup lang="ts">
import { useEcho } from "@laravel/echo-vue";
 
useEcho(
    `orders.${orderId}`,
    "OrderShipmentStatusUpdated",
    (e) => {
        console.log(e.order);
    },
);
</script>

# Новий хук useEchoModel

Тепер стало простіше прослуховувати події моделей за допомогою нового хуку useEchoModel, який також забезпечує типобезпеку.

<script setup lang="ts">
import { useEchoModel } from "@laravel/echo-vue";
 
useEchoModel("App.Models.User", userId, ["UserUpdated"], (e) => {
    console.log(e.model);
});
</script>

# Визначення структури даних події

Наостанок, додано можливість вказувати структуру даних події, що підвищує типобезпеку та автозаповнення.

type User = {
    id: number;
    name: string;
    email: string;
};
 
useEchoModel<User, "App.Models.User">("App.Models.User", userId, ["UserUpdated"], (e) => {
    console.log(e.model.id);
    console.log(e.model.name);
});

Дізнайтеся більше про ці покращення та інші нововведення, ознайомившись з оновленою документацією з трансляції